注意

本篇文章不是面对初学者，继续阅读代表着你已经满足以下条件

  1. 有一个 Cloudflare 的账号
  2. 安装了 nodejs 和 wrangler

创建一个 Page

以下是操作步骤

  1. 访问 dashboard
  2. 在左侧侧边栏点击 Workers & Pages
  3. 在 Overview 中点击那个特别显眼的蓝色按钮 Create Application
  4. 在 Tabs 切换中选中 Pages
  5. 动到最下方的 Create ssing direct upload 点击 Upload Assets
  6. 在 project name 中，给项目取一个名字, 然后点击 Create project
  7. 然后在 Upload your project assets 下方的 Dropzone 上拖拽任何的目录到里面（比如创建个目录然后里面只有一个 index.html)
  8. 点击右下角的 Deploy site
  9. 完成！

获取 API token

创建 token 的步骤如下

  1. 访问 Api Tokens
  2. 在 API Tokens 这个板块中点击 Create Token
  3. 在 API token templates 中选择 Edit Cloudflare Workers 这个模版，然后点击 Use template
  4. 然后在 Account Resources 和 Zone Resources 中分别选择你的账号和资源就 ok 了
  5. 点击最下面的 Continue to summary
  6. 点击 Create Token
  7. 此时 Token 会显示出来，点击 Copy 将它保存到你的 KeePass 中以后可能会经常用到

使用 wrangler 来部署项目

1
2

# 这是一个通过 API Token 将当前目录下的 dist 目录，部署到 carljin-com 这个项目上的 wrangler 命令
CLOUDFLARE_API_TOKEN="API Token" wrangler pages deploy dist --project-name=carljin-com

使用 Github Action

下面 yml 文件中有两个项目的 secrets

  1. CF_API_TOKEN API Token 字符串
  2. PROJECT_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

name: Build and Deploy to cloudflare
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 16
          registry-url: "https://registry.npmjs.org"
      - run: npm install
      - run: npm run build

      - name: Deploy to cloudflare
        uses: demosjarco/wrangler-action-node@v1
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}
          command: pages deploy dist --project-name=${{ secrets.PROJECT_NAME }}