MODULE 7 — ADVANCED

讓活動頁自己更新

每天換標語、倒數自動更新、每天換一張 AI 圖。照著抄能動。

核心觀念

GitHub 不只存檔,
還能定時幫你做事。

GitHub Actions 排程

放一個「排程指令檔」進 repo,GitHub 按表操課
執行結果 commit 回 repo → Pages 自動更新 → 訪客看到新內容
全程不需要你的電腦開機,免費額度內
真實案例:catime 每小時自動生成一張 AI 貓圖並發布

照著抄:每天自動換標語

1. 把會變的部分抽成 daily.json,頁面從它讀標語
2. 放 .github/workflows/daily.yml(講義有完整檔,路徑一字不差)
3. Actions 頁籤 → Run workflow 手動測一次 → json 變了、頁面跟著變

延伸玩法(原理相同)

倒數天數 — 腳本算剩 N 天寫進 json
每日 AI 圖 — 排程呼叫生圖 API(key 放 repo Secrets,同模組 6 觀念)
自動抓資料 — 每天抓天氣:「山上 16 度,適合熱拿鐵」

重要

GitHub 排程不保證準時,
高負載時甚至整次跳過。

三招加固(由簡到難)

1. 冪等 — 內容從「今天是哪天」算出,不是「昨天 +1」;漏跑也自癒
2. 跑更頻繁 + 沒變不 commit — catime 跑每小時;漏一次下次補上,不洗版
3. 能前端算就別排程 — demo 07 的倒數天數就是瀏覽器即時算,永遠準

先把內容設計成冪等,一半的排程可靠性問題就消失了。

更準時:Cloudflare Cron Triggers

# wrangler.toml
[triggers]
crons = ["0 0 * * *"]   # 一樣 UTC,台北 08:00

# worker.js
export default {
  async scheduled(controller, env, ctx) {
    /* 排程一到,Cloudflare 自動呼叫這裡 */
  },
};

已在用 Cloudflare 又在意準時 → Cron Triggers(準時性遠勝 GitHub);只是每天換句文案、想跟 repo 綁一起 → GitHub Actions + 三招加固就夠。

常見坑

cron 是 UTC — 0 0 * * * 是台北早上八點,不是半夜
排程不準時 — 尖峰可能晚幾十分鐘,別承諾「整點準時」
忘了 permissions: contents: write — push 會 Permission denied
活動結束忘了關 — 收攤時刪 yml 或 Disable workflow

對照成品:demos/07-auto-update(本課 repo 的 Actions 真的每天在跑)

動手做

任務 — 給頁加一個 daily.json + 一個 GitHub Actions 排程檔,到 Actions 按 Run workflow 跑一次
預期 — daily.json 內容變了,過一兩分鐘頁面跟著變
卡關 — push 失敗看到 Permission denied,加上 permissions: contents: write