将 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~

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

初始化项目#

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

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

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

修改配置#

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

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

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

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

account_id = ""
workers_dev = true
route = "www.nekomio.com/*"
zone_id = ""

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

部署#

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

可以通过 preview 进行预览。

wrangler preview --watch

通过 publish 进行部署

wrangler publish

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

4. 自定义 Router#

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

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

addEventListener('fetch', event => {
  try {
    event.respondWith(handleEvent(event))
  } catch (e) {
    if (DEBUG) {
      return event.respondWith(
        new Response(e.message || e.toString(), {
          status: 500,
        }),
      )
    }
    event.respondWith(new Response('Internal Error', { status: 500 }))
  }
})

async function handleEvent(event) {
  const { origin, pathname: path, search } = new URL(event.request.url);
  if (path.endsWith('/index.html')) {
    return new Response(null, {
      status: 301,
        headers: {
          'Location': `${origin}${path.substring(0, path.length - 10)}${search}`,
          'Cache-Control': 'max-age=3600'
        }
    });
  }
  if (path === '/atom.xml') {
    return getAssetFromKV(event, {
      cacheControl: {
        edgeTtl: 60 * 60,
        browserTtl: 2 * 60 * 60
      }
    });
  }
  
  if (path.startsWith('/css/'))  {
    const response = await getAssetFromKV(event, {
      cacheControl: {
        edgeTtl: 365 * 24 * 60 * 60,
        browserTtl: 365 * 24 * 60 * 60
      }
    });
    // getAssetFromKV 不会添加 immutable，所以需要手动覆盖掉 Cache-Control
    response.headers.set('cache-control', `public, max-age=${365 * 24 * 60 * 60}, immutable`);
    return response;
  }
  
  const response = await getAssetFromKV(event, {
    cacheControl: {
      edgeTtl: 60 * 60,
      browserTtl: 5 * 60
    }
  });
  
  response.headers.set('X-XSS-Protection', '1; mode=block');
  return response;
}

最后，就结束了～～

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

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