把仓库变成能打开的网页：GitHub Pages 入门
你昨天把练习仓库的说明写好了，同学问你要链接，你只能把仓库地址发过去。对方点进去，还要自己找到那个说明文件才看得懂。
0:00 / 9:12
把仓库变成能打开的网页：GitHub Pages 入门
这期节目带你在浏览器里开启 GitHub Pages：把仓库里的一个文件变成任何人都能打开的网页。
本期要完成的练习
继续用上一期的练习仓库
github-beginner-practice，先确认它是公开仓库。这次的目标是拿到一个真实网址。- 新文件：
index.html，放在仓库的最外层 - 内容：一个标题和一句话
- 结果：
https://<你的用户名>.github.io/<仓库名>/能打开它
GitHub Pages 是 GitHub 提供的静态网站托管服务：它把仓库里的 HTML、CSS、JavaScript 文件拿出来，可选地跑一次构建，然后发布成一个网站。静态的意思是服务器只把文件发出去，不在服务器上运行程序，所以 PHP、Ruby、Python 这类服务端语言它都不支持。1
浏览器操作步骤
- 打开自己的仓库主页，点 Add file，再点 Create new file。
- 文件名写
index.html。 - 在文件内容里输入下面这几行：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个练习页面</h1>
<p>这是我在 GitHub Pages 上的第一页。</p>
</body>
</html>
```
4. 在提交说明里写“添加站点首页”，确认提交到 `main` 分支，点 **Commit new file**。
5. 回到仓库主页，点 **Settings**；在左侧栏点击 **Pages**。
6. 在 **Build and deployment** 的 **Source** 里选择 **Deploy from a branch**，分支选 `main`，文件夹选根目录 `/`，点 **Save**。
入口文件是 `index.html`、`index.md` 或 `README.md`，必须位于发布来源文件夹的最外层；发布来源可以是某个分支的根目录，也可以是 `docs` 文件夹。改动最长可能需要 10 分钟才会发布。<MarkdownCitation index="2" title="Creating a GitHub Pages site - GitHub Docs" url="https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site" />
配置发布来源需要仓库的管理员或维护者权限；分支发布方式下，改动推到那个分支就会发布。<MarkdownCitation index="3" title="Configuring a publishing source for your GitHub Pages site - GitHub Docs" url="https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site" />
## 发布后怎么检查 {#发布后怎么检查}
- 点 **Visit site**，能打开你写的标题和那句话。
- 地址形如 `https://<用户名>.github.io/<仓库名>/`：项目站点的网址由用户名、`github.io` 和仓库名拼成，一个仓库只能有一个站点。
- 想确认构建和部署有没有出错，去仓库的 **Actions** 里看这次部署的运行记录。
- 打开是 404 时按顺序查四件事：文件名和大小写、发布来源的分支与文件夹、是否等够十分钟、GitHub 状态页是否正在故障。<MarkdownCitation index="4" title="Troubleshooting 404 errors for GitHub Pages sites - GitHub Docs" url="https://docs.github.com/en/pages/getting-started-with-github-pages/troubleshooting-404-errors-for-github-pages-sites" />
## 常见误区 {#常见误区}
- 写成 `Index.html` 或 `index.HTML`：文件名大小写敏感，名字不对就打不开。
- 文件放在 `docs` 里，发布来源却选了根目录：位置和设置必须一致。
- 以为私有仓库的站点也是私密的：Pages 站点在公开的互联网上，即使仓库是私有的，发布前先删掉敏感内容。
- 在免费账号的私有仓库上找 Pages：那需要 Pro、Team 或 Enterprise 这类方案；免费账号只支持公开仓库。
- 把 Pages 当成服务器：它只发布静态文件，不支持 PHP、Ruby、Python 这类服务端语言。
- 拿它做商业网站，或用它处理密码、信用卡号：官方明确不建议。站点不超过 1 GB，每月流量是 100 GB 的软限制，超了可能访问不了。<MarkdownCitation index="5" title="GitHub Pages limits - GitHub Docs" url="https://docs.github.com/en/pages/getting-started-with-github-pages/github-pages-limits" />
## 下一步练习 {#下一步练习}
在同一个仓库里新建 `about.html`，从首页用一个链接指过去，等它发布，确认第二个地址能打开；再把站点地址写进 README。
这次你要记住的不是“网页很难做”，而是一条发布链路：**文件放在正确的位置、发布来源指向它、等它构建、用网址验证**。
References
- 1What is GitHub Pages? - GitHub Docs
docs.github.com
- 2Creating a GitHub Pages site - GitHub Docs
docs.github.com
- 3
- 4
- 5GitHub Pages limits - GitHub Docs
docs.github.com
This story was produced automatically by a channel. One sentence is all it takes for Neodrop to keep producing for you.