文章

把 Jekyll 布署到 Cloudflare Workers

发表于 更新于
Preview Image
作者 doobom
次浏览 6 分钟阅读

通过 ChatGPT 的回答加以整。

要将 Jekyll 生成的静态网站部署到 Cloudflare Workers 上，你可以使用 Cloudflare Workers Sites（基于 Workers 和 Workers KV）。以下是详细步骤：

1. 准备你的 Jekyll 网站

首先，你需要确保已经生成了 Jekyll 网站的静态文件。你可以使用以下命令在本地生成网站：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 更新系统
apt update
apt upgrade

# 安装 ruby 及相关软件
apt install ruby-full
gem install bundler

# 生成网站
cd website
bundler install
JEKYLL_ENV="production"
#jekyll build
bundle exec jekyll b -d "_site"

这个命令会在 _site 文件夹中生成你的静态网站文件。

2. 安装 Wrangler CLI 工具

Wrangler 是 Cloudflare 提供的一个 CLI 工具，用于管理和部署 Cloudflare Workers。首先，你需要安装 Wrangler：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 通过二进制可执行程序安装 nodejs 下载地址： https://nodejs.org/en/download/prebuilt-binaries
wget https://nodejs.org/dist/v20.17.0/node-v20.17.0-linux-x64.tar.xz
tar xzf node-v20.17.0-linux-x64.tar.xz -C /opt/node
export PATH="/opt/node/bin:$PATH"
source ~/.bashrc
node -v
npm -v

# 通过 nvm 安装
# installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
source ~/.bashrc
# download and install Node.js (you may need to restart the terminal)
nvm install 20
# verifies the right Node.js version is in the environment
node -v # should print `v20.17.0`
# verifies the right npm version is in the environment
npm -v # should print `10.8.2`

npm install -g wrangler

安装完毕后，登录到 Cloudflare：

1
2
3
4
5

# 设置环境变量 
CLOUDFLARE_API_TOKEN="abcdefghijklmnopqrstuvwxyz"

# 或 
wrangler login

3. Clone 一个项目模板

1

git clone https://github.com/cloudflare/worker-sites-template.git

我们需要的是 wrangler.toml 文件及 workers-site 这个目录。把 wrangler.toml 文件及 workers-site 复制到生成的 _site 同一目录下，然后下一步。

4. 配置 wrangler.toml

打开 wrangler.toml 文件，并进行以下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

name = "<WORKER_NAME>" # 你的项目名称
main = "workers-site/index.js"
kv_namespaces = [
  { binding = "<KV_NAMESPACE_NAME>", id = "<KV_NAMESPACE_ID>" }
]
site = { bucket = "./_site" }

account_id = "<ACCOUNT_ID>" # 在 Cloudflare Dashboard 上可以找到
workers_dev = true # 是否在 workers.dev 上预览
route = "" # 如果绑定到自定义域名，设置你的域名路径

# 定义环境配置，如生产环境的域名
[env.production]
route = "https://example.com/*"  # 生产环境下的自定义域名
zone_id = "<DOMAIN_ZONE_ID>"
kv_namespaces = [
  { binding = "<KV_NAMESPACE_NAME>", id = "<KV_NAMESPACE_ID>" }
]

5. 安装 Workers Sites 插件

Workers Sites 是为静态站点提供的工具，需要安装相关插件：

1
2
3

cd workers-site
npm install
cd ..

6. 部署 Jekyll 网站

你需要将 Jekyll 生成的 _site 文件夹中的所有文件上传到 Workers KV 中，并通过 Workers 来处理请求。你可以通过以下命令部署：

1

CLOUDFLARE_API_TOKEN=$CLOUDFLARE_API_TOKEN wrangler deploy --compatibility-date $(date +"%Y-%m-%d")

这个命令会将你的 Jekyll 网站部署到 Cloudflare Workers 上，并将静态文件存储在 Workers KV 中。

7. 访问你的网站

部署完成后，你可以访问你的 Workers Dev 子域名，或绑定的自定义域名，查看你的网站。

注意事项

  • 自定义域名：如果你想使用自定义域名，可以在 Cloudflare 控制面板的 Workers Routes 设置中配置，然后更新 wrangler.toml 中的 route 和 zone_id。
  • 文件大小限制：Cloudflare Workers 对文件大小有一些限制，对于非常大的站点或资产较多的站点，你可能需要优化资源或寻找其他解决方案。

通过以上步骤，你应该可以成功将 Jekyll 站点部署到 Cloudflare Workers 上。

通过 github action 自动更新

需要在 仓库 的 secrets 上添加 CLOUDFLARE_API_TOKEN，CLOUDFLARE_ACCOUNT_ID， CLOUDFLARE_ZONE_ID， CLOUDFLARE_WORKER_NAME 做为工作流的环境变量.

建一个工作流，可以按以下模板：

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
60
61
62
63
64
65

name: Deploy Jekyll Site to Cloudflare Workers

on:
  push:
    branches:
      - main
      - master
    paths-ignore:
      - .gitignore
      - README.md
      - LICENSE

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout the code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
          # submodules: true
          # If using the 'assets' git submodule from Chirpy Starter, uncomment above
          # (See: https://github.com/cotes2020/chirpy-starter/tree/main/assets)
          
      - name: Set up Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: 3.3
          bundler-cache: true

      - name: Install Jekyll and Bundler
        run: |
          gem install bundler
          bundle install

      - name: Build the Jekyll site
        run: bundle exec jekyll b -d "_site"
        env:
          JEKYLL_ENV: "production"

      - name: Test site
        run: |
          bundle exec htmlproofer _site \
            \-\-disable-external \
            \-\-ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"

      - name: Deploy to Cloudflare Workers
        env:
          CLOUDFLARE_API_TOKEN: $
          CLOUDFLARE_ACCOUNT_ID: $
          CLOUDFLARE_ZONE_ID: $
          CLOUDFLARE_WORKER_NAME: $
        run: |
          # Install wrangler CLI
          npm install -g wrangler
          # Navigate to workers-site directory
          cd workers-site
          # Install package in the package.json file
          npm install
          #return to repo directory
          cd ..
          # Deploy to Cloudflare Workers
          CLOUDFLARE_API_TOKEN=$CLOUDFLARE_API_TOKEN wrangler deploy --compatibility-date $(date +"%Y-%m-%d")

其它

漫步云端, 新技能get
Jekyll cloudflare workers git action ChatGPT wrangler
本文由作者按照 CC BY 4.0 进行授权