慈濟入口網站遷移

問題

慈濟基金會的官方入口網站原本跑在 Joomla 3.10 上：版面擁擠，整套要靠 PHP 和資料庫撐著，首頁內容也只能透過舊 CMS 修改。來站的人有捐款人、志工和媒體，其中不少是用手機瀏覽的年長讀者。遷移不能弄壞舊連結，已公開的財務報告也要一直找得到。

我做了什麼

一個靜態多頁網站。header、選單、footer、麵包屑、公告這些共用介面，做成一組 tc-* Lit Web Components。舊的內容頁先爬取下來，轉成靜態 HTML，並沿用原本的 Joomla CSS，不必一次全部重寫。首頁內容、銀行匯款帳號面板、公益勸募報告和各站共用廣告，都在 schema 驅動的 /dashboard 後台編輯，資料存在我自己寫的 BaaS drust。這是 v1.5 過渡版，v2.0 會全面改版。

運作方式

1. 編輯者在後台存檔，drust 寫入資料並留下稽核軌跡。
2. drust 的 webhook 觸發 GitLab pipeline，跑完整 build。
3. build 期透過匿名唯讀 RPC，把首頁、報告頁和投影片烤成純 HTML，這些頁面載入時不需要再打資料 API 就能呈現主要內容。
4. header、選單和 footer 用 @lit-labs/ssr 在伺服端渲染成 Declarative Shadow DOM，瀏覽器載入後再接手。
5. wrangler 部署到 Cloudflare Pages，存檔後約 1 分鐘上線。另外每 30 分鐘檢查 Joomla 文章有沒有漂移，有就重建；每 6 小時也會兜底全量重建一次。

關鍵決策

• 共用元件改在伺服端渲染：原本只在瀏覽器端渲染，JS 載入前高度是 0，造成全站版面位移（CLS）。
• 嚴格烘焙：drust 連不上就中止 build，線上保留上一版。內容舊一點，總比首頁主視覺整塊空白好。
• 轉址在邊緣處理，只有一個來源：所有規則都由 data/redirects.json 產生 _redirects。早期版本把規則放進 Pages Function，結果每個靜態檔請求都得進 Functions runtime。
• 公開欄位用白名單：合作企業 logo 牆的資料表裡也有聯絡人資訊，build 只投影 6 個公開欄位，並由測試鎖定欄位集合。

成果

遷移後的網站已在 www.tzuchi.org.tw 正式上線。2026 年 1 月到 10 月由我一人完成。整個專案用 Claude Code 開發，走「spec → plan → 實作 → 審查」的流程；比較大的改動都寫成設計規格，repo 裡共 15 份。