次世代 Hugo

無駄を削ぎ、本質を研ぐ

Hugo 優缺點比較

Sam Xiao's Avatar 2025-06-26

儘管每年都有新的 SSG 問世,但 Hugo 仍然是很多人的首選,本文分析 Hugo 的優缺點,可視每個人的需求決定適不適合 Hugo。

Version

Hugo 0.121.1

優點

安裝容易

Hugo 直接提供各平台的 binary 版本,不必如 Ruby、 Node.js 或 Python 為環境版本傷腦筋,目前也原生支援 Apple M1 系列 CPU。

編譯速度快

SSG 會面臨的終極問題都是隨著 markdown 檔案增加,編譯速度會斷崖式下滑,尤其 JavaScript SSG 都有此問題,Hugo 則充分發揮 Go 速度優勢。

官方支援

JavaScript SSG 會以眾多的 plugin 或 package 組合而成,但 Hugo 則傾向於由官方直接支援,若你不喜歡 JavaScript 需搭配一堆 plugin 與 package 拖慢速度,則 Hugo 這種 single binary 很適合你。

內建 DartSCSS

很多人不喜歡 SCSS 並不是討厭其超強功能,而是討厭其環境搭建困難,因而避而遠之,但這在 Hugo 並不存在,因為 Hugo 內建 Dart Sass,因此在 Hugo 可無痛使用 SCSS

缺點

Go template

Hugo 不使用前端常用的 Vue 或 React,而是自家的 Go template,這也造成一定的學習門檻,很多人因此而卻步,但這也是 Hugo 編譯速度超快的原因之一。

JavaScript 整合

Hugo 畢竟使用 Go 開發,與 JavaScript 生態系的整合問題比較多,典型的就是 Hugo 與 Tailwind CSS 搭配問題,直到最近才由 Hugo 官方解決,若要搭配一些較新的 JavaScript package 或 tooling,可能會遇到一些未知的問題。

Plugin 支援

由於 Hugo 傾向於由官方解決,不像 JavaScript SSG 可以掛上各式各樣 plugin 支援,因此很多功能必須自行處理,或等 Hugo 官方解決,因此靈活性沒 JavaScript SSG 佳。

Partial 只適用於 HTML

Partial 雖然觀念上是 component,但僅支援 HTML,不像 Vue 將 HTML/CSS/JavaScript 寫在同一個 .vue 中,雖然可搭配 Tailwind CSS 與 Alpine.js 將 CSS 與 JavaScript 寫在 partial 內。

缺乏動態支援

Hugo 本質上仍是靜態網站,若要達到如 登入搜尋 … 等動態功能,可搭配 Htmx。

Conclusion

  • 很多人認為要先學會 Go 才能駕馭 Hugo, 這完全是錯誤觀念,進而改選擇 JavaScript SSG,事實上只有 Go template 稍微帶有 Go 風格而已,主戰場仍是 HTML/CSS/JavaScript
  • Hugo 比較適合傳統 HTML/CSS/JavaScript 分開的 非侵入式 寫法,若要 HTML/CSS/JavaScript 一起寫在 Template、Block 或 Partial 的寫法,可搭配 Tailwind CSS 與 Alpine.js
  • Hugo 是 CLI 也是 framework,且已經發展多年趨於穩定,目前改版大多只是為了支援 JavaScript 日新月異的生態系統而已,因此可安心用於 Production