GitHub Pages 与静态站点部署
GitHub Pages 是免费的静态站点托管服务,特别适合文档站、博客、个人主页、以及本书所介绍的 GitBook 在线书本。配置自定义域名只需要几分钟。
GitHub Pages 的限制
在配置前,了解限制很重要:
| 项目 | 限制 |
|---|---|
| 存储 | 1 GB |
| 带宽 | 每月 100 GB 软限制 |
| 构建频率 | 每小时 10 次 |
| 文件类型 | 静态文件(HTML/CSS/JS/图片),不支持后端 |
| HTTPS | 自动(通过 Let's Encrypt) |
| 自定义域名 | 支持 |
适合场景:文档站、个人主页、营销落地页、GitBook 风格的书籍站点。
配置自定义域名
Step 1:在仓库根目录添加 CNAME 文件
echo "yourdomain.com" > CNAME
git add CNAME
git commit -m "Add custom domain"
git push
Step 2:在 GitHub 仓库设置中配置
仓库 → Settings → Pages → Custom domain → 输入 yourdomain.com → Save
Step 3:配置 DNS 记录
根域(yourdomain.com)→ GitHub Pages:
根域必须用 A 记录,指向 GitHub Pages 的 4 个 IP:
类型: A
名称: @
值: 185.199.108.153
TTL: 3600
类型: A
名称: @
值: 185.199.109.153
TTL: 3600
类型: A
名称: @
值: 185.199.110.153
TTL: 3600
类型: A
名称: @
值: 185.199.111.153
TTL: 3600
www 子域 → GitHub Pages:
类型: CNAME
名称: www
值: yourusername.github.io
TTL: 3600
Step 4:开启 HTTPS
仓库 → Settings → Pages → Enforce HTTPS → ✅ 勾选
GitHub Pages 会自动申请 Let's Encrypt 证书,通常在 24 小时内生效。
验证配置
# 验证 A 记录
dig yourdomain.com A +short
# 应该返回 4 个 GitHub Pages IP
# 验证 www CNAME
dig www.yourdomain.com CNAME +short
# → yourusername.github.io
# 验证网站可访问
curl -s -o /dev/null -w "%{http_code}" https://yourdomain.com
# → 200
GitHub Pages + Cloudflare(可选)
如果你想要更好的性能和安全性,可以把 Cloudflare 放在 GitHub Pages 前面:
DNS 配置(Cloudflare 代理):
| 记录 | 类型 | 值 | 代理 |
|---|---|---|---|
| @ | A | 185.199.108.153 | 橙色(代理) |
| @ | A | 185.199.109.153 | 橙色(代理) |
| @ | A | 185.199.110.153 | 橙色(代理) |
| @ | A | 185.199.111.153 | 橙色(代理) |
| www | CNAME | yourusername.github.io | 橙色(代理) |
SSL 设置:Cloudflare → SSL/TLS → Full(不是 Strict,因为 GitHub Pages 用 Let's Encrypt)
好处: - Cloudflare CDN 全球加速 - DDoS 防护 - 隐藏 GitHub Pages 源 IP
Cloudflare Pages(替代方案)
Cloudflare Pages 是 Cloudflare 自己的静态站点托管,和 GitHub Pages 类似,但有一些优势:
| 对比 | GitHub Pages | Cloudflare Pages |
|---|---|---|
| 免费计划带宽 | 100 GB/月 | 无限制 |
| 自定义域名 | ✅ | ✅ |
| HTTPS | ✅(Let's Encrypt) | ✅(Cloudflare) |
| CDN | ❌(需要另加 Cloudflare) | ✅(内置) |
| 构建系统 | 有限(Jekyll/Actions) | 支持 Next.js、Gatsby、Hugo 等 |
| 部署速度 | 较慢 | 快 |
Cloudflare Pages 自定义域名配置: - 在 Cloudflare Pages 项目设置中添加自定义域名 - Cloudflare 自动配置 DNS(如果域名在 Cloudflare 托管) - SSL 自动配置
本章执行清单
- [ ] 确认 GitHub 仓库已有 CNAME 文件(或在 Settings 中配置了域名)
- [ ] 在 DNS 后台添加 4 条 A 记录(GitHub Pages IPs)+ 1 条 www CNAME
- [ ] 等待 DNS 传播后,在 GitHub 仓库 Settings → Pages → Enforce HTTPS
- [ ] 用
dig yourdomain.com A +short验证指向正确
总结:三种静态站点托管方案对比
| 方案 | 费用 | CDN | SSL | 最适合 |
|---|---|---|---|---|
| GitHub Pages | 免费 | ❌(需额外配) | 自动 | 开发者文档、个人项目 |
| GitHub Pages + Cloudflare | 免费 | ✅ | 自动 | 有访问量的文档站 |
| Cloudflare Pages | 免费 | ✅ | 自动 | 现代前端框架项目 |
| Vercel | 免费(有限制) | ✅ | 自动 | Next.js 项目 |
| Netlify | 免费(100GB) | ✅ | 自动 | JAMstack 项目 |
恭喜完成本书!
你现在已经掌握了:DNS 原理、域名管理、SSL 配置、CDN 接入、邮件认证、站点迁移、故障排查,以及 Shopify、Cloudflare、GitHub Pages 的实战配置。这些知识足以支撑你独立运营任何类型的公开站点。
推荐下一本:Shopify 深度实战指南——在 DNS 和基础设施配置完成后,深入 Shopify 平台的每一层能力。