課程名稱： AI 與自動化與雲端服務

Cloudflare 與 Github 串接

Properties3
description—
tags雲端服務
date2026-08-14

閲覽人數 -- 次

手動

自己到 Cloudflare 後台手動接

  1. 登人 Cloudflare Dashboard -> 組建 -> 運算 -> Workers & Pages

  2. 點擊 建立應用程式

  3. 點擊下方連結的 開始使用

  4. 選擇 匯入現有 Git 存放庫 的 開始使用

  5. 選擇 GitHub 與選擇存放庫: quartz-ai，然後按下 開始設定

  6. 設定組建和部署
    專案名稱: quartz-ai
    生產分支: main
    組建設定

    • Framework 預設: 無
    • 組建命令: npx quartz build
    • 組建輸出目錄 / : public
    • 組建註解: 已啟用
    • 根目錄(進階): 空白
    • 環境變數(進階): 無

  7. 按下 儲存並部署

  8. 成功會顯示下圖

自動

建一組新的實權限 Token 用

  1. 去Cloudffare Dashboard建一組帶 “Cloudffare Pages: Edit” 權限的API Token, 後就能用API/wrangler自動建立並連接Pages專案(需要確認GitHub App也有授權這兩個repo) 。

1. 建立 Cloudflare API Token

步驟 1：進入個人 API 權杖頁面

  1. 在目前畫面的右上角，點擊最右邊的 「個人人形圖示 👤」。

  2. 在下拉選單中點選 「設定檔」。

  3. 進入個人檔案頁面後，在左側選單點選 「API 權杖」（API Tokens）。

    (也可以直接在瀏覽器網址列輸入：[https://dash.cloudflare.com/profile/api-tokens](https://dash.cloudflare.com/profile/api-tokens))

步驟 2：建立自訂權杖 (Custom Token)

  1. API 權杖，點擊畫面上的 「建立權杖」（Create Token） 按鈕。
  2. 頁面上，找到 「自訂 Token」 區塊，點擊其右側的 「開始使用」（Get started）。

步驟 3：配置 Pages 編輯權限

請依序設定以下欄位：

  • 權杖名稱（Token name）： 取一個好記的名字（例如：Pages-Deploy-Token）。

  • 權限（Permissions）：

    • 第一個下拉選單選擇：帳戶（Account）
    • 第二個下拉選單選擇：Cloudflare Pages
    • 第三個下拉選單選擇：編輯（Edit）

  • 帳戶資源（Account Resources）：

    • 選擇 包含（Include） ➔ 所有帳戶（All accounts） 或指定你的特定帳戶。

  • 其餘「TTL / IP 篩選」可維持預設值。

步驟 4：生成並保存 Token

  1. 滑到頁面最下方點擊 「繼續進行摘要」（Continue to summary）。
  2. 確認權限清單包含 Account - Cloudflare Pages - Edit。
  3. 點擊 「建立權杖」（Create Token）。
  4. 【重要】 複製畫面上顯示的那一長串 Token 字串並妥善保存（這個畫面關閉後就無法再次查看，若遺失只能重新生成）。

2. 確認 GitHub App 授權（Repository 權限）

如果你的 Pages 專案是透過 GitHub 連動自動部署，需確認 Cloudflare Pages App 有權限存取這兩個 Repo：

  1. 開啟並登入 GitHub。

  2. 點擊右上角個人頭像 ➔ Settings（設定）。

  3. 在左側選單的 Integrations 區塊點選 Applications ➔ 選擇 Installed GitHub Apps。

  4. 找到 Cloudflare Pages，點擊旁邊的 Configure。

  5. 往下捲動到 Repository access 區塊：

    • 若選擇 All repositories 則已自動授權。
    • 若選擇 Only select repositories，請確認清單內已勾選那兩個目標 Repo。

  6. 點擊 Save 儲存。

在 Antigravity IDE 終端機中使用

在 Antigravity IDE 終端機 或 CI/CD（如 GitHub Actions） 環境中，只要將建立好的 Token 設定到 CLOUDFLARE_API_TOKEN 環境變數中，Wrangler 與 Cloudflare API 就會自動採用該憑證，省去手動網頁登入的步驟。

1. 設定環境變數

根據你的終端機 Shell 類型，執行對應的指令注入 Token：

  • PowerShell (Windows 預設)：

    $env:CLOUDFLARE_API_TOKEN="你的_API_TOKEN"
$env:CLOUDFLARE_ACCOUNT_ID="你的_CLOUDFLARE_ACCOUNT_ID"

  • Bash / Zsh (Linux / macOS / WSL)：

    export CLOUDFLARE_API_TOKEN="你的_API_TOKEN"

  • Command Prompt (CMD)：

    set CLOUDFLARE_API_TOKEN=你的_API_TOKEN
set CLOUDFLARE_ACCOUNT_ID=b8c2b9817dd0e986b41815a21deef4c9

💡 專案級持久化（可選）： 若不想每次開終端機都手動輸入，可在專案根目錄建立 .env 檔案並加入：

程式碼片段

CLOUDFLARE_API_TOKEN=你的_API_TOKEN

(請務必將 .env 加入 .gitignore，避免金鑰外洩。)

2. 使用 Wrangler 驗證與操作 Pages 專案

在終端機中，你可以直接使用 npx wrangler 來管理與部署 Pages：

  • 驗證 Token 權限：

    npx wrangler pages project list

    (若設定成功，會顯示你 Token 對應的帳戶名稱與 ID。)

    Project Name    | Project Domains           | Git Provider | Last Modified
----------------+---------------------------+--------------+--------------
quartz-ai       | quartz-ai.pages.dev       | Yes          | 13 hours ago
quartz-python   | quartz-python.pages.dev   | Yes          | 14 hours ago
obsidian-blog   | obsidian-blog-a9w.pages...| Yes          | 1 week ago

  • 自動建立新的 Pages 專案：

    # npx wrangler pages project create <專案名稱> --production-branch main
npx wrangler pages project create quartz-ai --production-branch main
npx wrangler pages project create quartz-python --production-branch main
npx wrangler pages project create quartz-django --production-branch main
npx wrangler pages project create quartz-mysql --production-branch main
npx wrangler pages project create quartz-azure-ai --production-branch main
npx wrangler pages project create obsidian-blog --production-branch main

  • 部署靜態資料夾到 Pages（直接發布）：

    # 將 build 或 dist 產出目錄直接發布至生產環境
# npx wrangler pages deploy ./dist   --project-name=<專案名稱>
# npx wrangler pages deploy ./public --project-name=<專案名稱>
npx wrangler pages deploy C:/cloud/project/quartz-django/public --project-name=quartz-python
npx wrangler pages deploy C:/cloud/project/quartz-django/public --project-name=quartz-django
npx wrangler pages deploy C:/cloud/project/quartz-mysql/public --project-name=quartz-mysql
npx wrangler pages deploy C:/cloud/project/quartz-ai/public --project-name=quartz-ai
npx wrangler pages deploy C:/cloud/project/quartz-azure-ai/public --project-name=quartz-azure-ai

    將 ./public 換成你的靜態輸出目錄，例如 dist 或 public

  • 列出帳戶內所有的 Pages 專案：

    npx wrangler pages project list

二、 在 CI/CD 環境中配置（以 GitHub Actions 為例）

若要實現「Git Push 後自動打包並部署到 Cloudflare Pages」：

步驟 1：在 GitHub Repository 儲存 Secret

  1. 進入你的 GitHub Repo ➔ Settings ➔ Secrets and variables ➔ Actions。

  2. 點擊 New repository secret：

    • Name： CLOUDFLARE_API_TOKEN
    • Secret： 貼上你的 Cloudflare API Token 字串。

  3. （可選）同理新增 CLOUDFLARE_ACCOUNT_ID（可在 Cloudflare 控制台網址列或儀表板右下角找到）。

步驟 2：建立 GitHub Actions Workflow

在專案內建立 .github/workflows/deploy-pages.yml，範例如下：

YAML

name: Deploy to Cloudflare Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install dependencies & Build
        run: |
          npm ci
          npm run build

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy ./dist --project-name=你的Pages專案名稱 --branch=main

三、 透過純 REST API 自動建立專案（進階自動化）

如果你希望寫 Python / Node.js 腳本在背後全自動化建置，可以直接呼叫 Cloudflare REST API：

  • 建立 Pages 專案 API 範例 (cURL)：

    Bash

    curl -X POST "https://api.cloudflare.com/client/v4/accounts/{你的_ACCOUNT_ID}/pages/projects" \
     -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
     -H "Content-Type: application/json" \
     --data '{
       "name": "my-new-pages-project",
       "production_branch": "main"
     }'

關係圖譜