你是否也曾經挑工具挑到咖啡冷掉，最後卻只想要一個能把 Markdown 變成網頁的工具？靜態網站產生器（Static Site Generator，SSG）做的事情其實很單純：在建置時把內容、模板和資料組合成 HTML、CSS、JavaScript 等檔案，部署後由主機直接送給訪客。它不會因為名字叫「靜態」就變得無聊，頂多是伺服器比較少加班。

這篇會先說明靜態網站和動態網站的差異，再比較 8 個常見工具：Jekyll、Hugo、Gatsby、Next.js、Hexo、Eleventy、VuePress 與 Nuxt。讀完後，你應該能依照內容類型、前端框架、部署方式和團隊熟悉度，挑出適合自己的方案。

目錄

什麼是靜態網站產生器？

傳統動態網站通常在訪客提出請求後，才由伺服器執行程式、查詢資料庫，再組出一頁 HTML。靜態網站產生器則把這些工作提前到建置階段：你更新內容後先執行一次 build，工具就會產生可直接部署的檔案。

因此，靜態網站通常可以放在 CDN 或一般靜態檔案主機上，不需要每次請求都執行後端程式。這有助於降低基礎設施複雜度，也方便快取。不過，登入、購物車、即時資料等需求仍然可能需要 JavaScript、API 或其他後端服務；「靜態」不是「什麼都不能做」。

靜態網站產生器的優點

  • 速度與快取較容易處理：預先產生的檔案可直接由主機或 CDN 提供。
  • 部署選擇多：只要能提供 HTML、CSS 和 JavaScript，通常就能部署。
  • 攻擊面較小：若不執行資料庫與伺服器端程式，網站本身少了一些常見的攻擊入口。
  • 內容容易版本控制：Markdown、模板和設定檔都能放進 Git，修改歷史清楚可查。

需要留意的地方

  • 每次內容變更通常都要重新建置；網站越大，建置時間越值得關注。
  • 互動功能不會自動出現，可能要另外串接 API、表單服務或前端程式。
  • 工具的模板語法、外掛生態系和部署流程各不相同，轉換成本不能假裝不存在。

換句話說，SSG 把「每次訪客來才現做」改成「先做好再上菜」。只是廚房換成 CI 之後，還是要記得按下建置按鈕。

8 個靜態網站產生器比較

以下介紹的工具不全都只做 SSG。像 Next.js、Nuxt 和 Gatsby 都支援其他渲染模式，所以比較時要看實際設定，而不是只看工具名稱。

Jekyll

Jekyll 是以 Ruby 開發的靜態網站產生器，也是 GitHub Pages 常見的建站方案。它以 Markdown、Liquid 模板和檔案式資料為核心，適合部落格、專案文件與個人網站。

優點

  • 文件和教學多，適合想從簡單部落格開始的人。
  • Liquid、YAML、JSON 等功能能支援常見的內容與模板需求。
  • GitHub Pages 對 Jekyll 有直接的建置支援，部署門檻低。

缺點

  • 需要準備 Ruby 與 Bundler 環境；不熟 Ruby 的人可能要先處理工具鏈。
  • 專案內容和外掛增加後，建置速度與相依性管理需要留意。

如果你已經使用 GitHub Pages，或偏好成熟、規範清楚的部落格工具，Jekyll 仍然是穩妥的選擇。

Hugo

Hugo 以 Go 開發，特色是建置速度快，並提供模板、內容管理、多語系、分類與短碼等功能。它很適合內容量大、需要頻繁建置，或希望用單一執行檔完成主要工具鏈的網站。

優點

  • 建置速度快，對大型內容網站特別有吸引力。
  • 內建模板、分類、多語系和短碼等常見能力。
  • 不必為了執行網站本身維護資料庫。

缺點

  • Go 模板語法與 Hugo 的內容模型需要時間熟悉。
  • 功能彈性高，也代表設定與模板可能很快變得複雜。

Hugo 的冷笑話是：它不是「急著下班」，只是把建置工作做得比你喝完咖啡還快。

Gatsby

Gatsby 是以 React 為基礎的開放原始碼框架。它曾以 GraphQL 統一資料來源與靜態建置聞名；現在除了靜態網站產生（SSG），也支援延遲靜態產生（DSG）和伺服器端渲染（SSR）等模式。

優點

  • React 元件模型適合需要高度互動介面的網站。
  • 可從 Markdown、CMS 或其他資料來源建立頁面。
  • 預先產生的頁面能搭配 CDN 部署。

缺點

  • 需要同時理解 React、Gatsby 的資料流程與外掛生態系。
  • GraphQL 與建置流程對小型網站可能顯得過重。

如果你的團隊已經熟悉 React，Gatsby 可以提供完整的資料整合與建置流程；如果只是想寫幾篇文章，先評估這套工具鏈是否值得。

Next.js

Next.js 是 React 框架，不是只限定於靜態網站的產生器。它同時支援靜態產生、伺服器端渲染和其他伺服器功能；若設定 output: 'export'，就能在建置時輸出可部署到靜態主機的檔案。

優點

  • React 生態系完整，適合需要互動元件與複雜路由的專案。
  • 可以先用靜態輸出，未來再視需求改用需要伺服器的功能。
  • 框架整合了路由、程式碼分割等常見開發能力。

缺點

  • 若只做內容型網站，React 與框架設定可能增加不必要的複雜度。
  • 靜態輸出不支援需要 Node.js 伺服器的功能，不能把所有 Next.js 能力都一起帶走。

也就是說，Next.js 像一把多功能瑞士刀：很能打，但拿來削蘋果時，先確認自己不會被旁邊那支小刀割到。

Hexo

Hexo 是以 Node.js 為基礎的部落格框架，使用 Markdown 撰寫內容，再透過主題和外掛產生網站。它的定位很明確：想快速建立部落格，就從熟悉的 JavaScript 工具鏈開始。

優點

  • 上手流程直接，適合以 Markdown 維護文章。
  • 主題和外掛能擴充版面、RSS、搜尋等功能。
  • Node.js 生態系對前端開發者較親切。

缺點

  • 主要聚焦部落格；需要複雜內容模型時，可能要自行擴充。
  • 外掛與主題的品質、維護狀態需要個別確認。

如果你要的是「文章先寫起來再說」，Hexo 通常比研究一整套企業級架構更快讓你看到首頁。

Eleventy

Eleventy 是以 JavaScript 開發的靜態網站產生器，支援 Markdown、Nunjucks、Liquid、可自訂資料檔與多種模板語言。它不要求你採用 React 或 Vue，因此能保留輸出的 HTML 結構，也方便逐步加入前端 JavaScript。

優點

  • 不綁定特定前端框架，模板和輸出方式很有彈性。
  • 適合部落格、文件、作品集等內容型網站。
  • 既能保持簡單，也能透過資料、集合與外掛逐步擴充。

缺點

  • 彈性大，代表專案結構與命名規則要自己訂好。
  • 模板語言、資料流和建置設定需要一段適應期。

如果你重視「HTML 先做好、JavaScript 有需要再加」，Eleventy 很值得試。本站本身也使用 Eleventy——這不是偏心，是編輯部的咖啡機投票結果。

VuePress

VuePress 是以 Markdown 為中心的靜態網站產生器，最初就是為 Vue.js 文件而設計，也適合建立技術文件、部落格與其他內容網站。它讓你以 Markdown 寫內容，再利用 Vue 元件和主題擴充頁面。

優點

  • 文件網站需要的導航、側邊欄與 Markdown 工作流較完整。
  • 能在內容中使用 Vue 元件，適合需要互動示範的文件。
  • 以靜態檔案部署，架站方式相對單純。

缺點

  • 不熟 Vue 的人需要先學習元件與相關概念。
  • 文件型網站的預設思路，未必完全符合高度客製化的行銷網站。

VuePress 的名字很誠實：Vue 加上 Press，基本上就是用 Vue 來「印」文件，只是印表機換成了建置工具。

Nuxt

Nuxt 是建立在 Vue 之上的全端框架，支援伺服器端渲染、靜態網站產生和混合渲染。執行 nuxt generate 時，Nuxt 會在建置階段預先產生路由，輸出可放到靜態主機的檔案。

優點

  • Vue 開發者可以使用檔案式路由、元件和模組化設定。
  • 同一個框架能依路由選擇預先產生或需要伺服器的模式。
  • 適合從內容網站逐步發展成互動式應用程式。

缺點

  • 功能範圍比單純 SSG 大，設定與部署選擇也更多。
  • 要做純內容網站時，可能比專注 SSG 的工具更重。

如果你已經在 Vue 生態系，Nuxt 是很自然的選項；如果只是要幾個 HTML 頁面，先別為了買咖啡而把整台咖啡店搬回家。

到底該選哪一個？

沒有一個工具對所有網站都最好，可以先用需求反推：

  • GitHub Pages 部落格：Jekyll。
  • 內容量大、重視建置速度：Hugo。
  • 想用 React 建立互動式網站：Gatsby 或 Next.js。
  • Node.js 部落格工作流：Hexo。
  • 不想綁定前端框架、重視乾淨輸出：Eleventy。
  • Vue 技術文件：VuePress。
  • Vue 應用程式，同時需要 SSG 與伺服器能力：Nuxt。

實際選擇前，建議用一篇真實文章做小型試作，測試模板、圖片、搜尋、部署和更新流程。工具在展示網站裡跑得很漂亮，不代表它會在你的內容和團隊習慣裡跑得漂亮。

靜態網站產生器的重點不是追逐「最快」或「最潮」，而是把內容穩定地送到讀者面前。選一個你願意長期維護、團隊也能順手使用的方案，通常比收藏八個 starter 更有用；畢竟瀏覽器已經夠多分頁了，專案不用再開一堆。

參考資料