将 Hexo 部署到 Cloudflare Workers

0. 起因#

最近得知 Cloudflare Workers KV 有免费额度了，看起来可以搞一些有意思的东西，因为我自己 Blog 服务器在国内，所以想要通过分流的方法使国外直接访问 Cloudflare 以获得更好的体验。

1. 准备工作#

想要把 Hexo Blog 部署到 Cloudflare Workers，当然要有一个 Hexo 的 Blog 了。同时也需要一个 Cloudflare 的账号~

2. 申请一个API key#

3. 本地安装 Wrangler CLI 进行首次部署#

安装 wrangler#

既然有 Hexo，那必然会有 Nodejs 环境，那么，通过 npm 或者 yarn 安装 wrangler~

1
npm i @cloudflare/wrangler -g
2
# yarn global add @cloudflare/wrangler

初始化项目#

进入你的 Hexo 根目录进行初始化

1
wrangler init --site my-static-site # 最后的名字可以改成自己喜欢的名字~

初始化之后，大概就可以看见目录中多出来的wrangler.toml文件和workers-site目录了。

修改配置#

我们需要修改 wrangler.toml 来配置一下我们的项目

1
[site]
2
bucket = "./public"
3
entry-point = "workers-site"

最重要的是这两行，我们需要修改 bucket 的值为我们需要部署的目录，对于 Hexo 就是 ./public。

同时还需要修改上面的个人信息

1
account_id = ""
2
workers_dev = true
3
route = "www.nekomio.com/*"
4
zone_id = ""

account_id 大概登录就能看见，如果你没有绑定自己的域名可以暂时不管 route 和 zone_id

部署#

这时候需要运行 wrangler config, 并输入之前我们得到的 API Token。

可以通过 preview 进行预览。

1
wrangler preview --watch

通过 publish 进行部署

1
wrangler publish

这时，我们以及可以打开Cloudflare上我们的网站了。

4. 自定义 Router#

我这里使用了 Sukka 给出的一个配置文件，主要是将以 index.html 结尾的请求 301 跳转到不包含 index.html 的 URL，加长了 css 的 cache 时间。这里也放出来进行参考

1
import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler'
2

3
addEventListener('fetch', event => {
4
  try {
5
    event.respondWith(handleEvent(event))
6
  } catch (e) {
7
    if (DEBUG) {
8
      return event.respondWith(
9
        new Response(e.message || e.toString(), {
10
          status: 500,
11
        }),
12
      )
13
    }
14
    event.respondWith(new Response('Internal Error', { status: 500 }))
15
  }
16
})
17

18
async function handleEvent(event) {
19
  const { origin, pathname: path, search } = new URL(event.request.url);
20
  if (path.endsWith('/index.html')) {
21
    return new Response(null, {
22
      status: 301,
23
        headers: {
24
          'Location': `${origin}${path.substring(0, path.length - 10)}${search}`,
25
          'Cache-Control': 'max-age=3600'
26
        }
27
    });
28
  }
29
  if (path === '/atom.xml') {
30
    return getAssetFromKV(event, {
31
      cacheControl: {
32
        edgeTtl: 60 * 60,
33
        browserTtl: 2 * 60 * 60
34
      }
35
    });
36
  }
37

38
  if (path.startsWith('/css/'))  {
39
    const response = await getAssetFromKV(event, {
40
      cacheControl: {
41
        edgeTtl: 365 * 24 * 60 * 60,
42
        browserTtl: 365 * 24 * 60 * 60
43
      }
44
    });
45
    // getAssetFromKV 不会添加 immutable，所以需要手动覆盖掉 Cache-Control
46
    response.headers.set('cache-control', `public, max-age=${365 * 24 * 60 * 60}, immutable`);
47
    return response;
48
  }
49

50
  const response = await getAssetFromKV(event, {
51
    cacheControl: {
52
      edgeTtl: 60 * 60,
53
      browserTtl: 5 * 60
54
    }
55
  });
56

57
  response.headers.set('X-XSS-Protection', '1; mode=block');
58
  return response;
59
}

最后，就结束了~~

这个是官方给出的免费的限制，流量不大的话还是够用的。如果文章数量比较多的话，大概每天部署的次数比较有限。

Workers 功能
- 包括 100,000 个请求/天 (UTC+0)
- 每个请求最多占用 10 毫秒 CPU 时间
- 第一个请求后的延迟最低
键值存储功能
- 每天 100,000 次读取操作
- 每天 1,000 次写入、删除、列出操作