GitHub + Cloudflare Pages 自動部署

整體概念：這條自動鏈是怎麼運作的？

流程圖

你改 HTML 文件

本機修改

→

git push

推送指令

→

GitHub 倉庫更新

雲端代碼庫

→

Cloudflare 收到通知

Webhook 觸發

→

自動重新部署

約 30-60 秒

→

網站即時更新

全球 CDN 生效

三個核心概念

CDN

Content Delivery Network，內容分發網絡。Cloudflare 在全球有數百個節點，你的 HTML 會被複製到離用戶最近的伺服器，讓網頁加載更快。

7-11 便利店的邏輯：商品不從總倉庫直接賣給你，而是先補貨到你家附近的門店。

自動觸發鏈

GitHub 和 Cloudflare 之間建立了一條 Webhook 連接。每當你 push 新代碼，GitHub 就自動通知 Cloudflare，Cloudflare 再自動拉取最新文件重新部署。

就像訂了外賣自動通知司機取餐，你不需要打電話——系統自動串聯。

為什麼不直接用 wrangler？

直接用 wrangler deploy 也可以部署，但每次都要手動執行。連接 GitHub 後，push 就等於部署，適合頻繁更新的網站。

wrangler = 每次親自去郵局寄信；GitHub 連接 = 設定自動取信服務，投信箱就寄出。

前置準備：開始之前需要什麼？

需要準備的帳號與工具

GitHub 帳號

免費。用來存放你的 HTML 文件，也是 Cloudflare 的觸發來源。

Cloudflare 帳號

免費。Pages 功能不限流量，適合個人靜態網站。

git（版本控制）

Windows 安裝 Git for Windows 後即有 git 指令。

gh CLI

GitHub 官方命令行工具，用來在終端直接建立 GitHub 倉庫。

安裝 gh CLI（GitHub 命令行工具）

在 Windows 上用 winget 一條指令安裝：

Windows Terminal / PowerShell

winget install --id GitHub.cli -e

安裝完畢後重開終端，驗證安裝成功：

gh --version
# 應顯示：gh version 2.x.x (...)

登入 GitHub 帳號

用以下指令啟動瀏覽器登入流程：

gh auth login --hostname github.com --git-protocol https --web

注意：瀏覽器驗證步驟
執行上述指令後，終端會顯示一組一次性驗證碼（8位英數字，例如 ABCD-1234）。
瀏覽器會自動打開 GitHub 登入頁面，把這組驗證碼輸入進去，點擊確認即完成授權。
驗證碼只有幾分鐘有效，請盡快完成。

登入後確認狀態：

gh auth status
# 應顯示：Logged in to github.com as 你的用戶名

首次部署：從零建立網站

步驟一覽

準備專案文件夾與 index.html

建立一個專用文件夾，放入你的 HTML 文件。確保有一個 index.html 作為首頁。

# 例如：Windows 路徑
mkdir D:\tmp\my-website
# 把你的 HTML 文件放進去

初始化 git 並做第一次 commit

進入文件夾，初始化版本控制，把所有文件加入追蹤並提交。

cd /d/tmp/my-website
git init
git add .
git commit -m "Initial commit"

用 gh CLI 建立 GitHub 倉庫並推送

一條指令同時建立倉庫並推送代碼。--public 表示公開倉庫（Cloudflare 免費版需要公開倉庫）。

gh repo create my-website --public --source=. --remote=origin --push

在 Cloudflare Dashboard 連接 GitHub

這個步驟需要在瀏覽器操作，無法用命令行完成。

需要在瀏覽器操作：
1. 登入 Cloudflare Dashboard（dash.cloudflare.com）
2. 左側選 Workers & Pages
3. 點 Create application → 選 Pages 標籤
4. 點 Connect to Git
5. 選擇你剛建立的 GitHub 倉庫
6. 在 Build settings 頁面設定（見下方）

構建設定（靜態 HTML 不需要構建）

因為我們的網站是純 HTML，不需要任何框架或構建步驟，設定如下：

設定項目	填入值	說明
Framework preset	None	純 HTML，不用選框架
Build command	（留空）	不需要編譯步驟
Build output directory	/（斜線）	直接使用倉庫根目錄

點擊 Save and Deploy，等待首次部署完成

Cloudflare 會自動拉取你的 GitHub 倉庫並部署。通常 30-60 秒內完成，你會得到一個 xxx.pages.dev 的網址。

連接成功的標誌： 在 Cloudflare Dashboard 的 Pages 項目頁面，你會看到 Builds & deployments 分頁，每次 git push 後這裡都會新增一條部署記錄，狀態顯示為 Success。

日常更新：只需 3 條命令

設定完成後，每次更新網站只需要三個步驟：

把新文件複製到專案文件夾（覆蓋舊版）

# 把新版文件複製過去，覆蓋舊文件
cp "D:\tmp\新版index.html" "D:\tmp\my-website\index.html"

加入版本控制並提交

git add index.html
git commit -m "Update homepage"

推送到 GitHub（自動觸發 Cloudflare 部署）

git push

為什麼用固定文件名？

帶版本號（不推薦）

nvda_v3.html
nvda_v4.html
nvda_v5.html

每次改版都是新 URL。分享出去的連結會失效，訪客需要更新書籤。

固定文件名（推薦）

index.html
nvda_dashboard.html

URL 永遠不變，內容隨每次 push 自動更新。分享的連結永遠指向最新版本。

一鍵更新：bat 腳本模板

把三條命令打包成一個 .bat 文件，雙擊就能完成更新，不用每次打開終端輸入指令。

完整 bat 腳本模板

更新網站_xxx.pages.dev.bat

@echo off
:: =========================================
:: 網站自動更新腳本
:: 用法：雙擊執行，或在 Windows Terminal 中運行
:: =========================================

:: 第一步：把最新文件複製到 git 專案文件夾（覆蓋舊版）
copy /Y "D:\tmp\最新版本.html" "D:\tmp\my-website\index.html"

:: 確認文件複製成功
if %errorlevel% neq 0 (
    echo 錯誤：找不到源文件，請確認路徑正確
    pause
    exit /b 1
)

:: 第二步：進入 git 專案文件夾
cd /d "D:\tmp\my-website"

:: 第三步：加入版本控制
git add index.html

:: 第四步：提交（commit message 可自訂）
git commit -m "Update: %date% %time%"

:: 第五步：推送到 GitHub，觸發 Cloudflare 自動部署
git push

:: 完成提示
echo =================================
echo 推送完成！Cloudflare 將在 30-60 秒內自動更新網站
echo =================================
pause

每行說明

指令	作用
@echo off	關閉每行指令的回顯，讓輸出更乾淨
copy /Y	/Y 表示自動覆蓋，不出現確認提示
if %errorlevel% neq 0	檢查上一步是否失敗，失敗則停止並提示錯誤
cd /d "路徑"	/d 讓 cd 可以跨磁碟切換（如從 C: 切到 D:）
git commit -m "..."	%date% %time% 自動帶入當前日期時間作為提交說明
git push	推到 GitHub，自動觸發 Cloudflare 重新部署
pause	執行完後視窗暫停，讓你看到輸出結果

命名規範

建議命名格式：更新網站_xxx.pages.dev.bat

例如：更新網站_gdrive-api-guide.pages.dev.bat

如果你管理多個 Cloudflare Pages 網站，每個網站都有一個對應的 .bat 文件，文件名中帶上完整域名可以快速分辨是哪個網站的更新腳本。

常見問題 FAQ

為什麼點擊 bat 之後就全自動更新了？我什麼都沒做。

這正是「自動觸發鏈」的效果。bat 腳本做了兩件事：把文件推到 GitHub、GitHub 通知 Cloudflare。而你在首次設定時已經告訴 Cloudflare「監聽這個 GitHub 倉庫」，所以每次 push 都會自動觸發部署。你之後唯一要做的就是雙擊 bat 文件。

為什麼 push 完後要稍等一下才看到網頁更新？

有兩個原因：

1. Cloudflare 部署時間：收到 GitHub 通知後，Cloudflare 需要 30-60 秒重新部署。

2. CDN 緩存：你的瀏覽器或 CDN 節點可能緩存了舊版本。試試 Ctrl+Shift+R（Windows）或 Cmd+Shift+R（Mac）強制刷新，繞過緩存直接拉取最新版本。

如果我把源文件（最新版本.html）刪掉了，bat 腳本還會壞掉線上網站嗎？

不會破壞線上版本。bat 腳本的邏輯是：先找到源文件，找不到就報錯停止（if %errorlevel% neq 0 那段）。

找不到源文件的情況下，腳本會顯示錯誤訊息並終止，不會執行後面的 git 操作，所以線上網站維持上次成功部署的版本不變。

git push 失敗，顯示 Authentication failed 或 remote: Permission denied

這表示 GitHub 授權已過期或失效。執行以下步驟重新授權：

# 第一步：確認當前登入狀態
gh auth status

# 第二步：如果顯示未登入，重新執行登入
gh auth login --hostname github.com --git-protocol https --web

# 第三步：登入後再試一次 push
git push

如果問題持續，也可以用 gh auth refresh 刷新 token。

git push 顯示「Everything up-to-date」，但我明明改了文件

這表示你忘了執行 git add 和 git commit。git 只會推送已提交的變更，沒有 commit 的文件修改不會被 push。

bat 腳本中已包含這兩步，但如果你手動推送，記得三步要按順序執行：add → commit → push。

可以同時管理多個 Cloudflare Pages 網站嗎？

可以。每個網站對應一個 GitHub 倉庫，再對應一個 Cloudflare Pages 項目。操作上的建議：

· 每個網站建立一個獨立的本機文件夾
· 每個網站有自己的 .bat 腳本（按命名規範加上域名）
· GitHub 帳號統一用同一個，倉庫分開即可
· Cloudflare 帳號也是同一個，在 Pages 下建立多個項目

GitHub + Cloudflare Pages自動部署完全指南

GitHub + Cloudflare Pages
自動部署完全指南