一、GitHub 仓库设置（分支模式）

1. 打开仓库 xuwbk/web_tool
2. Settings → Pages
3. Build and deployment：
   • Source：Deploy from a branch
   • Branch：选你实际放网页的分支（一般是 main 或 master）
   • Folder：/ (root)（如果你文件在根目录）或 /docs（如果你放 docs 里）
4. Save

先别管域名，等默认地址 https://xuwbk.github.io/web_tool/ 能打开再说

二、DNS 解析（域名后台操作）

去你 xuwbk.com 的 DNS 服务商（阿里云/腾讯云/Cloudflare 等）：

只绑子域名 tools.xuwbk.com（推荐）

加一条记录：

注意：

• 记录值不要带​ /web_tool
• 不要指向 xuwbk.github.io/web_tool/

三、在 GitHub 填自定义域名（关键）

1. 同页面 Settings → Pages
2. Custom domain 填：

   tools.xuwbk.com

    

3. 1. 点 Save

   此时 GitHub 会自动在发布分支根目录生成一个 CNAME 文件，内容就是：

   tools.xuwbk.com

   你可以 git pull 下来看看，文件确实在根目录。

四、本地开发/推送的坑（很重要）

因为你现在是“分支直发”，以后你 git push 会直接覆盖发布分支。

情况 A：你直接推网页文件（纯静态）

• 保证本地仓库根目录留着 CNAME 文件
• 别在 .gitignore 里忽略它
• 每次改完代码：

  git add .
  git commit -m "update"
  git push origin main

   

情况 B：你有构建步骤（本地 build 后推）

比如本地生成 dist/ 再推：

要把 CNAME 文件放到构建输出目录里，否则下次部署就没了。

例：

• Vite 项目：放 public/CNAME → 构建后自动进 dist/CNAME
• 纯手写站：根目录直接建 CNAME

CNAME 文件内容只有一行：

tools.xuwbk.com

没有后缀，全大写，不带 https，不带斜杠

五、等 DNS 生效 + 开 HTTPS

1. 1. 1. 终端检查：

         dig tools.xuwbk.com +short

          

   看到指向 xuwbk.github.io 或 GitHub IP 就行
   回 GitHub Settings → Pages
   看到 DNS check successful（绿色）
   勾选 Enforce HTTPS
   证书几分钟到几小时自动签发

六、解决“项目页小尾巴”导致样式 404

你现在是项目页，实际路径是：

tools.xuwbk.com/   （GitHub 会映射到 /web_tool/）

如果页面里写死：

<link href="/style.css">
<script src="/app.js"></script>

在 github.io/web_tool 下会 404。

改法（二选一）

1. 用相对路径：
   html

   <link href="./style.css">
   <script src="./app.js"></script>

2. 或页面头部加 base（适合多页）：
   html

   <base href="/web_tool/">

纯静态导航站，建议直接用 ./xxx 相对路径最稳。

七、验证清单

• [ ] tools.xuwbk.com 能打开首页
• [ ] 样式/JS/图标都正常加载
• [ ] 地址栏有 HTTPS 小锁
• [ ] 原 xuwbk.github.io/web_tool 自动跳到自定义域名
• [ ] 改代码 push 后，域名不丢（CNAME 还在）

八、常见翻车点

• CNAME 文件被构建覆盖​ → 把 CNAME 放进源码/构建输出目录
• DNS 用了 A 记录指向旧 IP​ → 子域名只用 CNAME 到 xuwbk.github.io
• Cloudflare 开了橙代理导致证书异常​ → 先关成 DNS Only，HTTPS 通了再开
• Enforce HTTPS 是灰的​ → DNS 没完全生效，等半小时再刷新