NekoMio

NekoMio

telegram
github

将 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 模板即可
1649775724987-156-2.webp
记住你的 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 大概登录就能看见,如果你没有绑定自己的域名可以暂时不管 routezone_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 次写入、删除、列出操作
加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。