今天做了一個決定：把部落格的底層框架從 Hugo 正式遷移到 Astro。

過去使用 Hugo 的這段時間，它極致的建置速度確實令人印象深刻，作為老牌的靜態網站產生器（SSG），它的穩定性無庸置疑。然而，隨著現代前端技術的快速發展，Astro 所帶來的全新架構與極佳的開發者體驗（DX），最終還是讓我決定動手進行這次的「大搬家」。

為什麼決定換成 Astro？

雖然 Hugo 很好，但 Astro 解決了幾個在經營部落格時更有感的痛點，並帶來了更靈活的優勢：

1. 群島架構（Islands Architecture）與極致效能： Astro 最吸引人的一點就是「預設零 JavaScript」。它在建置時會將所有的 UI 元件渲染成純 HTML，只有在真正需要互動的區塊（Islands）才會載入少量的 JS。這對於以閱讀為主的部落格來說，首屏載入速度與 SEO 表現都達到了全新的高度。
2. 現代化的開發體驗與元件化： 有別於 Hugo 必須使用 Go Template，Astro 採用了類似 JSX 的語法，甚至允許你混用 React、Vue 或 Svelte 等框架的元件。在刻劃網站 UI 或建立重複使用的版面佈局（Layouts）時，直覺且好維護許多。
3. Content Collections 的型別安全： 對於擁有大量 Markdown 文章的部落格來說，Astro 的 Content Collections 功能是一大福音。它內建了 Frontmatter 的 Schema 驗證，只要文章的標籤或日期格式寫錯，在開發階段就會直接報錯，大大減少了除錯的時間。

遷移過程的挑戰與樂趣

從 Hugo 搬家到 Astro，最棒的一點是「內容資產」幾乎可以無痛轉移。因為兩者都支援 Markdown 格式，我只需要把舊文章直接搬進 Astro 的 src/content/ 目錄下即可。

主要的工程落在重新打造版面與重寫資料拉取邏輯。把原本 Hugo 裡複雜的分類（Categories）和標籤（Tags）生成邏輯，全部換成熟悉的 JavaScript / TypeScript 來處理，不僅程式碼變得更乾淨，未來的擴充性也變得更高。

順滑的自動化部署

完成本機的開發與測試後，部署流程依然維持現代化且高效的作法。透過 GitHub Actions 建立起 CI/CD 的自動化流水線，將建置好的靜態檔案直接部署到 Cloudflare Pages 上。現在只要把寫好的 Markdown 文章推送到 Git 儲存庫，幾分鐘內全球的節點就會自動更新，整個發布體驗一氣呵成。

結語

這次從 Hugo 到 Astro 的轉換，與其說是更換工具，不如說是對個人網站架構的一次現代化升級。Astro 不僅帶來了更快的網頁載入速度，也讓後續的網站維護與新功能開發變得更加令人期待。

全新的部落格已經上線，接下來就是繼續產出好內容了！

留言

留言載入中...