1.部署到github pages

打开https://github.com/<your-gh-name>/<your-gh-name>.github.io/settings/pages ⇒ Source选择Deploy from a branch ⇒ Branch选择gh-pages ⇒ Folder选择/root

2.部署到vercel

点击部署新项目 ⇒ 选择<your-gh-name>.github.io ⇒ 所有选项均保持为空（默认） ⇒ 项目名会生成形如<项目名>.vercel.app的项目域名

3.部署到cloudflare pages

创建 ⇒ Pages ⇒ Import an existing Git repository ⇒ 选择<your-gh-name>.github.io ⇒ 所有选项均保持为空（默认） ⇒ 项目名会生成形如<项目名>.pages.dev的项目域名 ⇒ 保存并部署

4.部署到cloudflare workers

4.1.cloudflare token

提前准备CLOUDFLARE_ACCOUNT_ID和CLOUDFLARE_API_TOKEN并将其添加到公开库的action密钥中

4.2.在source目录下创建文件

index.js：

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
import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler'
const DEBUG = false
addEventListener('fetch', event => {
  event.respondWith(handleEvent(event))
})
async function handleEvent(event) {
  let options = {}
  try {
    if (DEBUG) {
      options.cacheControl = {
        bypassCache: true,
      }
    }
    const page = await getAssetFromKV(event, options)
    const response = new Response(page.body, page)
    response.headers.set('X-XSS-Protection', '1; mode=block')
    response.headers.set('X-Content-Type-Options', 'nosniff')
    response.headers.set('X-Frame-Options', 'DENY')
    response.headers.set('Referrer-Policy', 'unsafe-url')
    response.headers.set('Feature-Policy', 'none')
    return response
  } catch (e) {
    if (!DEBUG) {
      try {
        let notFoundResponse = await getAssetFromKV(event, {
          mapRequestToAsset: req => new Request(`${new URL(req.url).origin}/404.html`, req),
        })
        return new Response(notFoundResponse.body, { ...notFoundResponse, status: 404 })
      } catch (e) {}
    }
    return new Response(e.message || e.toString(), { status: 500 })
  }
}
function handlePrefix(prefix) {
  return request => {
    let defaultAssetKey = mapRequestToAsset(request)
    let url = new URL(defaultAssetKey.url)
    url.pathname = url.pathname.replace(prefix, '/')
    return new Request(url.toString(), defaultAssetKey)
  }
}

wrangler.toml：

1
2
3
4
5
6
7
8
name = "<your-workers-name>"
main = "index.js"
usage_model = 'bundled'
compatibility_flags = []
workers_dev = true
compatibility_date = "2025-05-09"
[site]
bucket = "./"

package.json：

1
2
3
4
5
6
7
8
9
10
{
  "private": true,
  "version": "1.0.0",
  "description": "A template for kick starting a Cloudflare Workers project",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@cloudflare/kv-asset-handler": "~0.1.2"
  }
}

4.3 修改_config.yml中的# Directory块

1
skip_render: ["wrangler.toml","package.json","index.js"]

4.4 添加action

在公开库新建文件.github\workflows\workers.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
name: Deploy to Cloudflare Workers
on:
  push:
    branches: [ gh-pages ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '22'
      - name: deploy
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
        run: |
          npm i
          npx wrangler@latest deploy

4.部署到google firebase

4.1.firebase authorization code

1
2
3
#npm 环境
npm install -g firebase-tools
firebase login:ci

打开返回的网址，登录google账号并授权，获取1//开头的token，暂且称之为FIREBASE_AUTHORIZATION_CODE，将其添加到公开库的action密钥中，继续执行
打开firebase控制台，创建新项目，例如name-blog，在action密钥中添加FIREBASE_PROJECT_ID，值为name-blog

4.2.在source目录下创建文件

firebase.json：

1
2
3
4
5
6
{
    "hosting": {
        "public": ".",
        "ignore": ["*.json","**/.*", "**/node_modules/**"]
    }
}

4.3 修改_config.yml中的# Directory块

1
skip_render: ["wrangler.toml","package.json","index.js","firebase.json"]

4.4 添加action

在公开库新建文件.github\workflows\firebase.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
name: Deploy to google firebase
on:
  push:
    branches: [ gh-pages ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '22'
      - name: deploy
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
        run: |
          npm i
          npx firebase-tools@14.3.1 deploy --token ${{ secrets.FIREBASE_AUTHORIZATION_CODE }} --project ${{ secrets.FIREBASE_PROJECT_ID }}

在一个action中部署 github pages 、cloudflare workers 、 google firebase

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
name: 部署到云平台
on:
  workflow_dispatch:
  push:
    branches: [ gh-pages ]
permissions:
  contents: read
  pages: write
  id-token: write
jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'
      - uses: actions/configure-pages@v5
      - uses: actions/upload-pages-artifact@v3
        with:
          path: '.'
      - id: deployment
        uses: actions/deploy-pages@v4
      - run: npm i
      - name: 🚀 部署到 cloudflare workers
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
        run: |
          npx wrangler@latest deploy
      - name: 🚀 部署到 google firebase hosting
        env:
          FIREBASE_AUTHORIZATION_CODE: ${{ secrets.FIREBASE_AUTHORIZATION_CODE }}
        run: |
          npx firebase-tools@14.3.1 deploy --token ${{ secrets.FIREBASE_AUTHORIZATION_CODE }} --project ${{ secrets.FIREBASE_PROJECT_ID }}
      - name: 清理工作流
        uses: Mattraks/delete-workflow-runs@v2
        with:
          token: ${{ secrets.MYPAT }}
          repository: ${{ github.repository }}
          retain_days: 0
          keep_minimum_runs: 1