MODULE 5

上線:部署決策樹 +
GitHub Pages 實作

學完:把活動頁變成真實網址,不被帳單或休眠嚇到。

部署決策樹

你的頁面需要伺服器隨時運算嗎?
├─ 不用,純靜態(本課 90% 情境)
│   → GitHub Pages(免費、零帳單、repo 即備份)
├─ 收表單 / 一點點後端函式
│   → Vercel(git push 即部署,免費函式額度夠活動用)
├─ 幫「頁面即時呼叫 AI」藏 API key(模組 6)
│   → Cloudflare Workers(免費每天十萬次)
└─ 常駐後端:資料庫、即時連線、會員
    → Render(免費版 15 分鐘沒人用會休眠)

免費 tier 陷阱,先講明

Pages — 只能靜態,沒有後端就是沒有
Vercel — 免費版有流量上限,爆紅等級活動先看額度
Render — 免費版休眠,第一個訪客要等它醒
真實案例:本課 demo 全在 Pages;ai-tarot 用 Pages + Workers;mori-canvas 在 Render

GitHub Pages 三步

1. 建 repo — 名稱英文小寫加連字號(會變網址),Public
2. 上傳 — index.html 與圖片拖進去,Commit
3. 開 Pages — Settings → Pages → Deploy from branch → main / root

一兩分鐘後:https://你的帳號.github.io/repo名/

上線驗收清單

無痕視窗開網址(避免快取騙你)
真手機開一次,不是模擬
網址貼到 LINE 給自己:分享預覽卡有沒有出現?
OG 圖必須是完整網址(https:// 開頭),相對路徑不行
圖片都有出現?檔名大小寫在 GitHub 上是兩個不同檔案

更新與自訂網域

改版 = 重新上傳同名檔案 commit,一兩分鐘生效
每次 commit 都有紀錄,改壞了找得回舊版
自訂網域:Pages 填 Custom domain + DNS 設 CNAME → 帳號.github.io,再勾 Enforce HTTPS

其他分支的最短路徑

平台	第一次部署	記住
Vercel	GitHub 登入 → Add New Project → 選 repo → Deploy	push 即自動重佈;要 /api 輕後端才選它
Render	New Web Service → 選 repo → 啟動指令	免費版會休眠;到這層建議跟工程師協作
Workers	見模組 6	放「幫頁面跑腿的小程式」,不是放網頁

進階捷徑:AI agent + gh CLI

一次性準備:裝 gh(winget / brew)→ gh auth login 瀏覽器授權
之後 Claude Code / Codex 就能代替你操作 GitHub

幫我把這個資料夾發佈成 GitHub Pages:
1. gh repo create coffee-opening --public --source=. --push
2. 用 gh api 啟用 Pages(main branch 根目錄)
3. 驗證網址回 200,把最終網址給我

prompt 裡永遠不出現密碼或 token;agent 跑 gh 前會先問你,看清楚 --public 再放行。本課課程站就是這樣發佈的。

四個平台都有官方 CLI,同一套邏輯

平台	CLI	一次性授權	agent 部署
GitHub Pages	gh	gh auth login	gh repo create + 開 Pages
Cloudflare	wrangler	wrangler login	wrangler deploy(模組 6)
Vercel	vercel	vercel login	vercel / vercel --prod
Render	render	render login	git push 自動佈;CLI 觸發/看 log

通則:授權跑一次、key 永遠不進對話、對外動作放行前看一眼指令。Vercel 甚至有 vercel agent init 專門服務 coding agent。

常見坑

404 → index.html 不在 repo 根目錄,或 Pages 還在建置
OG 預覽不更新 → 平台快取;FB 有 Sharing Debugger 可強制重抓
公開 repo → 程式碼等於公開,高價券邏輯別放純前端
改了沒生效 → 瀏覽器快取,Ctrl+Shift+R 再判斷

動手做

任務 — 把模組 1 做的頁部署到 GitHub Pages,網址貼 LINE 傳給自己
預期 — 無痕視窗開得到網址,分享卡出現你的 OG 標題和圖
卡關 — 404 多半是 index.html 不在 repo 根目錄;沒圖檢查 og:image 是完整 https

上線:部署決策樹 +GitHub Pages 實作