本文基于 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:
1 | $ npm i @cloudflare/wrangler -g |
(小声:也可以使用 yarn : $ yarn global add @cloudflare/wrangler
)
创建 API token
在使用之前,先 申请一个 API token
选择“编辑 Cloudflare Workers”模板继续。
将“账户设置”和“用户详细信息”权限删除,部署 Workers Sites 不需要这两个权限,其余配置按照偏好选择
(删除两个权限后后不要动权限!)
将生成的 Token 保留在一个安全的地方备用。
初始化项目
在站点项目(比如 Hexo)的根目录下执行:
1 | $ wrangler init --site [your-site-name] |
Wrangler CLI 会使用 Cloudflare Workers Site 的模板在项目里新生成一个 workers-site
目录和一个 wrangler.toml
文件
使用编辑器(比如 vim )打开 wrangler.toml
文件。
将site一行的 bucket 项改为 ./public:
1 | site = {bucket = "./public",entry-point = "workers-site"} |
在任意位置创建新行
1 | account_id = '[your_id]' |
其中[your_id]是你的 Cloudflare 账户id,可以在你域名页面的 “概述” 翻找到
域名的额外配置
如果你有域名,那么可以查阅官方文档将其转移到 Cloudflare,再将区域id 填入:
1 | zone_id = '[zone_id]' |
并且配置路由:
1 | route = 'domain.com/*' |
如不需要cf提供的 workers.dev 子域名,将 workers_dev
的值改为 false
即可。
以下是一个完整的wrangler.toml
示例供参考:
Toml示例
1 | name = "grassblog" |
部分涉及隐私的部分已经进行替换。
配置保存后,运行 wrangler config
按照提示输入刚刚获取到的 Api Token 即可。
预览和发布
运行下述命令可对 Workers Site 进行预览:
1 | $ wrangler preview --watch |
这会将 bucket 中的文件上传到 Workers KV 中,浏览器会自动打开一个窗口进行预览(如果没有…手动打开提供的链接吧)
若预览正常工作,运行下述命令即可将它发布到 Workers Site:
1 | $ 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),填写以下内容:
1 | name: My Hexo Blog # 名字随意 |
将配置文件推到 GitHub 上,如果自动触发开始构建,且没有错误,那么再添加 部署到 Workers Site 的 Actions。
Publish 到 Workers Site
利用 Cloudflare 推出的 Wrangler 的 GitHub Action 通过引入 wrangler-action
可以直接执行 wrangler publish
。
先在 GitHub 仓库的 Secret 设置( Settings > Secrets )添加一个CF_WORKERS_TOKEN
的变量,内容为刚刚获取到的Token。
然后再在Actions的配置文件的末尾添加以下内容:
1 | - name: Deploy to Cloudflare Workers |
总结
好了,恭喜你,你成功在 Workers Site 部署了一个 Hexo 博客!
使用 Workers 后,节省了网站回源的时间,应该会让网站加载更快吧,嗯?
不过也有点小问题,比如对 Pretty Urls 的支持不好,对中文路径的不适配,等等。
这个嘛…中文路径已经有了解决方案,可以搜索…但是”Pretty Urls”至今无解…
所以至今这个网站还是在 Vercel 上部署
据说 Cloudflare 还有一个 Cloudflare Pages ,也可以试试(好像功能比 Workers 强大,但是限制也更多)