目录

将博客部署到CF Workers Site

前几天Cloudflare将Workers KV增加了免费额度,还不得搞起来?

利用Workers KV存储网页内容,通过Workers将内容返回给用户,就等于将自己的网站直接部署到CF成千上万的边缘节点当中,全球访问速度和TTFB都应该不错

https://blog.cloudflare.com/workers-sites/

安装Wrangler

官方文档

Wrangler有两种安装方式,通过NPM或者Cargo安装都可以,任选其一即可

准备好NodeJS和NPM环境,然后执行下面命令,NPM方式是下载预编译好的二进制程序,安装速度比较快

1
npm i @cloudflare/wrangler -g

或者准备好Rust环境,然后执行下面命令,Cargo方式是在本机从源码编译,安装速度比较慢

1
2
3
4
cargo install wrangler

# 使用系统OpenSSL库,生成的二进制会小一些
cargo install wrangler --features sys-OpenSSL

部署

我自己博客使用的是Hugo,下面所有内容都是按照Hugo的方式来,其他静态站点生成器方法类似

登录

1
2
3
4
wrangler login

# 手动设置token
wrangler config

初始化

进入自己站点的目录,执行下面命令进行初始化。这里Wrangler会自动安装cargo-generate工具,在本目录下创建一个workers-site项目目录,然后生成一个wrangler.toml配置文件

1
wrangler init --site

打开wrangler.toml文件,按照自己的信息进行修改

account_idzone_id都可以从Cloudflare官网上找到,route是路由到Workers的规则,这里写你需要绑定的域名,不要忘记后面的/*

bucket是网站的目录,因为我用的是Hugo,所以这个目录默认是public

entry-point是部署到Workers的js代码目录,这里不需要修改,因为刚刚初始化的时候生成的项目目录名已经自动填写上了

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
name = "blog"
type = "webpack"
account_id = "eu5d123456789987456321aabcddgeh"
workers_dev = true
route = "cf.zu1k.com/*"
zone_id = "fhidag8u98f43h93fhiohr929c8d59efhauh"

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

预览

1
wrangler preview --watch

发布

在Cloudflare中增加一条DNS记录,需要打开CF代理

/posts/coding/deploy-blog-to-cf-workers-site/cf-dns_hu3529eee56912ee733c6785e8e28d1194_11315_1016x180_resize_q75_h2_box_3.webp

执行下面命令进行部署

1
wrangler publish

使用GitHub Actions持续集成

Cloudflare提供了官方的Wrangler GitHub Action,可以直接用GitHub Actions将博客内容部署到CF Workers Site

添加认证信息

在github仓库设置一个secret,名字为CF_API_TOKEN,值为Wrangler的token

/posts/coding/deploy-blog-to-cf-workers-site/token_hue7d26e74b9bd0c0f9cb15f0ae4145e4d_11887_561x246_resize_q75_h2_box_3.webp

Workflows

 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
name: hugo

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
          fetch-depth: 0

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.78.2'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

      - name: Publish
        uses: cloudflare/[email protected]
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}