使用 Cloudflare Workers 部署一个 Hexo

本文基于 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
选择“编辑 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 强大,但是限制也更多)