hugo wordpress

搬家：從 Wordpress 轉換到 Hugo

Posted by clsung on Sunday, January 5, 2025

為什麼選擇 Hugo？

最近我將個人網站從 WordPress 遷移至 Hugo。跟 WordPress 不一樣，Hugo 是屬於靜態網站生成器。這次遷移不僅讓網站讀取速度明顯提升，也簡化了整個工作流程，除了還在找好用的編輯器以外….

為什麼不(再)用 WordPress

WP 的好處以及對我的差別（下面三段都是 AI 寫的）

  1. 廣泛的 Plugins 與生態系
    WordPress 的豐富資源可以滿足幾乎所有類型的網站需求，無論是個人部落格還是商業網站。但對我沒差，我目前也沒有商業網站的需求。

  2. 易於使用與快速上手
    設計直觀的後台系統讓用戶無需技術背景也能輕鬆管理網站。對我也沒需要，雖然我為了要轉換到 Hugo 後還是要重新上手一下相關的技能。

  3. 托管選項靈活
    市面上有大量專為 WordPress 處理的托管服務，從便宜的共享空間到高效的雲託管均可選擇。但我都沒有需要，現在也都在用自己的網站，所以也沒有……什麼好說的。

為什麼要換？

  1. 性能瓶頸
    基本上有沒有連資料庫，以及是不是靜態網站，這兩個因素就決定了。雖然說 php (WP) 還是可以用一些 plugins 來解決，但這對於內容穩定、變化不大（也就是很少更新…）的網站來說是一種資源浪費。

  2. 維護與安全負擔
    Plugins 和核心版本的更新，尤其是為了應對安全漏洞，可能導致額外的工作量（對我來說）和系統不穩定。

  3. 有沒有需要自有評論的功能 我覺得是蠻重要的，畢竟我寫的東西，有可以放評論的地方是還不錯，不過為了這個也一定要放在資料庫裡，對我並不是必需的，反倒是如果是放在開放或社群相關的地方，我覺得是還不錯的。

為什麼選擇 Hugo？

Hugo 用 Go 寫的，所以快，但快不是重點，重點是：

  1. 生成靜態頁面
    Hugo 使用 Go 語言開發，直接編譯好的執行檔在一秒內可以生成上千個頁面。當然可能不止一秒，但這個層級的速度我是不會覺得有誇張。

  2. 專注內容創作的 Markdown 支援
    使用 Markdown 編寫內容，簡單直觀，完全不用擔心格式問題。但有沒有好的 Editor 是另一回事。我目前是使用 Cursor 來寫，但還是覺得有點不方便。

  3. 核心網頁指標 (Core Web Vitals) 的優化
    靜態網站架構使頁面加載速度更快，提升了用戶體驗和搜尋引擎最佳化效果。

  4. 無需資料庫支持
    靜態 HTML 的結構不僅減少了維護成本，也徹底杜絕了資料庫相關的安全風險。還有一點就是，我就減少 download mariadb 的 docker image ，體感上就是讓我的 VPS 的空間可以多一點。

遷移過程的實踐分享

1. 準備與工具

  • 安裝 Hugo 並設定開發環境，基本上不管是 linux 或 mac 應該都很直觀。

  • 使用工具將 WordPress 內容導出為 Markdown 文件，它會將 wordpress 的 post 轉換成 markdown 的格式，同時變成一個 zip 檔案。

2. 主題選擇與定制

Hugo Themes提供很多主題，可根據需求進行調整。我選擇了hugo-theme-cleanwhite，這個記得要在 hugo.toml 裡面設定。

3. 兩種方式進行部署

  • 直接使用 Hugo 生成的靜態文件，可以部署到任何可以跑 Hugo 的環境，例如：

    • hugo 生成後，直接把 public 目錄丟到任何可以跑 Hugo 的環境，例如：
    • 在測試階段用 hugo server -D 來跑，可以在這樣在本機即時看到效果。

  • 我（還）沒有用，但未來可能會用的方式：配合 GitHub 進行版本控制，透過 GitHub Actions 自動更新內容。

4. nginx 的設定

  • 因為是用第一種方式，所以需要設定 nginx 的設定，讓它指向 public 目錄。 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

services:
   hugo:
     image: nginx
     container_name: hugo
     restart: unless-stopped
     volumes:
       - ${BLOG_CONTENT}:/var/www/html/blog
       - ./nginx-hugo.conf:/etc/nginx/conf.d/hugo.conf
     environment:
       VIRTUAL_HOST: ${DOMAINS}
       LETSENCRYPT_HOST: ${DOMAINS}
       LETSENCRYPT_EMAIL: ${LETSENCRYPT_EMAIL}

遷移後的觀察與成果

性能測試結果

遷移後，在 Google PageSpeed Insights 測試中獲得了 94 分，在沒特別調整的情況下，還算可以接受。

google page speed 94

TODO

  • 首頁很亂，之前太多 category 了，要整理一下。
  • local commit push 後，要在 remote 自動 pr 同時 build。
CATALOG