VuePress 博客迁移 Cloudflare Pages 蓝绿部署

博客原托管在 GitHub Pages，通过 Cloudflare CDN 代理访问。本次迁移目标是将构建产物直接部署到 Cloudflare Pages，消除 GitHub Pages 中间层，获得更快的边缘分发和更好的缓存控制。采用蓝绿部署策略，先在 CF Pages 绿色环境验证通过，再切 DNS 到生产环境，确保零停机迁移。

项目信息

项目	值
博客 URL	https://blog.example.com
CF Pages 绿色环境	https://your-project.pages.dev
Workflow 文件	.github/workflows/deploy-cloudflare.yml

迁移步骤

1. 更新 GitHub Actions Workflow

修改 .github/workflows/deploy-cloudflare.yml，将 --project-name 改为 CF Pages 项目名。

2. 配置 GitHub Secrets

在仓库 Settings -> Secrets and variables -> Actions 中添加：

• CLOUDFLARE_API_TOKEN：在 Cloudflare Dashboard -> My Profile -> API Tokens 创建，使用 "Cloudflare Pages" 模板
• CLOUDFLARE_ACCOUNT_ID：Cloudflare 账户 ID

3. 创建 CF Pages 项目

在 Cloudflare Dashboard -> Workers & Pages -> Create -> Pages -> Connect to Git，关联 GitHub 仓库。

4. 提交并验证绿色环境

git add .github/workflows/deploy-cloudflare.yml
git commit -m "feat: deploy to Cloudflare Pages"
git push

GitHub Actions 会同时运行两个 workflow（GH Pages + CF Pages），CF Pages 部署成功后访问绿色环境 URL 验证。

5. DNS 切换（蓝绿切换）

验证绿色环境完全正常后，在 Cloudflare Dashboard -> DNS -> Records 中将博客域名的 CNAME 从 GitHub Pages 改为 CF Pages。

6. 保留双 workflow 并行运行

切换 DNS 后，保留两个 workflow 并行运行 1-2 周。确认 CF Pages 稳定后再禁用 GitHub Pages workflow，作为回滚安全网。

浏览器自动化测试结果（绿色环境）

测试项	结果	备注
首页加载	✅	文章卡片正常展示
英文站点	✅	英文标题正常
搜索功能	✅	slimsearch 正常返回结果
文章详情页	✅	H1/代码块/目录/图片均正常
404 处理	✅	自定义 404 页面正常
移动端适配	✅	375px 视口无水平溢出
控制台错误	✅	零错误零警告

CDN 缓存测试结果（生产环境）

资源类型	cf-cache-status	cache-control	备注
CSS (带 hash)	HIT	-	age 递增，边缘稳定缓存
JS (带 hash)	HIT	-	age 递增，边缘稳定缓存
文章 HTML	DYNAMIC	max-age=14400	每次回源，4 小时有效期
RSS	DYNAMIC	max-age=0	每次回源
Sitemap	DYNAMIC	max-age=0	每次回源
404 页面	BYPASS	-	直接回源

带 hash 的 CSS/JS 文件名随内容变化，CF 边缘缓存命中率极高。HTML 页面标记为 DYNAMIC，CF Pages edge function 到 origin 延迟极低（同机房），实际体验接近缓存命中。

回滚方案

如果 CF Pages 出现严重问题：

1. 在 Cloudflare Dashboard -> DNS 将博客 CNAME 改回 GitHub Pages
2. DNS 生效约 1-5 分钟（Cloudflare 代理下）
3. GitHub Pages workflow 一直在运行，回滚后立即可用

注意事项

• 两个 workflow 并行运行期间，每次 push 会触发两次部署，这是预期行为
• CF Pages 免费版限制：每月 500 次构建，每次 20 分钟超时，对博客完全够用