Initial setups for the blog will be skipped, since it has been done years ago for me.

Cloudflare Workers Setup

I assume you already have a Cloudflare account and a domain using it for DNS resolution.

Because we will only be using wrangler on the local machine once, I do not recommend installing it with npm or other package management tools. Instead, go to its GitHub repo to download the binary file for your platform and extract it to your blog’s root directory.

1
wrangler init --site my-blog # or whatever name you like

Run it from command line, a file named wrangler.toml will be created, fill in the blanks like following:

1
2
3
4
5
6
7
8
9
10
name = "your_blog_name"
type = "webpack"
account_id = "your_account_id"
workers_dev = true
route = "your.domain.tld/*"
zone_id = "your_zone_id"

[site]
bucket = "./public" # this is for Hexo and Hugo, change it according to your blog type
entry-point = "workers-site"

To find your Zone ID and Account ID, get to the overview page of that domain, they can be found on the bottom-right corner of the page.

Domain Overview

Then run wrangler config, it will ask for the API Token you just generated:

Wrangler Config

To generate a new API Token, go to your Cloudflare profile page and click Create, use the template for Edit Cloudflare Workers but remove the Account and User permissions - we will not be using them here. For other fields, follow the least privilege principle.

Also save it to the Secrets area of your blog’s GitHub repo, name it with CF_WORKERS_TOKEN or you will need to edit your workflows.

Repo Secret

GitHub Actions CI Setup

In the root directory of your blog, create a new file with whatever filename but having .yml as extension at .github/workflows/. Put the following contents into that file:

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
name: CI
on:
push:
branches:
- master # change it to the branch you want to use
jobs:
build:
runs-on: ubuntu-latest

steps:
- name: Checkout
uses: actions/checkout@v2
with:
persist-credentials: false
- name: Use Node.js ${{ matrix.node_version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node_version }}
- name: Cache node_modules
uses: actions/cache@v1
env:
cache-name: hexo-node-modules
with:
path: node_modules
key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('package-lock.json') }}
- name: Cache workers-site/node_modules
uses: actions/cache@v1
env:
cache-name: workers-site-node-modules
with:
path: workers-site/node_modules
key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('workers-site/package-lock.json') }}
- run: npm i
- run: npm run build
- name: Deploy to Cloudflare Workers
uses: cloudflare/wrangler-action@1.1.0
with:
apiToken: ${{ secrets.CF_WORKERS_TOKEN }}

Commit and push everything to GitHub, the CI shoud be running. Check the progress and any issues at the Actions page of your repo.

DNS Setup

Add an A type DNS record to the domain pointing to 2.2.2.2. You should be able to see the blog up and running when the DNS is updated.

References