將 Hexo 部署到 Cloudflare Workers

0. 起因#

最近得知 Cloudflare Workers KV 有免費額度了，看起來可以搞一些有意思的東西，因為我自己 Blog 伺服器在國內，所以想要通過分流的方法使國外直接訪問 Cloudflare 以獲得更好的體驗。

1. 準備工作#

想要把 Hexo Blog 部署到 Cloudflare Workers，當然要有一個 Hexo 的 Blog 了。
同時也需要一個 Cloudflare 的帳號～

2. 申請一個 API key#

登錄 Cloudflare，在個人資料 - API 令牌中申請一個 API 令牌
使用自帶的 Cloudflare Workers 模板即可

記住你的 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 次寫入、刪除、列出操作