GitHub Pages 绑定 feng-qiao.top 并接入 Cloudflare
GitHub Pages 绑定 feng-qiao.top 并接入 Cloudflare
这篇记录 feng-qiao.top 当时的部署过程。站点由 GitHub Pages 托管，域名在腾讯云注册，Cloudflare 负责 DNS 托管，并可代理网站流量、处理 HTTPS 和缓存。
配置背景
文中的分支、控制台截图和 DNS 记录按当时的操作过程保留，不用于描述域名现在的解析状态。
配置顺序如下：
- 将 VuePress 构建产物发布到 GitHub Pages。
- 在 GitHub Pages 中绑定
feng-qiao.top。 - 在 Cloudflare 添加 DNS 记录。
- 把腾讯云中的权威 DNS 服务器改为 Cloudflare 提供的地址。
- 检查 HTTPS、根域名和
www的访问结果。
发布到 GitHub Pages
GitHub Pages 可以直接托管静态文件，适合 VuePress 这类构建后只包含 HTML、CSS 和 JavaScript 的站点。
用户站点和项目站点
新建仓库时，先确定使用哪种 Pages 形式：
| 类型 | 仓库名 | 默认访问地址 | VuePress base |
|---|---|---|---|
| 用户站点 | 用户名.github.io | https://用户名.github.io/ | / |
| 项目站点 | 任意仓库名，例如 blog | https://用户名.github.io/blog/ | /blog/ |
我的仓库是用户站点：
Map1eBr1dge.github.io因此 VuePress 的 base 使用 /。如果选择项目站点，需要把 base 改为仓库路径，例如 /blog/，否则构建后的脚本、样式和图片会指向错误位置。
区分源码和构建产物
当时使用两个分支：
| 分支 | 内容 |
|---|---|
master | VuePress 源码 |
gh-pages | npm run docs:build 生成的静态文件 |
部署脚本或 GitHub Actions 构建站点后，将输出目录推送到 gh-pages。
开启 Pages
打开仓库的 Settings -> Pages，在 Build and deployment 中选择 gh-pages 分支并保存。
配置完成后，先确认默认地址能够访问：
https://Map1eBr1dge.github.io/默认域名可用后再绑定自定义域名，排错会简单很多。
在 GitHub Pages 中绑定域名
注册 feng-qiao.top
域名通过腾讯云注册。购买 .top 域名前需要完成实名认证。注册完成后先不用在腾讯云添加解析记录，因为后面会把整个 DNS 区域交给 Cloudflare 托管。
设置 Custom domain
回到 GitHub 仓库的 Settings -> Pages，在 Custom domain 中填写：
feng-qiao.top
使用分支作为发布源时，保存自定义域名会在发布分支中生成或更新 CNAME 文件。文件内容应为：
feng-qiao.top此时 DNS 检查可能暂时失败，因为域名还没有指向 GitHub Pages。
把 DNS 托管交给 Cloudflare
添加站点
打开 Cloudflare 注册页面，登录后添加 feng-qiao.top。
个人博客使用免费计划即可。
添加 GitHub Pages 解析记录
在 Cloudflare 的 DNS 页面添加根域名和 www 记录。
当时使用的 IPv4 配置如下：
| 类型 | 名称 | 内容 |
|---|---|---|
A | @ | 185.199.108.153 |
A | @ | 185.199.109.153 |
A | @ | 185.199.110.153 |
A | @ | 185.199.111.153 |
CNAME | www | Map1eBr1dge.github.io |
根域名也可以添加 GitHub Pages 提供的 AAAA 记录，以支持 IPv6。记录值应以 GitHub Pages 自定义域名文档 为准，不要使用 ping 某次返回的单个 IP。
区分 DNS 托管与流量代理
DNS 托管与代理
Cloudflare 在这里有两层作用：
- 修改 Nameserver 后，Cloudflare 成为
feng-qiao.top的权威 DNS 服务商，负责回答域名解析请求。 - A、AAAA 或 CNAME 记录开启代理后，浏览器的 HTTP/HTTPS 流量才会经过 Cloudflare，用到 CDN、缓存和安全规则。
DNS 记录显示为灰色云朵时，只进行解析；显示为橙色云朵时，Web 流量会经过 Cloudflare。配置或排查证书期间，可以根据实际情况切换代理状态。
在腾讯云修改 Nameserver
Cloudflare 会为站点分配两条 Nameserver。
进入腾讯云域名管理页，找到 DNS 服务器设置：
把原来的 DNS 服务器替换为 Cloudflare 给出的两条地址：
保存后需要等待注册局和递归 DNS 缓存更新。Cloudflare 控制台确认站点已激活，说明 Nameserver 切换已经完成。
配置 HTTPS
这套链路中有两段 HTTPS：
浏览器 <-> Cloudflare <-> GitHub PagesGitHub Pages 需要为 feng-qiao.top 签发证书；开启 Cloudflare 代理后，Cloudflare 也会向浏览器提供证书。证书尚未就绪时，GitHub Pages 的 Enforce HTTPS 选项可能暂时不可用。
当两端证书状态正常后，可以在 GitHub Pages 开启 Enforce HTTPS，并在 Cloudflare 中按需要启用：
- HTTP 自动跳转 HTTPS。
- 自动 HTTPS 重写。
- 适合当前源站证书状态的 SSL/TLS 加密模式。
证书签发期间
不要在证书仍处于签发状态时反复删除域名或 DNS 记录。先等待一段时间，再检查 GitHub Pages 和 Cloudflare 的状态提示。
检查解析和访问
Windows 下可以用 nslookup 查看解析结果：
nslookup feng-qiao.top
nslookup www.feng-qiao.top然后分别访问：
https://feng-qiao.top/
https://www.feng-qiao.top/检查以下内容：
- 根域名能打开博客。
www能访问或跳转到设定的主域名。- 地址栏显示 HTTPS。
- 页面中的脚本、样式和图片没有 404。
- GitHub Pages 的 Custom domain 检查通过。
- Cloudflare 控制台显示站点已激活。
如果页面能打开但静态资源丢失，先检查 VuePress base。域名无法解析时检查 A、CNAME 和 Nameserver；证书错误则分别查看 GitHub Pages 与 Cloudflare 的证书状态，不要把三个问题混在一起排查。