Others

利用 Cloudflare Workers Site 部署静态博客

前言

作为一个 很少更新博客 热衷于折腾博客的小白玩家，博客的速度一直是我评估博客必不可少的一个方面。在曾经漫长的 Next 主题使用过程中，最能激发我兴趣的莫过于优化 Next 主题的样式和加载速度。

可对于当时把博客托管 GitHub Pages 的我来说，不可避免的是国内极其尴尬的加载速度。为此，我尝试过把博客迁移到其他静态网站托管平台如 Netlify，但国内访问速度比起 GitHub Pages 也好不了多少，甚至还会出现服务器响应时间慢等问题……寻找一个足够理想的静态托管平台对于我来说是一个非常漫长的过程，即使是加载速度最令我满意的 Vercel 也不可避免网站刷新和域名问题。 （关于静态托管平台我可能会专门写一篇文章总结各大平台优缺点，这些暂且后话）

为什么选择 Cloudflare

引用一句幽默且常被许多站长挂在口中的一句话：「网站的访问速度一直是与光速作斗争。」

当访客访问一个网站的时候，他可能要面临的是与千里之外的某一台服务器建立连接，然后数据跋山涉水横跨千里最后出现在他的浏览器。而这个时间太长了，长到绝大多数访客都不愿意为此等待。因此，为了提升建立连接的速度，有了 HTTP 的升级；为了提升静态数据分发速度，有了 CDN。而 Cloudflare Workers Site 则宣布在此基础上他们再实现了一个重要的突破——将整个站点部署在网络边缘。

Cloudflare 拥有遍布全球的网络节点，200+ 数据中心让它的速度在全球范围内都有极其优秀的表现。与单纯的 CDN 相比，Cloudflare Workers Site 并不是将已缓存的静态资源放在边缘网络，让浏览器笨拙地跳转再跳转然后获取可能的最近最快的静态资源，而是直接将整个网站部署到全球边缘网络，让访客直接访问网站获取数据。于是，在高速访问的基础上，Cloudflare Workers Site 进一步减少了回源时间，让整个站点在数据传输上接近完美。而 Cloudflare Workers Site 自带可编辑的 index.js 更是可以衍生不少实用和有趣的玩法。

在寻找理想的静态托管平台的过程中，Cloudflare Workers Site 无疑让我垂涎已久，只是 $5/Month 起步的订阅费用也让我这个脱贫路上的硬骨头望而却步，最终只能无奈转投他家。

但令我不敢想象的是，Cloudflare 于 2020 年 11 月 28 日正式宣布：Cloudflare Workers KV 向 Workers Free Plan 免费开放。

虽然我知道 Cloudflare 向来慷慨大方（从 Free Plan 的免费额度中就可见一斑了），但也实在没想到它会直接到将 Workers 的核心付费功能 Cloudflare Workers KV 直接免费开放。

不仅如此，Cloudflare 还特意把 Workers KV 的单个文件大小限制由 10MB 调整到了 25MB，这无疑更方便了网站静态资源的存放。而每天 Workers 10w 次免费调用次数我想对于绝大多数站长还是绰绰有余的。

全球边缘网络加速 + 慷慨大方的免费额度，既然找不到拒绝的理由，那么就勉为其难地接受吧~~

常规部署

准备 CLI 部署工具

开始部署前，我们要先安装 Cloudflare Workers 的 CLI 管理工具 Wrangler。

Wrangler 可以通过 npm 或 cargo 安装。

1
2
3

npm i @cloudflare/wrangler -g
# 你也可以使用 Yarn 安装 Wrangler
# yarn global add @cloudflare/wrangler

1

cargo install wrangler

{% note info simple %} 经过实测，Wrangler 可能无法安装在 ARM 架构的设备上。如果可以，尽量使用 x86 设备。 {% endnote %}

获取 API Token

如果你没有一个 Cloudflare 帐号，则需要先注册一个 Cloudflare 帐号，并绑定你的自定义域名。

使用 Wrangler 前需要先 申请一个 API Token。

在 API Token 申请界面选择「Edit Cloudflare Workers」模板。根据「所予权限最小化」的原则，建议删除默认权限模板中不需要的「Account」和「User」权限。

初始化项目

在博客源码的根目录输入如下命令进行初始化

1
2

# my-static-blog 是目录名称，你可以改成你喜欢的其他名字
wrangler init --site my-static-blog

Wrangler 会依照 Cloudflare Workers Site 的模板在项目里新生成 workers-site 目录（默认）和 wrangler.toml 配置文件。我们需要手动对配置文件进行一些简单的自定义编辑。

先使用文本编辑器打开 wrangler.toml 文件并依照你的需求进行修改

1
2
3
4
5
6
7

[site]
bucket = "./public" # 生成的 dist 路径，Hexo 和 Hugo 为 public，「.」的意思是当前目录
entry-point = "workers-site" # Cloudflare Workers Site 配置代码目录，默认 workers-site 目录
account_id = "" # Cloudflare Account ID，可在 Cloudflare 仪表盘或个人主页的网址处负责
workers_dev = false # 是否启用 workers.dev 子域名，推荐不启用
route = "blog.linioi.com/*" # Workers 路由配置，请指向你想绑定的自定义域名
zone_id = "" # 域名的 Zone ID，可在 Cloudflare 仪表盘查看

完成 wrangler.toml 的配置后，运行wrangler config命令并依照命令行提示输入上一步获取的 API Token。

预览与部署

配置完成后，我们可以先输入如下命令预览一下部署效果。

1

wrangler preview --watch

Wrangler 会上传配置文件中设定的bucket路径的文件至 Cloudflare Workers KV，浏览器会自动打开一个窗口预览。

确认无误后，输入如下命令进行部署

1

wrangler publish

配置域名 DNS 解析

上面的操作只是上传了博客文件，如果想要访客正常访问还需要进行「域名 DNS 解析」。

  • 如果你在前面修改配置文件时设置了「workers_dev=true」，则 Cloudflare 会自动分配给你一个三级域名，你可以在 DNS 解析设置处创建你的自定义域名的 CNAME 解析，指向 Cloudflare 分配的三级域名。
  • 如果你在前面修改配置文件时设置了「workers_dev=false」，则在 DNS 解析设置处创建你自定义域名的 A 解析，指向 IP 2.2.2.2。

大功告成！

如果一切正常，现在你可以输入你的自定义域名即可访问 你的博客。如果你想要实现更多的玩法，可以自己编辑 workers-site 下的 index.js。

使用 GitHub Action 实现持续集成

如果你从未接触过 GitHub Action 自动部署，建议你先看一下我写的另一篇文章 GitHub Action 实现 Hexo 博客持续集成。

与我写的另一篇文章略有不同，这里需要将文件推送到 Cloudflare Workers Site。我们可以 Cloudflare 官方 wrangler-action 轻松实现这一过程。

wrangler-action 的使用同样需要设置 API Token。你可以选择使用上面生成的 API Token，也可以再申请一个 API Token，模板和权限与上面相同。

然后再 GitHub 存放你博客源码的仓库添加 Secrets 变量 CF_WORKERS_TOKEN，内容为你申请的 API Token。

最后在 GitHub Action 配置文件末尾加上如下代码进行部署。（注意缩进）

1
2
3
4

      - name: Deploy to Cloudflare Workers
        uses: cloudflare/wrangler-action@1.3.0
        with:
                apiToken: ${{ secrets.CF_WORKERS_TOKEN }}

我的 GitHub Action 配置文件（仅供参考） 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

name: GitHub Auto Builder For Blog

on:
  push:
    branches:
      - master
#  schedule:
#    - cron: '0 21 * * *'

env:
  TZ: Asia/Shanghai

jobs:
  blog-cicd:
    name: Hexo build and deploy
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version:
          - 12.x
          
    steps:
      - name: Checkout codes
        uses: actions/checkout@v2

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}

      - name: Cache Node Dependencies
        id: cache
        uses: actions/cache@v1
        with:
          path: .npm
          key: ${{runner.OS}}-npm-caches-${{ hashFiles('package-lock.json') }}

      - name: Clone themes
        run: |
          git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly          

      - name: Install dependencies
        run: |
          npm install hexo-cli -g
          npm install          

      - name: Generate files and gulp
        run: |
          hexo clean && hexo generate && gulp          
      
      - name: Deploy to Cloudflare Workers
        uses: cloudflare/wrangler-action@1.3.0
        with:
                apiToken: ${{ secrets.CF_WORKERS_TOKEN }}
© 2020 - 2024 清絮的博客
使用 Hugo 构建
主题 Stack 由 Jimmy 设计