本站的博客系统最早使用 jekyll 工具构建，托管在 GitHub Pages 上。后来将 repo 变为 private，然后迁移到 GitLab Pages 上，再到这次迁移到 Cloudflare Pages，先后经历了三次调整。

迁移

如果 GitHub 上的 repo 是公开的，GitHub Pages 无疑是托管 jekyll 站点的最好选择。因为 GitHub Pages 与 repo 的集成度好，而且免费。如果不想升级 GitHub Pro 会员，就只能另寻他法。

GitLab Pages 凭借其简单易用的 CI/CD（pipeline ）系统一度成为 GitHub Pages 的最佳平替，随着 GitLab 公司对中国用户政策的收紧，让我再次动了迁移博客的冲动。在考虑博客的下一站时，主要考虑下面的两点要求：

  1. 容易与 GitHub 私有 repo 集成，可以使用 GitHub workflow；
  2. 免费托管

偶然的机会想到了”赛博菩萨” cloudflare 也有一个 pages 产品，经过调研之后发现其完全能够满足上面的需求。虽然其有一定的使用额度限制，但作为个人用户，完全够用。于是拾起雪藏多年的 cloudflare 账号，开始尝试博客的迁移，按照官方文档，执行下面的步骤：

  1. 创建 Cloudflare Pages 项目；
  2. 连接 GitHub repo，授权访问权限；
  3. 配置 Page Building 命令，开始构建；

这时遇到了 cloudflare 构建失败的问题，原因是之前使用的 jekyll 版本是 3.4.0，这是几年前的版本，在新的构建环境下很多依赖不再兼容（比如 jekyll-sass-converter）。我尝试在 Page Build 时定义 RUBY_VERSION=2.3 环境变量来使用老版本的 ruby 和 jekyll 来构建站点。在经过漫长的等待之后，cloudflare building 依然报告了失败。

之前 GitLab Pages 没有遇到构建失败问题是因为使用了如下的 ruby:2.3 作为基础镜像，jekyll 的安装和依赖关系都是使用老的构建方式。在 Cloudflare 中没找到如何配置这些环境，只能作罢。

# .gitlab-ci.yaml
image: ruby:2.3

variables:
  JEKYLL_ENV: production

before_script:
- bundle install

pages:
  stage: deploy
  script:
  - bundle exec jekyll build -d public
  artifacts:
    paths:
    - public
  only:
  - master

本来我也有升级 jekyll 版本和更换博客模板之意，值此之际正好一起完成了。在挑选了几个模板并查看其 commit history 之后，最终选择了 jekyll 官方维护的 jekyll/minima。原因无他，官方持续维护更新，设计也符合我的要求。

接下来就是将内容适配到新的 minima 模板中。查看 cloudflare building info 中的输出信息，了解到其使用的 ruby 版本，然后使用 docker 将 repo 映射到容器内部，一边编译一边修改，避免了通过云端调试的难题。使用到的命令如下：

$ docker run --rm -ti --net host -v $PWD:/blog -w /blog ruby:3.2.2 bash
> bundle install
> bundle exec jekyll serve --watch --host 0.0.0.0

在容器内部使用 jekyll serve 服务站点时，遇到了外部主机上使用 ip:4000 不能访问站点的问题。后来查看 stackoverflow 知道需要添加 --host 0.0.0.0 参数，不能使用容器内部的 127.0.0.1，哪怕 docker 的 network 使用的是 host 模式。

最终在删除了一些 { % include JB/* % } 代码和替换 _includes/_layouts/assets 目录之后，迁移便完成了。这比预想中的要简单，虽然还缺失一些功能，但作为博客已经是一个可用的版本。

微调

后面就是对样式作了几处简单的改动：

  • 为 <kbd> HTML 标签增加了一段样式:
// _sass/minima/custom-styles.scss
kbd {
  background-color: #eee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  color: #333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

  • 去掉 footer 中不用的标签，直接在 _includes/footer.html 中操作对应的模板即可。

  • 打开 _config.yml 中的摘录选项，本博客站点的样式就与 minima demo 站点的一致了：

minima:
  show_excerpts: true

效果

现在发布新的博文与之前的体验没有差别，只要在 GitHub 的 repo 中提交 markdown 的 post 文件，便会自动触发 Cloudflare Pages 的自动构建和自动部署，再次刷新博客域名时即能看到新的内容了。效果如下图所示：

总结

在经过一个下午的折腾之后，此次的博客迁移算是完成了。相较之前的站点，目前还缺失如下的功能：

  • 评论
  • Google Analytics 分析
  • Category

总体而言，使用 Cloudflare Pages 能够做到代码提交、自动构建静态站点和自动部署的无感体验。如果对博客站点域名没有要求，默认的免费 pages.dev 域名也比较容易记忆。当然也可以使用自己购买的域名，只要在 Cloudflare Pages 的配置页面作些设置即可，不再赘述。

经过这次对 Cloudflare Pages 产品的使用，开始慢慢理解了为什么大家亲切的称其为“赛博菩萨”，产品简单易用和对用户慷慨的免费额度着实解决了许多开发者的痛点。

Google Analytics & Disqus

updated: 2025-04-10

为站点添加 Google Analytics 和评论系统，只要在 _config.yml 中添加如下配置：

google_analytics: UA-XXXXXXXX-X
disqus:
  shortname: xxxxxxxx

然后在 Cloudflare 的 Worker&Pages/Settings/Variables and Secrets 中添加一个 Text 类型的变量 JEKYLL_ENV=production，重新构建即可。