NekoMio's Blog

美しいものが起こることを常に信じている

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~

1
2
npm i @cloudflare/wrangler -g
# yarn global add @cloudflare/wrangler
初始化项目

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

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

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

修改配置

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

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

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

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

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

account_id 大概登录就能看见,如果你没有绑定自己的域名可以暂时不管 routezone_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
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
55
56
57
58
59
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 次写入、删除、列出操作

本文作者 : NekoMio
知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
本文链接 : https://www.nekomio.com/2020/12/17/156/

本文最后更新于 天前,文中所描述的信息可能已发生改变