前言

在網頁開發中，選擇合適的靜態網站生成器非常重要。過去我們使用 VuePress 來建立部落格網站，但在使用過程中遇到了一些痛點，最終決定遷移到 Hugo。本篇文章分享遷移過程中的一些心得。

當初選擇 VuePress 而非 Hugo 的原因

最初想要撰寫部落格時，已經有再 hugo 與 vuepress 間做選擇，當時覺得 hexo 與 hugo 實在是爛大街了，想要一些與眾不同的體驗。

選擇 VuePress 是基於以下幾點考量：

  • 朋友推薦，他是一名資深前端工程師，是 vuepress core-team 成員。
  • 僅需要撰寫 markdown，便能產生靜態的部落格。
  • 使用 theme plugin，可以方便的美化部落格，僅需要專注在內容的撰寫，不需要操心部落格是不是白底黑字而已。

使用 VuePress 的痛點

起初我所使用的 theme plugin 為 vuepress-theme-reco(1.x)，並且搭配 vuepress 1.x 來進行建構。或是 vitepress，然而，在使用 VuePress 的過程中，我們也遇到了一些問題：

構建速度

我的部落格是無付費的使用 Netlify 進行託管，使用 vuepress 進行建構總是會花超過三分鐘，當進行 pr 的 preview build 時將會耗費大量的執行時間。

版本更新

過了一兩年，vuepress 官方開始推動 vuepress next(2.x)，vuepress-theme-reco 的作者也著手更新 next(2.x) 版本。期間從 alpha 版本到 beta 版本，當 vuepress 與 theme plugin 有 API 不同不的問題，就容易導致 build failed，這個情況到了 rc 版本也沒有改善。

安全性

接著說，當版本無法隨時更新時，github 就會通知 security alert 或是 dependency bot 的 PR 不斷提醒。

github pr

配置複雜

再接著說，使用了 GA plugin 與 sitemap plugin 後，某種程度上需要去理解 config.js 或是 config.ts 的結構，但最初我的目的是希望僅須設定 *.yaml 或是 *.toml 就好。

甚至到了 vuepress 2.x 版本，可能因為 node 版本升級或是專案架構的升級，export config 的方式不同了，有過重新撰寫 config 的步驟，還因此需要重新熟悉整格文件，對於不熟悉 js 與前端生態的我來說極為困擾。

遷移到 Hugo 的好處

Hugo 以其快速、簡單和靈活的特性吸引了我們。遷移到 Hugo 之後，我們體會到了以下好處：

極速構建

Hugo 是用 Go 語言編寫的，其構建速度遠超 VuePress，對於大型網站尤為明顯，即便我的需求僅僅是小小的部落格仍有顯著差異。

簡單配置

Hugo 的配置文件簡單明瞭，配置已經足夠應對大部分需求，減少了手動配置的工作量。theme 採用 submodule 管理，隱性的成為文件目錄內的一份子。

強大的內容管理

Hugo 支持多種內容類型和分類方法，對於內容多樣化的部落格網站非常友好。

要維持 path，也可以不用管目錄，將所有 md 檔案放到 content 資料夾內，使用 permalinks 來讓 hugo 幫你管理目錄結構。

permalinks:
  page:
    blogs: /blogs/develop/:year/:filename

遷移時的小技巧

如何維持 SEO

在網站遷移過程中，SEO 是我們最關注的部分之一。為了確保搜尋引擎對我們的網站友好，我們需要確保以下幾點：

  • 保持 URL 結構：Hugo 允許我們自訂 URL 結構，確保與 VuePress 時期一致。這樣可以避免因 URL 變動導致的流量損失。
  • 設定 301 Redirect：如果無法完全保持 URL 一致，可以使用 301 Redirect 將舊網址導向新網址，告訴搜尋引擎內容已永久移動。

這點透過 ChatGPT 撰寫 shell script，能快速幫我們實現。或如上方提到的，使用 permalinks 來協助我們專注在內容上。

無痛遷移

這邊是指上線前的準備，PR 可以到 github 上查看：

  1. 建立一個新的 branch，並在這個 branch 研究 netlify 上 hugo 的 deploy 流程
  2. 研究完畢，確保 staging deploy 的網站各方面都沒有問題
  3. 修改 prod 的 build config，從 yarn(我原本採取的方式) 改成 hugo
  4. 在 github 上發一個 pr，讓 netlify 進行 preview building
  5. 確認 preview building 無誤，大膽的按下 merge
  6. 等待 hugo 高速的建構，並開始享受新的部落格

心得

遷移過程中，最大的挑戰是將原有的 VuePress 配置和自訂功能轉換為 Hugo 格式。然而，一旦掌握了 Hugo 的基本用法，遷移過程便順利許多。Hugo 的文檔和社群資源豐富，能夠快速找到解決問題的方法。

在不破壞已經培養好的 SEO 下（甚至會更好？）大幅度的減少寫文章的痛處，回歸內容撰寫的本質。