GitHub 到 Cloudflare:建立自動化 Astro 靜態網站部署

分類:Cloud · DevOps


Astro 網站本身只是 source code,完整發布流程可以變成:

Git
 ↓
GitHub
 ↓
Cloudflare build
 ↓
Astro
 ↓
Static Assets
 ↓
正式網域

GitHub 作為 source of truth

網站 repo 可以包含:

src/
public/
scripts/
package.json
wrangler.jsonc

而以下通常不進 Git:

node_modules/
dist/
.astro/
備份檔
資料庫 dump
原始 migration export

Cloudflare build

Cloudflare 連接 GitHub repository 後,每次 push 自動執行:

npm run build

如果使用 Workers Static Assets,再 deploy:

npx wrangler deploy

Astro 的輸出目錄通常是 dist/。

Wrangler Static Assets

最小概念:

{
  "name": "site-name",
  "compatibility_date": "YYYY-MM-DD",
  "assets": {
    "directory": "./dist"
  }
}

自訂 404 可再加入 not_found_handling。

正式切換前

先使用平台測試網址檢查:

首頁
文章頁
Category
Tag
Archive
Search
RSS
Sitemap
404
圖片

確認正常後,再切正式網域。舊主機先保留一段時間當 rollback。

測試網址避免被收錄

測試網址與正式網址若內容相同,可以在測試環境加入:

<meta name="robots" content="noindex,nofollow">

正式網域穩定後,也可以直接停用測試網址。

自動部署的好處

日常流程只剩:

git push
 ↓
Cloudflare 自動 build
 ↓
自動 deploy

不再需要 SSH、scp、更新 PHP、維護資料庫或重啟 Web Server。

自動寫入 repo 時的注意事項

如果 GitHub Actions 也會自動 push 到網站 repo,本機修改前最好先:

git pull --rebase

避免本機 branch 落後遠端。

最終架構

Markdown / Astro
      ↓
    GitHub
      ↓
Cloudflare Build
      ↓
Static Assets
      ↓
正式網站

網站部署本身到這裡就幾乎不需要人工維護了。


Tags:GitHub · Cloudflare · Astro · CI/CD