自定义域名之8-costom domain的详细操作步骤

问题11：在我的本项目的《操作说明文档》中，它的具体操作建议如下：

第十三步：自定义域名（可选）

（13.1）配置 DNS

在你的域名服务商添加 CNAME 记录：
- 主机记录：blog 或 @
- 记录值：你的用户名.github.io

（13.2）仓库配置

仓库 Settings → Pages
Custom domain 填写你的域名（如 blog.yourdomain.com）
勾选 Enforce HTTPS
等待 DNS 验证（可能需要几分钟到几小时）

我觉得它的这个操作建议比较模糊和笼统，我刚才在hostinger.com注册好了一个新域名envjs.fun，根据方式A（新增工作流）的思路，请详细展开讲讲为当前项目自定义域名的操作步骤。

好的，基于方式A（新增工作流）的思路，我来为你详细展开使用 envjs.fun 域名配置自定义域名的完整操作步骤。

第一步：DNS 配置（在 Hostinger 后台操作）

1.1 登录 Hostinger 域名管理后台

访问 hostinger.com，登录你的账号，进入域名管理页面。

1.2 添加 DNS 记录

你需要添加以下记录：

记录类型	主机记录	记录值	TTL
A	`@`	`185.199.108.153`	默认
A	`@`	`185.199.109.153`	默认
A	`@`	`185.199.110.153`	默认
A	`@`	`185.199.111.153`	默认
CNAME	`www`	`stuffren.github.io`	默认

说明：

使用 4 个 A 记录指向 GitHub Pages 的 IP 地址（推荐方式，更稳定）

或者使用 CNAME 记录指向 stuffren.github.io（如果你的域名服务商支持）

@ 表示根域名（envjs.fun）

www 表示子域名（www.envjs.fun）

1.3 保存并等待生效

DNS 记录生效通常需要 几分钟到 48 小时。你可以通过以下命令检查：

nslookup envjs.fun

第二步：创建新的 CI 工作流文件

2.1 在本地项目目录创建文件

文件路径：e:\js_web\js_spa_router_blog\chunking-blog\.github\workflows\deploy-custom-domain.yml

文件内容：

上方已有yaml代码

2.2 关键差异说明

与 deploy.yml 相比，这个文件删除了：

# 删除这一行
BASE_PATH: /chunking-blog/

这样构建产物将使用根路径 /，适合自定义域名访问。

第三步：创建并推送 `custom-domain` 分支

3.1 在本地创建分支

打开终端，进入项目目录：

cd e:\js_web\js_spa_router_blog\chunking-blog
git checkout -b custom-domain

checkout 切换分支的命令
-b 参数，表示创建新分支并立即切换过去（-b = branch）

3.2 提交并推送新工作流文件

git add .github/workflows/deploy-custom-domain.yml
git commit -m "新增自定义域名部署工作流"
git push origin custom-domain

第四步：GitHub 仓库配置自定义域名

4.1 进入仓库设置

打开浏览器，访问 https://github.com/stuffren/chunking-blog
点击顶部菜单 Settings
左侧菜单选择 Pages

4.2 配置自定义域名

设置项	填写内容
Source	Deploy from a branch → `gh-pages` / `root`（保持默认）
Custom domain	`envjs.fun`（或 `www.envjs.fun`）
Enforce HTTPS	✅ 勾选

4.3 保存并等待验证

点击 Save 后，GitHub 会开始 DNS 验证。这个过程可能需要 几分钟到 24 小时。

验证成功后，你的自定义域名就配置完成了。

第五步：验证部署结果

5.1 检查工作流运行状态

进入仓库主页
点击顶部 Actions 标签
查看 Build and Deploy to Custom Domain 工作流是否成功运行

5.2 访问测试

地址	预期结果
`https://envjs.fun`	显示你的博客首页
`https://envjs.fun/posts/1`	显示文章详情
`https://stuffren.github.io/chunking-blog/`	仍然可用（GitHub Pages 原地址）

第六步：后续内容更新流程

当你需要发布新文章或更新博客时：

6.1 日常更新（推送到 main 分支）

git checkout main
# ... 修改代码 ...
git add .
git commit -m "发布新文章"
git push origin main

这会触发 deploy.yml，更新 GitHub Pages 版本。

6.2 同步到自定义域名版本

git checkout custom-domain
git merge main
git push origin custom-domain

这会触发 deploy-custom-domain.yml，更新自定义域名版本。

完整流程图

┌─────────────────┐     ┌─────────────────┐
│   本地开发修改    │────▶│  推送到 main    │
└─────────────────┘     └─────────────────┘
                                │
                                ▼
                       ┌─────────────────┐
                       │ deploy.yml 触发 │
                       │ BASE_PATH=/chunking-blog/
                       └─────────────────┘
                                │
                                ▼
                       ┌─────────────────┐
                       │ stuffren.github.io │
                       │ /chunking-blog/  │
                       └─────────────────┘
                                │
                                ▼
                       ┌─────────────────┐
                       │ 合并到 custom-domain │
                       └─────────────────┘
                                │
                                ▼
                       ┌─────────────────┐
                       │ deploy-custom-domain.yml │
                       │ 不设置 BASE_PATH │
                       └─────────────────┘
                                │
                                ▼
                       ┌─────────────────┐
                       │   envjs.fun     │
                       └─────────────────┘

常见问题排查

问题	解决方案
DNS 验证失败	检查 Hostinger 的 A 记录是否正确，等待更长时间
工作流运行失败	检查 Secrets 配置是否正确（GH_OWNER, GH_REPO 等）
页面样式丢失	检查构建产物中的资源路径是否为根路径 `/`
HTTPS 证书错误	确保勾选了 "Enforce HTTPS"，等待证书颁发