09. 全球加速：GitHub + Cloudflare Pages 博客自动化部署实战

在前面的章节中，我们打造了专属的 AI 开发机与跨网远程协同架构。本章记录如何将这一套基于 VitePress 打造的个人技术博客，通过 GitHub + Cloudflare Pages 实现全球 CDN 秒开与全自动发布。

---

一、为什么选择 Cloudflare Pages？

传统自建博客通常需要自己租用云主机、配置 Nginx、申请并定期续期 SSL 证书，遇到高并发或跨网访问时网络容易波动。

使用 GitHub + Cloudflare Pages 的核心优势：

• 全球 Anycast CDN：动静资源缓存在 Cloudflare 全球数百个边缘节点，国内和海外访问速度均有显著提升；
• 全自动 CI/CD：只需一条 git push 命令，云端自动拉取最新源码并完成构建，30 秒内发布生效；
• 原生支持私有仓库：即便你的 GitHub 仓库是 Private（私有），Cloudflare Pages 依然可以免费拉取并部署。这不仅能保护未公开发布的草稿与架构笔记，静态网页依然能公开提供服务；
• 终身免费：Cloudflare Pages 免费版每月提供高达 500 次构建额度，访问带宽和请求次数不限量，零运营成本。

---

二、关键概念避坑：Workers vs Pages 怎么选？

在刚接触 Cloudflare 时，很多开发者容易把 Cloudflare Workers 与 Cloudflare Pages 混淆，甚至踩入无法访问的坑：

维度	Cloudflare Workers	Cloudflare Pages
主要定位	Serverless 计算、函数计算、API 代理网关	静态网站托管（VitePress、Vue、React、Astro）
默认分配域名	*.workers.dev	*.pages.dev
国内直连访问	❌ 严重受限（域名已被运营商 DNS 污染）	⚠️ 部分可用（建议配合自定义域名使用）
构建方式	需手写 Worker 代码或复杂构建脚本	原生支持 Git 自动监听并执行 npm run build
博客适用度	不适合新手或纯静态博客	最佳实践，强烈推荐

血泪经验： 如果你发现部署完成后通过分配的 https://<name>.workers.dev 访问时一直报连接超时，这是因为 workers.dev 根域名在中国大陆大部分运营商网络中已被 DNS 污染重定向。托管静态博客请务必使用 Pages！

---

三、方式一：Cloudflare 网页控制台配置指南

如果你习惯在浏览器界面操作，只需按以下步骤一次性完成 Git 关联：

1. 授权 GitHub 仓库

1. 登录 Cloudflare Dashboard；
2. 在左侧菜单点击 Workers 和 Pages ➔ 点击 创建 (Create)；
3. 关键操作：顶部默认选中 Workers，请务必点击切换到「Pages」选项卡；
4. 点击 连接到 Git (Connect to Git)；
5. 在 GitHub 授权列表选中你的博客仓库（例如 tech-blog）。如果列表为空，点击下方的 管理 GitHub 应用程序权限 将该仓库打勾授权。

2. 填写构建参数（常见疑难点解答）

在「设置构建和部署」页面中，如果找不到名为 VitePress 的框架预设，完全不用纠结，选择 None（无） 即可。预设本质上只是自动填充输入框的模板，直接手动填写以下核心参数：

• 项目名称 (Project name)：tech-blog
• 生产分支 (Production branch)：main
• 构建命令 (Build command)：

  npm run docs:build

• 构建输出目录 (Build output directory)：

  docs/.vitepress/dist

  (注意：由于 VitePress 文档位于 docs/ 目录下，务必写全路径，不要只填默认的 dist)
• 环境变量 (Environment variables)： 展开底部的「环境变量」菜单，添加一行：
  • 变量名称：NODE_VERSION
  • 变量值：20（或 22，避免云端默认 Node 运行时版本过低引发编译异常）。

点击 保存并部署 (Save and Deploy)，等待约 30 秒至 1 分钟即可完成初次线上构建。

---

四、方式二：使用 Wrangler CLI 极客命令行全自动部署

如果你更喜欢在终端中快速搞定，Cloudflare 官方提供的 wrangler CLI 可以在 Linux/Mac/WSL 终端中全自动完成创建、构建与发布。

1. 终端设备快速授权

在终端执行设备授权命令（适合远程 SSH 或容器环境）：

npx wrangler login --device

控制台会输出一个带有验证码的官方授权链接，在任意浏览器中打开并点击 允许 (Approve)，终端即可在 5 秒内自动登录完成。

2. 一键创建 Pages 项目

npx wrangler pages project create tech-blog --production-branch main --force

3. 本地编译与直推边缘节点

# 1. 静态产物构建
npm run docs:build

# 2. 部署到 Cloudflare Pages
npx wrangler pages deploy docs/.vitepress/dist --project-name tech-blog --branch main

部署完成后，控制台将直接返回当前版本的永久访问 URL 和全局默认域名。

---

五、访问博客：默认域名与域名解析

部署完成后，Cloudflare Pages 会自动为该项目分配一个专属二级域名：

https://<project-name>.pages.dev

• 这个链接已经部署在全球 CDN，自带 HTTPS 证书；
• 没有自己的域名也可以直接使用它，可直接将此链接分享给朋友或作为日常查阅手册。

---

六、进阶扩展：绑定自有域名（可选）

提示：绑定自定义域名是完全可选的。如果你暂时没有购买域名，使用默认的 .pages.dev 已经足够日常使用。

如果你希望博客更有个人品牌辨识度（例如使用 blog.littleq.com.cn），且域名托管在第三方平台（如腾讯云 DNSPod 或 阿里云万网），可以按以下指引操作：

1. 在 Cloudflare Pages 发起域名绑定

1. 进入 Cloudflare 控制台 ➔ Workers 和 Pages ➔ 点击你的 tech-blog 项目；
2. 顶部切换到 自定义域 (Custom domains) ➔ 点击 设置自定义域；
3. 输入你的专属二级域名（例如 blog.littleq.com.cn）并点击继续；
4. 页面将提示你需要配置的目标地址（通常为你的项目专属地址，如 tech-blog-020.pages.dev）。

2. 在腾讯云 / 阿里云添加 CNAME 解析

登录你的域名解析控制台，给主域名添加一条解析记录：

配置项	填写内容	解释说明
主机记录	blog	即二级域名前缀
记录类型	CNAME	别名指向
线路类型	默认	保持默认即可
记录值	tech-blog-020.pages.dev	粘贴 Cloudflare Pages 页面提示的目标地址
TTL	600	默认 600 秒

保存后，腾讯云通常在 1 分钟内生效。Cloudflare 检测到 CNAME 记录后，会自动通过权威 CA 机构申请并配置免费的 SSL 证书。稍等 2~5 分钟刷新，状态变为绿色的 有效 (Active) 后，即可通过自定义域名全网 HTTPS 直连秒开。

---

七、日常极简写作发布流

完成了上述一次性配置后，以后的写作与更新变得极其优雅简单：

[本地撰写 Markdown]
       ↓
[npm run docs:build 校验]
       ↓
[git push origin main]
       ↓
[Cloudflare Pages 自动构建分发]
       ↓
[全球 CDN 30 秒内实时生效]

你无需关心任何服务器运维、证书续期或静态同步脚本，专注于技术输出与内容本身即可！