使用 Cloudflare Workers 部署一个 Hexo

利用Cloudflare，加速你的Hexo站吧～（当然其它静态站点也是支持的）

草方块

Aug 9, 2021

阅读本文需要 12 分钟

本文基于 Sukka’s Blog 的《将 Hexo 部署到 Cloudflare Workers Site 上的趟坑记录》，图片来源网络，如有侵权请联系。

本文在其基础上做了一些更新，~~使之能够适应1202年的情况~~（

Cloudflare Workers KV 的Pricing一变再变，现在终于开放免费使用辣！不过话说去年似乎KV仍需要5$/月的付费，#我火星了

现在啥情况

虽说只有1GB存储，每天只有100000次读取，不过对于一个静态站点来说，足矣。

所以借此机会就把部署的Hexo（本站）也部署到了Cloudflare Workers一份，打开速度嘛…~~由于咱挂着梯子所以感受不到差别~~

所以话不多说，我们开始吧。

准备

一台 amd64 (x86_64) 的机器（其它架构的貌似不支持 Wrangler ，已知aarch64架构不行，~~所以用Termux不能弄（哭~~）
一个Cloudflare账号
一个GitHub账号（自动部署时需要）
基本的命令行&Git知识

开始

我们假设你已经有一个本地 Node 环境&一个站点项目了（如果没有，可以参看官方文档创建一个Hexo项目）

安装 Wrangler：

$ npm i @cloudflare/wrangler -g

（小声：也可以使用 yarn : ` $ yarn global add @cloudflare/wrangler `）

创建 API token

在使用之前，先申请一个 API token

创建 Token

选择“编辑 Cloudflare Workers”模板继续。

去除不必要的权限

将“账户设置”和“用户详细信息”权限删除，部署 Workers Sites 不需要这两个权限，其余配置按照偏好选择（删除两个权限后后不要动权限！）

将生成的 Token 保留在一个安全的地方备用。

初始化项目

在站点项目（比如 Hexo）的根目录下执行：

$ wrangler init --site [your-site-name]

Wrangler CLI 会使用 Cloudflare Workers Site 的模板在项目里新生成一个 workers-site 目录和一个 wrangler.toml 文件

使用编辑器（比如 vim ）打开 wrangler.toml 文件。

将site一行的 bucket 项改为 ./public：

site = {bucket = "./public",entry-point = "workers-site"}

在任意位置创建新行

account_id = '[your_id]'

其中[your_id]是你的 Cloudflare 账户id，可以在你域名页面的 “概述” 翻找到

域名的额外配置

如果你有域名，那么可以查阅官方文档将其转移到 Cloudflare，再将区域id 填入：

zone_id = '[zone_id]'

并且配置路由：

route = 'domain.com/*'

如不需要cf提供的 workers.dev 子域名，将 workers_dev 的值改为 false 即可。

以下是一个完整的wrangler.toml示例供参考：

name = "grassblog"
type = "webpack"                                                                        
route = 'lab.imgb.space/*'
zone_id = '435b1d6334df91cfac2fdc0581e45e0f'
account_id = 'b45fa9889b43a142f63e2b4ca1509588'
usage_model = ''
compatibility_flags = []
workers_dev = false
site = {bucket = "./public",entry-point = "workers-site"}

部分涉及隐私的部分已经进行替换。

配置保存后，运行 ` wrangler config ` 按照提示输入刚刚获取到的 Api Token 即可。

预览和发布

运行下述命令可对 Workers Site 进行预览：

$ wrangler preview --watch

这会将 bucket 中的文件上传到 Workers KV 中，浏览器会自动打开一个窗口进行预览（如果没有…手动打开提供的链接吧）

若预览正常工作，运行下述命令即可将它发布到 Workers Site：

$ wrangler publish

使用自定义子域名时，还需要为上述的route添加一条值为 100:: 的 AAAA 记录。参见：Cloudflare Workers Docs

使用 GitHub Actions

嗯…听起来既繁琐又简单，配置完成后之后再部署时只需要 ` hexo g ` 之后再 ` wrangler publish ` 即可。但是像我一样的大鸽子（？）不愿每次更改后都要执行这两个命令（突然麻烦了QAQ）

不过 GitHub Actions 就可以简化这一流程，一次编写配置文件，之后只需要将博客源码推送到GitHub，就可以自动构建了，方便了许多～

（据说隔壁 Bitbucket 也有一个类似的自动化 “pipelines”，有时间试试，咕）

尝试自动构建静态文件

既然 Hexo 是一个依赖 Node 的程序…那我们就可以按照这个来写配置文件。

在站点目录新建 ` .github/workflows ` 文件夹，并创建一个任意名字的YAML文件（.yml/.yaml），填写以下内容：

name: My Hexo Blog # 名字随意
on:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version:
          - 12.x
    steps:
      - name: Checkout
      uses: actions/checkout@v2
      with:
        # 令 GitHub 在 git clone 和 git checkout 后「忘记」使用的 credentials。
        # 如果之后需要以另外的身份（如你的 GitHub Bot）执行 git push 操作时（如部署到 GitHub Pages），必须设置为 false。
        persist-credentials: false
    - name: Use Node.js $
      uses: actions/setup-node@v1
      with:
        node-version: $
    # 缓存 node_modules，缓存机制参见 GitHub 文档：https://help.github.com/en/actions/configuring-and-managing-workflows/caching-dependencies-to-speed-up-workflows
    - name: Cache node_modules
      uses: actions/cache@v1 # 使用 GitHub 官方的缓存 Action。
      env:
        cache-name: hexo-node-modules
      with:
        path: node_modules
        key: $-$-$ # 使用 package-lock.json 的 Hash 作为缓存的 key。也可以使用 package.json 代替
    # Wrangler 在构建时会在 workers-site 目录下执行 npm i，因此也要缓存这里的 node_modules
    - name: Cache workers-site/node_modules
      uses: actions/cache@v1
      env:
        cache-name: workers-site-node-modules
      with:
        path: workers-site/node_modules
        key: $-$-$
    - run: npm i # 执行 Hexo 的依赖安装
    # 完成 npm i 后，hexo 已经被链接到 node_modules 下的 bin 目录、并被注册在 Node.js 的 $PATH 中
    # Hexo 博客的 package.json 中默认注册了这些 script：clean/build/deploy/server
    # 因此，在目录下执行 npm run build 等同于执行 hexo g，但是不需要全局安装 hexo-cli
    - run: npm run build

将配置文件推到 GitHub 上，如果自动触发开始构建，且没有错误，那么再添加部署到 Workers Site 的 Actions。

Publish 到 Workers Site

利用 Cloudflare 推出的 Wrangler 的 GitHub Action 通过引入 wrangler-action 可以直接执行 wrangler publish。

先在 GitHub 仓库的 Secret 设置（ Settings > Secrets ）添加一个CF_WORKERS_TOKEN的变量，内容为刚刚获取到的Token。

然后再在Actions的配置文件的末尾添加以下内容：

- name: Deploy to Cloudflare Workers
  uses: cloudflare/wrangler-action@1.1.0
  with:
    apiToken: $ # 前一步设置的 Secrets 的名称
    # Wrangler Action 也支持使用传统的 Global API Token + Email 的鉴权方式，但不推荐

总结

好了，恭喜你，你成功在 Workers Site 部署了一个 Hexo 博客！

使用 Workers 后，节省了网站回源的时间，应该会让网站加载更快吧，嗯？

不过也有点小问题，比如对 Pretty Urls 的支持不好，对中文路径的不适配，等等。

这个嘛…中文路径已经有了解决方案，可以搜索…但是”Pretty Urls”至今无解…

据说 Cloudflare 还有一个 Cloudflare Pages ，也可以试试（好像功能比 Workers 强大，但是限制也更多）