# 這個專案適合放 GitHub Pages 嗎？ > 評估 `CreateIntelligens/trendy-tpe-2026`（Vue 3 + Vite SPA、LINE LIFF app）是否適合託管於 GitHub Pages。2026-07-23。 ## 結論（先講） **正式的 LIFF app 不適合放 GitHub Pages**。它跟自有後端＋nginx 導轉流程＋執行期設定＋LINE channel 深度耦合，搬上 GH Pages 要繞一大圈（404 hack、改 base、拆 UAT/PROD、後端加 CORS、重設 LIFF endpoint），只為省一台本來就有的 nginx，不划算，還可能踩到掃碼結果頁 404。**再加上 GH Pages 每月 100 GB 流量軟限與「不得經營商業網站」的用途條款**（見下方「用量上限」），對活動型行銷正式站更是不宜。 **唯一合理用法**：拿來放「mock 模式的公開靜態 Demo」（不打後端、給人看 UI）。 「改 public」與「用 GitHub Pages」是**兩件事**：轉 public 不代表要用 Pages；用 Pages（免費方案）才會被迫公開。 --- ## GitHub Pages 通則 - **優點**：免費、附 HTTPS＋CDN、push 即自動部署（Actions）、零伺服器維運。對純靜態 SPA 本來很合適。 - **先天限制**：只能靜態託管、**沒有伺服器端 rewrite/redirect**、專案站網址固定在 `https://<org>.github.io/<repo>/`、免費方案 Pages 站台**一律公開**（私有 repo 開 Pages 需付費方案）。 --- ## 本專案的硬傷 | 問題 | 說明 | 嚴重度 | | --- | --- | --- | | **深連結路由會 404** | 用 `createWebHistory`，`/result` 需伺服器 fallback 到 `index.html`。現在靠 nginx `try_files`；GH Pages 沒有 try_files，重整或直連 `/result` 會 404。只能用 `404.html` 複製 `index.html` 硬撐——而 `/result` 正是掃碼集點結果頁這條關鍵路徑 | 🔴 高 | | **base path 對不上** | vite base 是 `/trendytpe2026/`，但 GH Pages 專案站路徑＝repo 名 `/trendy-tpe-2026/`（有連字號、不一樣）。要嘛改 base、要嘛綁自訂網域（走根路徑 `/`） | 🟠 中 | | **失去 env.json5 執行期覆寫** | 設計是「伺服器端另放 env.json5、免重 build 熱抽換、UAT/PROD 分開」。GH Pages 只吐 repo/build 的東西，沒法在伺服器端另丟檔——env 得 commit 進 build，UAT/PROD 要拆成兩個 repo/branch，`sync-env-uat.sh` 那套失效 | 🟠 中 | | **CORS／LIFF endpoint** | 後端在 `*.trendytaipei.aitago.tw`。從 `github.io` origin 打 API 是跨網域，後端要把 `github.io` 加進 CORS 白名單；LINE LIFF 的 endpoint URL 也要改成新網址並在 channel 重設 | 🟠 中 | | **nginx 專屬技巧無法複製** | `location = /trendytpe2026 { return 301 …$is_args$args }`（補斜線又保 query）是給 LIFF deep link→`liff.state` 這條路用的。GH Pages 無法做帶 query 的 301 | 🟠 中 | | **等於強制公開** | 免費 Pages 站台一定公開，直接把「要不要 public」綁死 | 依情況 | --- ## 用量上限（官方，2026-07 查證） 來源：[GitHub Pages limits](https://docs.github.com/en/pages/getting-started-with-github-pages/github-pages-limits) | 項目 | 上限 | 性質 | | --- | --- | --- | | 來源 repo 大小 | 建議 ≤ **1 GB** | 硬性建議 | | 發佈站台大小 | ≤ **1 GB** | 硬限 | | 單一檔案 | ≤ 100 MB（git 通則，非 Pages 頁面明列） | 硬限 | | **每月流量** | **100 GB / 月** | **軟限** | | build 次數 | **10 次 / 小時** | 軟限（改用 GitHub Actions 自訂 workflow 部署則不受此限） | | 部署逾時 | 單次部署 > 10 分鐘會 timeout | 硬限 | **最關鍵的是流量與用途條款**： - ⚠️ **每月 100 GB 流量軟限**：超過 GitHub 可能限流或來信要求改善。本專案是**活動型行銷網站**（潮台北，2026/8–9 活動期），LINE 推播後可能短時間湧入大量使用者，尖峰流量撞到軟限並非不可能——尤其若把圖檔（bg-wave、stamp 等）都從 Pages 送。 - ⚠️ **用途條款**：GitHub 明訂 Pages「**不得作為免費空間來經營線上業務、電商，或主要用於促成商業交易**」。行銷活動頁是否算「commercial」有灰色地帶，但這條讓 Pages **不適合當正式商業活動的主託管**——踩到條款 GitHub 有權停用。 → 對「活動正式站」而言，這兩點本身就足以否決 GitHub Pages；你們自有的 nginx 主機沒有這些限制。對「mock demo」則無所謂（流量低、非商業）。 --- ## 唯一合理用法：公開靜態 Demo 若目的是「給人看 UI／離線展示」，GH Pages 適合放一個 **mock 模式的自足 demo**（不打後端、無 token）。注意： - PR #10 已把 mock 排除出正式 build，要做 demo 得另外做「含 mock」的 build（例如把 `import.meta.env.DEV` 換成專用 flag，或加 `build:demo`）。 - 深連結問題用 hash 路由或 `404.html` 解決。 - 這條路不影響正式部署、也不牽涉後端。 --- ## 建議 - **正式站**：維持現在的 nginx 部署（`uat/prod.trendytaipei.aitago.tw/trendytpe2026/`），不要動。 - **要對外展示** → 才考慮 GH Pages，且限定「mock demo build」。 - 別把「轉 public」跟「用 Pages」綁在一起評估——需求不同、風險不同。