五分钟上线：用 GitHub Pages 免费部署你的第一个静态网站

type

Post

status

Published

date

Jun 1, 2019 13:52

slug

summary

手把手教你用 GitHub Pages 免费部署静态网站：从注册 GitHub 账号、创建专属仓库、发布网页，到购买自定义域名、配置 DNS 解析与 CNAME 绑定，涵盖完整流程与常见踩坑点。

什么是 GitHub Pages

简单来说，GitHub Pages 是 GitHub 送给每位开发者的免费礼物——一个可以托管和发布静态网页的服务。

你只需要把 HTML、CSS、JS 文件推到一个特定的仓库里，GitHub 就会自动帮你把它变成一个可以通过浏览器访问的网站。没有服务器要配置，没有流量要担心（当然，别拿它当 CDN 用就好）。

💡

适用场景： 个人博客、项目文档、作品集展示、简历页面……只要是静态内容，GitHub Pages 都能搞定。如果你需要后端逻辑，那它就爱莫能助了——毕竟它是"静态"页面服务，不是云服务器。

注册 GitHub 账号

如果你已经有 GitHub 账号，请直接跳到下一节。没有的话，跟着来，三分钟搞定。

打开 GitHub 官网，点击注册

填入用户名、密码、邮箱，然后完成机器人验证（证明你不是爬虫，虽然你可能写过爬虫）

选择账号类型。个人免费版完全够用——毕竟 GitHub Pages 本身就是免费的

问卷调查环节，可以直接跳过，GitHub 不会因为你跳过问卷就不给你用

去邮箱里找到验证邮件，点击链接完成验证。恭喜，你现在是 GitHub 的一员了

创建第一个仓库

账号有了，接下来要创建一个专门用于 GitHub Pages 的仓库。这一步有个关键命名规则，请务必留意。

登录后，点击页面右上角的 + 号，选择 New repository

点击新增仓库

输入仓库信息。这里有两个必须遵守的规则：

⚠️

仓库名必须是 username.github.io（把 username 替换成你的 GitHub 用户名）

仓库必须设置为 Public（私有仓库使用 GitHub Pages 需要付费）

填好后点击 Create repository。

进入仓库页面后，点击 Settings（设置）

向下滚动找到 GitHub Pages 区域。只有以 username.github.io 命名的仓库才会出现这个选项。点击显示的链接即可访问你的站点——默认首页是仓库中的 README.md 或 index.html 文件

因为现在仓库里只有一个 README.md，所以页面长这样——朴素，但它活着！

接下来，把你的静态网页文件推送到这个仓库，你的网站就上线了 🎉

绑定自定义域名

username.github.io 虽然能用，但总觉得差点意思——就好比你开了一家店，门牌号却是别人的。要让你的网站看起来更专业，你需要一个自己的域名。

购买域名

域名由 ICANN 统一管理，国内可以通过各大云服务商购买。腾讯云经常有域名打折活动，价格相当友好。

进入腾讯云官网，注册账号后点击域名特惠

挑一个你喜欢的域名，如果名字被占了就换个名字或后缀。.com 最经典，.cn 最便宜，.dev 最极客——看你的预算和品味

支付成功后，进入域名解析控制台。

配置域名解析

这一步的目标是：告诉全世界的 DNS 服务器，你的域名指向 GitHub Pages 的服务器 IP。

首先，打开命令行，ping 你的 GitHub Pages 地址拿到 IP：

拿到 IP 地址 185.199.109.153 后，回到腾讯云域名解析器，添加一条 A 记录指向这个 IP。

实名认证

非顶级域名（如 .cn）需要实名认证才能使用；顶级域名则需要备案。进入腾讯云域名管理器完成认证。

认证成功后，刷新域名解析器页面，状态正常即可。

仓库端配置

回到 GitHub 仓库，进入 Settings → GitHub Pages，在 Custom domain 栏填入你的域名并保存。

保存后，GitHub 会自动在仓库根目录生成一个 CNAME 文件，里面记录着你的域名。

🚨

踩坑预警： 这个 CNAME 文件只存在于远程仓库。如果你本地项目里没有这个文件，每次 push 代码时它就会被覆盖删除，域名绑定随之失效。解决办法： 把 CNAME 文件复制一份到你本地项目的根目录，和代码一起提交！

总结

步骤	内容	关键点
1. 注册	创建 GitHub 账号	邮箱验证
2. 建仓库	创建 `username.github.io` 仓库	必须 Public，命名格式固定
3. 发布	推送静态文件到仓库	默认首页为 index.html 或 README.md
4. 域名	购买域名 + DNS 解析 + CNAME 绑定	本地保留 CNAME 文件防覆盖

GitHub Pages 是每个开发者踏入"建站"世界的最低门槛——零成本、零运维、五分钟上线。它不能替代真正的服务器，但作为个人博客、项目文档、作品展示的载体，它已经绰绰有余。

下一步？你可以试试用 Hexo、Hugo 或 Jekyll 这类静态站点生成器，配合 GitHub Pages 实现自动化部署，让你的博客工作流更加丝滑。

参考资料

GitHub Pages 官方文档

腾讯云域名注册