Github Pages 绑定自定义域名

Posted on

使用 GitHub Pages 部署网站后，想要将页面绑定到自定义域名，摸索了一下，下面是步骤及踩坑的点。

DNS 配置

顶级域名

在云服务厂商的 DNS 配置下，创建 IPV4 即 A 的解析记录，指向 GitHub Pages 的 IP 地址，这个地址是不会变化的。

我这里只用了 IPV4，所以只配置了A，如果你需要 IPV6，最好同时配置 A 和 AAAA，因为 IPv6 的全局采用速度缓慢。

IPV4

要创建 A 记录，请将顶点域指向 GitHub Pages 的 IP 地址。

1
2
3
4
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
IPV6

要创建 AAAA 记录，请将顶点域指向 GitHub Pages 的 IP 地址。

1
2
3
4
2606:50c0:8000::153
2606:50c0:8001::153
2606:50c0:8002::153
2606:50c0:8003::153
创建结果

下图中四个@代表裸域名，即 https://trillobe.com

image-20250419002842505
问题

Q：为什么在 trillobe.com 上，把官方四个 IP 都配置上呢？

A：如果只写一条  A  记录，那么一旦对应那台服务器出现故障，用户就无法访问网站；写全四条，就可以充分利用 GitHub 全球 Anycast 网络，既提速又抗掉线。

子域名

如果有多个网站，希望给子域名，如www.example.com、blog.example.com，需要创建将子域名指向 <user>.github.io 的 CNAME记录。

image-20250419003410541
对应关系

CNAME类型的三个域名分别是我的博客，两个网站，github page 网址与自定义域名对应关系如下：

https://<user>.github.io => https://blog.trillobe.com

https://<user>.github.io/natours => https://natours.trillobe.com

https://<user>.github.io/trillo => https://trillo.trillobe.com

Github Page 配置

在仓库的Setting->Pages里，在 Custom domain 里输入 DNS 配置好的域名，点击 Save，GitHub 会自动进行 DNS 校验，这个过程需要一点时间。

当校验通过以后，就可以勾选下面的强制开启 HTTPS，没错，是不需要申请 SSL 证书的，GitHub 会自动帮申请（虽然是免费的 Let’s Encrtpy）。

image-20250419004107143

再过一会儿，刷新一下，就可以看到个人站点部署完成了，可以进行访问。

注：如果你有多个子域名需要对应到不同的仓库，需要配置多次，重复上述步骤即可

取消 Github Pages 绑定自定义域名

这里是踩坑的地方，花了很多时间 debug，呜呜记录一下

Github Page 类型

查看Setting -> Pages -> Source，会出现两种类型：Github Action 和 Deploy from a branch

image-20250419012928314

如果是 Deploy from a branch，在删除Custom domain 中的域名后，还需要删除Code根目录下的CNAME文件，具体详见 google。

我的是Github Action，没有CNAME。

image-20250419013642144

取消绑定

在仓库的Setting->Pages里，点击移除 Custom domain 中的域名，同时取消勾选 Enforce HTTPS，刷新后，可能会出现以下几种情况（我遇到过的）：

例一

Github Page 现在指向 https://<user>.github.io/natours，但是点击跳转还是在自定义域名https://natours.trillobe.com，且Enforce HTTPS 为灰色，无法取消勾选

我尝试的办法：

  1. 等待一段时间，DNS 配置生效需要一些时间

  2. 清空浏览器缓存

  3. Re-run Github Action 中的 workflow

  4. 重新输入一个不存在的 custom domain，然后在解析时 remove 掉，清空浏览器缓存并刷新

例二

Github Page 正常指向https://<user>.github.io/natours，点击打开静态文件加载失败

解决：Re-run Github Action 中的 workflow，清空浏览器缓存再打开就正常了

image-20250419010844981

遇到的问题

  1. trillo 改域名后，页面无法 fetch API 数据

    image-20250419015200667

    解决：在后端代码 CORS 处加入新增的自定义域名，重跑后端代码，并 CICD 生成新 docker 在 EC2 上运行

    image-20250419015302248

  2. 重跑后端代码后还是无法 fetch

    image-20250419014223386

    解决：ssh 到服务器查看运行的 docker container 是哪一个版本，确认无法 fetch 的原因是没有生效最新版本，修改 compose.yaml 让最新版本生效后，网页正常显示

    1
    2
    sudo docker ps -a
    sudo docker image

  3. natours 改域名后，页面静态文件无法加载

    解决：修改 next.config.js 文件时，nextConfig 导入代码有误，修改后重新编译静态文件加载正常