GitHub Pages 上线：免费静态网站托管

💡 一句话总结：建一个 username.github.io 仓库，在网页上把 AI 生成的文件粘贴进去，Settings 里点开 Pages——最多 10 分钟后，你的网站就在公网上。

搜「GitHub Pages 教程」，前排文章多半默认你已经会用 Git：clone、push、SSH key 一路狂奔，零基础看两段就退出了。这一课把那些全部砍掉——A1 课里 AI 已经把 index.html、style.css、script.js 写进了你的文件夹，现在只差「把文件夹交给 GitHub」这最后一步，全程在浏览器里点选完成。

这是场景实战 A 路线（做网站）的第 2 课：A1 负责「做出来」，本课负责「发上线」；A3、A4 是同一件事在另外两家平台的做法。

• 页面还没做好？回 A1 用 AI 做网站
• 还没选定路线？回 4.0 场景实战：选你的路线

学完你能做什么

• 建一个名字严格的 <你的用户名>.github.io 仓库，让 GitHub 认出「这是你的个人站点」
• 不装 Git、不碰命令行，把 AI 生成的网页文件通过浏览器放进仓库
• 在 Settings → Pages 里配置发布源，把仓库变成一个公网能访问的网站
• 说得出改动后为什么最多等 10 分钟、超过 1 小时该去哪里查原因
• 以后每次更新文件，网站都会自动重新发布，不用重复整站上传

你现在的困境

• 「页面在文件夹里躺一周了。我知道要『部署』，但一搜全是 git 命令和 SSH key，看不懂也不敢动手」
• 「听说上线得买服务器，一个月几十块，我做个个人主页根本犯不上」
• 「注册过 GitHub，但只会点 Star——仓库建过一次，再也没打开过」

什么时候用这一招

当你需要：

• 一个免费、稳定的公网网址，把 AI 做好的页面直接发给别人看
• 顺手拥有自己的第一个 GitHub 仓库——放作品集、存文件都用得上
• 以后每次改动都自动重新发布，不用手动重复上传

而且不想：

• 安装 Git、配置 SSH、学习命令行
• 花钱买服务器、买域名（先用 GitHub 送的 username.github.io 网址）
• 在云平台控制台里研究一堆看不懂的配置项

更想「拖一个文件夹就上线」？那是 A3 Cloudflare Pages；更想「一条命令上线」？那是 A4 Vercel。三家的免费额度对比见 A5 部署平台对比。

🎒 开始前的准备

• 走完 A1 用 AI 做网站：文件夹里有验收过的 index.html，最好还有 style.css、script.js
• 一个 GitHub 账号（还没有的话，先去 GitHub 官网注册一个）
• 知道自己的 GitHub 用户名——仓库名要用它拼出来，含大写字母也要全部转成小写
• 想清楚仓库要公开：GitHub 免费账号的 Pages 仓库必须是 Public，这意味着什么见「踩坑提醒」第 4 条

核心思路

GitHub Pages 是 GitHub 官方的静态网站托管服务：从你的仓库里直接取 HTML、CSS、JavaScript 文件，发布成一个网站。你不用买服务器——构建和发布由 GitHub 的 Actions 工作流自动完成，公开仓库用标准构建机免费。

整个机制只有三个角色：

角色	是什么	本课的取值
仓库	存放网站文件的地方	<你的用户名>.github.io
发布源	从哪个分支、哪个目录取文件来发布	main 分支的根目录 /
入口文件	访客打开网址时看到的第一个文件	index.html

一条流水线：文件放进仓库 → Settings → Pages 里指好发布源 → GitHub 自动构建（从分支发布时默认用 Jekyll 构建器，你不用管它）→ 访客打开 https://<你的用户名>.github.io。之后每次提交改动，这条流水线自动重跑。

为什么仓库名必须是 用户名.github.io？因为 GitHub Pages 有两种站点，用户站点靠仓库名识别：

站点类型	仓库名	网址	数量限制
用户站点（本课）	<用户名>.github.io	https://<用户名>.github.io	每账号 1 个
项目站点	任意仓库名	https://<用户名>.github.io/<仓库名>	每仓库 1 个

最后记住边界：GitHub Pages 只发布静态文件，不支持 PHP、Ruby、Python 这类服务器端语言——这正是 A1 课让你第一版做纯静态页面的原因。真需要动态功能怎么办，看 A5 部署平台对比。

跟我做

五步走完，你的文件夹就变成一个公网网址。全程浏览器点选，一行命令都不用敲。

第 1 步：建一个叫 username.github.io 的仓库

为什么：用户站点的仓库名是硬性规定——GitHub 靠这个名字认出「这是某人的个人站点」，拼错一个字母，它就只是个普通仓库。

1. 登录 GitHub，点右上角 +，选 New repository
2. 仓库名填 <你的用户名>.github.io。例如用户名是 octocat，仓库名就是 octocat.github.io；用户名里有大写字母，也要全部转成小写
3. 可见性选 Public——GitHub 免费账号的 Pages 仓库必须公开
4. 把 Add README 开关拨到 On，让仓库先有个文件
5. 点 Create repository

你应该看到：一个空荡荡的仓库页面，文件列表里躺着一个 README.md。

• 仓库名和你的用户名严丝合缝，全小写

第 2 步：把 AI 生成的网站文件放进仓库

为什么：GitHub Pages 只发布仓库里的文件。你的网站现在还在自己电脑的文件夹里，得搬进来——不装 Git 也能搬：网页上新建文件、粘贴代码。

1. 在仓库页面的文件列表里新建文件，文件名填 index.html
2. 用文本编辑器打开 A1 课 AI 生成的 index.html，全选、复制，粘贴进网页上的编辑框
3. 点 Commit changes 提交
4. style.css、script.js 和其他页面文件，用同样的方法逐个新建、粘贴、提交

你应该看到：仓库文件列表里出现 index.html、style.css、script.js，和 A1 文件夹里的清单对得上。

💡 入口文件的规矩

GitHub Pages 找入口文件的名单是 index.html、index.md、README.md（官方文档就按这个顺序列）。你的 index.html 必须放在发布目录的最外层——本课发布源是仓库根目录，所以它就放仓库根目录，别放进任何子文件夹。建仓库时自动生成的 README.md 留着即可，它继续当仓库的说明门面。

⚠️ 图片粘贴不进来

index.html、style.css 是文本，能粘贴；照片这类二进制文件不行。第一版先让 AI 把占位图改成内联 SVG 或纯 CSS 效果（都是文本，照样粘贴）；真实图片的上传本课不展开。

• 仓库根目录有 index.html，文件名一个字母都没拼错

第 3 步：在 Settings → Pages 里选发布分支

为什么：文件到位后还差一个「开关」——告诉 GitHub 从哪个分支取文件发布。官方管这叫配置发布源（publishing source）。

1. 仓库名下方点 Settings
2. 左侧栏 Code, planning, and automation 分组里点 Pages
3. 「Build and deployment」区域，Source 下拉选 Deploy from a branch
4. Branch 下拉选 main，旁边目录选 / (root)——你的文件就在仓库根目录
5. 点 Save

你应该看到：Source 显示 Deploy from a branch、Branch 显示 main。GitHub 随即开始第一次构建——你什么都不用做，等就行。

• Source = Deploy from a branch，Branch = main + / (root)，已点 Save

第 4 步：等最多 10 分钟，访问你的新网站

为什么：GitHub 在后台用 Actions 工作流构建、发布你的站点。官方说法：推送改动后，最多要等 10 分钟才生效——这是正常节奏，不是卡住了。

1. 等 10 分钟以内，浏览器打开 https://<你的用户名>.github.io
2. 也可以从仓库 Settings → Pages 页面点 Visit site 直达

你应该看到：A1 课验收过的那个页面原样出现在公网上。把链接发给朋友——对方不用碰你的电脑也能打开。

10 分钟后还打不开？先核对网址拼写（就是仓库名），再稍等片刻；超过 1 小时还没更新，去仓库的 Actions 标签页看工作流运行记录，构建报错都会留在那里——「踩坑提醒」第 3 条展开。

• https://<你的用户名>.github.io 打开后，看到的是你的 index.html

第 5 步：更新网站——GitHub Pages 教程的日常循环

为什么：上线不是一锤子买卖。以后每次改内容，走的都是同一个循环，而且比第一次更省事。

1. 让 AI 改好文件；小改动也可以在网页上点铅笔图标直接编辑
2. 提交改动（Commit changes）
3. 等最多 10 分钟，刷新网址

你应该看到：网址不变，内容在 10 分钟内自动换新。

💡 提交即发布

你每次推送到发布分支的改动，GitHub Pages 都会自动重新发布——官方文档的说法是：只要改动被推送到源分支，源文件夹里的变化就会发布到站点。没有「重新上线」按钮要按。

检查点 ✅

• 仓库名严格是 <你的用户名>.github.io，全小写
• index.html 在仓库根目录（发布目录最外层），不在任何子文件夹里
• Settings → Pages：Source = Deploy from a branch，Branch = main + / (root)
• https://<你的用户名>.github.io 打开是你的页面
• 记住两个数：改动后最多等 10 分钟；超过 1 小时去 Actions 查工作流记录

踩坑提醒

❌ 仓库名拼错，或大写没转小写

现象：https://<用户名>.github.io 打不开，仓库却明明建好了。

原因：用户站点的仓库名是硬规定，GitHub 只认 <用户名>.github.io 这一种写法；用户名里含大写字母的，仓库名也必须全部小写。

正确做法：对着自己的 GitHub 个人主页核对用户名拼写，按 <用户名>.github.io 全小写重建仓库，把文件重新粘贴一遍——就几个文件，几分钟的事。

❌ index.html 被放进了子文件夹

现象：网址能打开，看到的却是 README.md 的内容，不是你做的页面。

原因：入口文件必须在发布目录的最外层。AI 有时会把整套文件生成在 site/ 这类子文件夹里，你照着原样搬，index.html 就藏深了一层，根目录只剩 README.md 够格当入口。

正确做法：本课发布源是仓库根目录 /，index.html、style.css、script.js 都直接放根目录；文件之间的相对引用（href="style.css" 这种）保持原样就能用——站点的目录结构和仓库一致。

❌ 十分钟没更新就反复改设置

现象：提交了改动，刷新还是旧页面，于是把 Settings 翻来覆去改、把文件删了重传。

原因：官方明确说推送后最多要等 10 分钟。构建需要时间，不是失败。

正确做法：等满 10 分钟再判断。超过 1 小时还没更新才需要排查：去仓库 Actions 标签页看最近一次工作流运行是成功还是报错；再确认推送的人有仓库管理员权限、GitHub 账号验证过邮箱——官方说这两个条件不满足，构建不会被触发。

❌ 把不想公开的内容放进仓库

现象：手机号、证件照、各种密钥，跟着网站文件一起提交上去了。

原因：GitHub 免费账号的 Pages 仓库必须 Public；而且官方专门警告——即使仓库是私有的（付费计划才允许），Pages 站点的内容照样公网可见。「仓库私有 = 没人看得见」在 GitHub Pages 上不成立。

正确做法：上线前过一遍文件清单，敏感数据先删掉再发布——官方警告的建议就是：发布前先把敏感数据移除。介意内容公开，选平台的考量见 A5 部署平台对比。

进阶技巧（可选）

🚀 想用 VitePress 这类框架？（可选）

从分支发布时，GitHub Pages 默认用 Jekyll 构建你的文件。想换别的静态站点生成器，官方给两条路：改用 GitHub Actions 工作流来构建发布（官方提供模板，通用流程是拉取代码 → 构建 → 上传产物 → 部署），或在发布源根目录放一个空文件 .nojekyll 关掉 Jekyll。第一站先用 A1 的手写静态文件跑通全流程，框架的事留到 A5 之后再折腾。

🚀 想给每个作品配一个网页？（可选）

一个账号的用户站点只有一个，但项目站点每仓库一个：任何仓库打开 Settings → Pages 做同样配置，网址是 https://<用户名>.github.io/<仓库名>。作品集里每个项目一个链接，就这么来。

🚀 想换成自己的域名？（可选）

username.github.io 先用着。等你有了自己的域名，从解析到绑定的完整做法在 5.3 自定义域名。

本课小结

✅ 你走完了这篇 GitHub Pages 教程的完整上线流程：

• 建仓库：名字严格是 <用户名>.github.io，免费账号选 Public
• 搬文件：网页上新建文件粘贴代码，index.html 放仓库根目录
• 开发布：Settings → Pages，Deploy from a branch + main + / (root)
• 验收：最多等 10 分钟，https://<用户名>.github.io 打开是你的页面
• 更新：改文件 → Commit changes → 10 分钟内自动重新发布

关键配置	推荐值	说明
仓库名	<用户名>.github.io	用户站点专用名，全小写
可见性	Public	GitHub 免费账号的硬要求
Source	Deploy from a branch	网页向导路线；另一条是 GitHub Actions
Branch / 目录	main + / (root)	文件在哪，就从哪发布
入口文件	index.html	也可 index.md、README.md；必须在发布目录最外层
生效时间	最多 10 分钟	超过 1 小时去 Actions 查工作流记录

下一课预告

下一课 A3 Cloudflare Pages 上线：连仓库都不用建，浏览器里把文件夹一拖就上线。你会学到：

• Direct Upload 拖拽上传怎么三步拿到一个 项目名.pages.dev 网址
• 会 Git 的人怎么用 Git 集成做到「每次 push 自动部署」
• 为什么这两种部署方式一旦选定就不能互换
• Cloudflare 官方已建议新项目从 Workers 起步，这对小白意味着什么

准备好了就把文件夹放在手边，进 A3 →