给博客换个入口:Cloudflare Pages 主站与 GitHub Pages 镜像

TL;DR

将博客的正式入口从 blog.wendaining.top 换成了 blog.wendain.ing,实际内容改由 Cloudflare Pages 托管。同时保留 wendaining.github.io,仅仅指向 GitHub Pages,使之继续作为一份可以直接访问的镜像,同时也是适应原来的工作流。

原来的工作流不变:文章等内容仍然放在 Blog-Source 分支。每次向这个分支提交,GitHub Actions 和 Cloudflare Pages 会分别构建并发布同一份 Hexo 博客。

为什么要迁移

最主要的原因是买了新域名一直没用(这个确实很cool啊x

之前博客完全托管在 GitHub Pages 上,域名 blog.wendaining.top 也直接指向 wendaining.github.io。GitHub 在部分网络环境下访问并不稳定。

所以这次没有放弃 GitHub Pages,而是增加 Cloudflare Pages 作为正式站点:日常访问默认落到 Cloudflare,GitHub Pages 则保留为备用镜像。

我之前写过的基于 GitHub Actions 部署 Hexo 博客的 workflow仍然继续工作。

迁移过程中做了什么

建立 Cloudflare Pages

Cloudflare Pages 直接连接同一个 GitHub 仓库,并监听 Blog-Source 分支。构建配置和 GitHub Actions 保持一致:

  • Node.js 22;
  • 执行 npm ci && npx hexo generate
  • 发布 public 目录。

这样一来,一次提交会触发两条彼此独立的流水线:GitHub Actions 把静态文件发布到 main,Cloudflare Pages 则自行构建并发布到 Cloudflare。

重新整理域名

现在的域名关系如下:

  • blog.wendain.ing:正式域名,由 Cloudflare Pages 提供内容;
  • blog.wendaining.top:永久重定向到新域名,文章路径和查询参数都会保留;
  • wendaining-blog.pages.dev:同样永久重定向到正式域名;
  • wendaining.github.io:保留为可直接访问的 GitHub Pages 镜像。

现在的架构

flowchart TD
    A["向 Blog-Source 提交文章或配置"]
    B["GitHub Actions 构建"]
    C["Cloudflare Pages 构建"]
    D["main 分支:生成后的静态文件"]
    E["wendaining.github.io<br/>GitHub Pages 镜像"]
    F["blog.wendain.ing<br/>Cloudflare Pages 正式站"]
    G["blog.wendaining.top"]
    H["wendaining-blog.pages.dev"]

    A --> B
    A --> C
    B --> D
    D --> E
    C --> F
    G -->|301| F
    H -->|301| F

产生的影响

日常访问统一到了 Cloudflare

从旧域名进入时,Cloudflare 会在边缘直接返回 301,然后浏览器访问 blog.wendain.ing。旧域名不再加载完整博客页面,也不会先绕到 GitHub Pages 再跳一次。

搜索引擎相关的站点 URL、Open Graph 和 RSS/Atom 元数据也已经改成新域名。

发布流程基本没有变化

写文章时仍然只需要修改 Blog-Source。区别只是以前一次提交只有 GitHub Actions 构建,现在 Cloudflare Pages 也会同时构建。两边是独立流水线,因此更新时可能有几十秒的先后差异;只要两次构建都成功,最终内容就是一致的。

最后

目前这个结构比较舒服:正常访问走 Cloudflare,GitHub Pages 不再承担主站流量,但仍然保留着一份随时可以访问和回退的静态博客。