靜態網站架構大突破：告別 Page Bundle，擁抱 React 新生態

在前端開發的旅程中，我們總會遇到許多選擇的十字路口。今天，我想分享我對靜態部落格架構的一些思考與轉折點。

Page Bundle 的誘惑

起初，我對 Page Bundle 抱有極高期待。想像一下，一篇文章和它所有相關資源都整齊地放在同一個資料夾中 - 這是多麼直覺且優雅的解決方案！當需要遷移或備份時，只需簡單地移動或壓縮整個資料夾就能完成，無需擔心資源連結破損或遺失。

無論是 Markdown 還是 MDX 格式，Page Bundle 看起來都是完美的解決方案，尤其對於經常需要在不同平台間遷移內容的創作者而言。

現實的挑戰

然而，深入研究後，我發現了一個殘酷的事實：Page Bundle 並非業界主流。安裝的幾個 Hugo 模板竟然都不支援 Page Bundle 架構！堅持使用非主流方案意味著未來可能面臨更高的維護成本。

這時我必須思考：如果不用 Page Bundle，怎樣才能高效地遷移資料？

靈光乍現的解決方案

與 AI 進行討論後，我注意到一個關鍵點：

靜態資源通常集中存放在固定目錄下。這不僅方便管理，更與網站優化密切相關。在部署階段，圖片往往需要進行優化處理，以減少加載時間，提升用戶體驗。

這一認知帶來了解決方案的靈感：我只需要透過正則表達式(regex)或其他過濾器，從文檔中提取所有資源連結，生成一個 JSON 檔案，然後根據這個檔案選擇性地遷移相關資源。

這樣一來，即使不使用 Page Bundle，我也能高效地完成資料遷移工作！

轉向 React 生態系

解決了資料遷移的問題後，我可以將注意力轉向更具挑戰性的領域 - React 生態系統。

在 Vercel 這類邊緣計算平台上，React 應用能夠高效且低成本地運行。結合 ISR (Incremental Static Regeneration) 功能，甚至能夠處理電子商務等複雜任務，而無需過度依賴後端服務。

接下來，我計劃深入研究四大 React 靜態站生成器：

• Next.js
• Gatsby
• Remix
• Astro

工作流程自動化

受科技皮皮蝦視頻啟發，我決定先做一件事：使用 MCP (Mission Control Panel) 來控制 Vercel 和 Git。這樣一來，只要有模板，就能自動建立項目，並與本地開發環境（VSCode、Cursor、Windsurf）無縫集成。

雖然 Replit 和 Bolt 也很方便，但與 MCP 整合似乎有些麻煩，暫時擱置不談。

總結

有時候，我們需要放下執著，接受更主流、更實用的解決方案。Page Bundle 雖然直覺，但在現實應用中可能並非最佳選擇。透過合理利用正則表達式和資源管理策略，我們同樣能達成高效的內容管理目標。

下一站，React 全家桶！期待在這個充滿可能性的領域中探索更多創新解決方案。

大家有什麼關於靜態站點生成器的經驗或建議嗎？歡迎寫信給我討論 [email protected]！