[譯] 2018 年，如何選擇最好的靜態站點生成器

• 原文地址：How to Choose the Best Static Site Generator in 2018
• 原文作者：Mathieu Dionne
• 譯文出自：掘金翻譯計劃
• 本文永久連結：github.com/xitu/gold-m…
• 譯者：ssshooter
• 校對者：dandyxu lihanxiang

截止到現在已經有非常多靜態站點生成器了。

即使我們已經做了 15+（還在增加）個演示和教程，也無法覆蓋所有靜態站點生成器。

我難以理解 JAMstack 和靜態頁面生態系統的開發人員的感受…

大概像愛麗絲踏入仙境那樣吧。

為了解決這個問題，我們決定把我們的知識綜合到一塊。

本文結束時，你應該能夠對各個專案都能找到對應的最佳靜態站點生成器（Static site generators 縮寫 SSG）。

你可以學習到以下內容：

1. 它們是什麼（以及為什麼要使用它們）。
2. 現在最好的靜態站點生成器是什麼。
3. 在選擇 SSG 之前的注意事項。

1. 靜態站點生成器是什麼？

如果你看本文的目標是尋找合適的 SSG，那麼你應該很清楚 SSG 是什麼啦，不過我在這裡解釋一下也無傷大雅。

靜態網站不是什麼新鮮事物。它們是我們在動態 CMS（WordPress，Drupal 等）之前用來構建 Web 的方式。

那有什麼新特性？

過去幾年中出現的現代的靜態站點生成器，擴充套件了靜態站點的功能。

簡而言之，靜態站點生成器會獲取您的站點內容，將其應用於模板，並生成純靜態 HTML 檔案，以便傳遞給訪問者。

與傳統的 CMS 相比，這一處理過程帶來了許多好處。

為什麼要使用 SSG？

每次訪問者在內容繁多的網站上跳轉，必須動態地從資料庫中提取資訊，這可能導致頁面呈現速度慢，從而使用者流失。

SSG 將已編譯的檔案提供給瀏覽器，大大減少了載入時間。

→ 安全性和可靠性

使用動態 CMS 開發的最大威脅之一是缺乏安全性。動態 CMS 複雜的後端架構產生了很多潛在風險。

而使用靜態設定，幾乎沒有使用伺服器端功能。

→ 靈活性

老舊繁瑣的傳統 CMS 不靈活。擴充套件的唯一方法是使用現有外掛，或者為某個平臺定製。如果不懂技術直接用倒是很爽，但開發人員發現自己各種被束縛。

SSG 對技術要求可能會稍高，但自由度同樣也高。他們中的大多數還有外掛生態系統，主題和易於插入第三方服務。此外，使用其核心程式語言的可擴充套件性是無限的。

→ 他們的弱點……正在消失。

隨著 SSG 生態系統的不斷髮展，很多主要問題都被新工具解決。

內容管理和管理任務對於沒有技術背景的使用者來說可能並不簡單。但好訊息是，現在有大量的 headless CMS（無頭 CMS） 可以完善你的 SSG。headless 和傳統 CMS 之間的區別在於，您只能將前者用於“內容管理”任務，而不是模板和前端內容生成。你總會發現一個適合你的需求。

一些靜態站點 CMS 直接支援SSG。例如，Jekyll 和 Hugo 的 Forestry 或者普遍適用的 DatoCMS。

如果你需要一些動態的特性，也有很多很棒的服務可供選擇：

• 實現後端功能的 Serverless 或 Webtask
• 用於部署的 Netlify
• 用於搜尋的 Algolia
• 電商方面可以考慮 Snipcart
• 使用者生成內容（如評論）可以考慮 Disqus 或 Staticman

這裡只是其中幾個例子。

通過將這些開發進度轉化為業務優勢，將 JAMstack 和靜態站點生成器釋出給你的客戶，閱讀本指南瞭解更多。

2. 應該選擇哪個靜態站點生成器？

瞭解 SSG 是什麼是一方面，弄明白哪個 SSG 更適合自己又是另一回事了。

網上有超過 400 種 SSG。如果你要是從靜態 Web 開始開發，以下內容將有助於你的決策！

我將介紹其中最好的一部分，但請記住它僅僅是所有現有 SSG 種的一小部分。完整列表建議訪問staticgen.com。

2.1 2018年最佳靜態站點生成器

在本節中，我將為你介紹那些廣為人知並且可以滿足大多數專案的需求的 SSG。這個推薦基於這些專案的熱度，也取決於我們團隊建立數十個 JAMstack demo 的經驗。

Jekyll

Jekyll 仍然是最受歡迎的 SSG，具有龐大的使用者群和大量外掛。作為個人部落格非常適合，也被電子商務網站廣泛使用。

Jekyll 對新手來說的一個主要賣點是各種 importer。它能使現有站點相對輕鬆地遷移到 Jekyll。例如，如果你有 WordPress 站點，則可以使用 importer 切換到 Jekyll。

並且，Jekyll 可以讓你專注於內容而無需擔心資料庫，更新和評論稽核，同時保留永久連結，類別，頁面，帖子和自定義佈局。

Jekyll 用 Ruby 構建，並整合到 GitHub Pages 中，因此被黑客攻擊的風險要低得多。主題可以簡單更換，自帶 SEO，並且 Jekyll 社群提供了大量的自定義外掛。

→ Jekyll 教程：

• 靜態電商網站：整合 Snipcart 與 Jekyll
• Jekyll CloudCannon CMS：構建多語言網站
• Staticman 使用者內容生成 + Jekyll 靜態網站

---

Gatsby

Gatsby 將靜態頁面帶到前端技術棧，依靠瀏覽器端 JavaScript，可重用 API 和預構建標記。這是一個易用的解決方案，可以使用React.js，Webpack，現代 JavaScript，CSS 等建立 SPA（單頁應用程式）。

Gatsby.js 是一個靜態 PWA（Progressive Web App）生成器。它僅提取關鍵的 HTML，CSS，資料和 JavaScript，以便您的網站儘可能快地載入。

其豐富的資料外掛生態系統允許網站從無頭 CMS，SaaS 服務，API，資料庫，檔案系統等渠道拉取資料。

Gatsby 應用廣泛，對於需要利用來自多個來源的資料的站點而言，它是不二之選。它正在走向頂峰，如果它在未來幾個月成為頭號 SSG，請不要感到驚訝。

哦，它也可能解決了 SSG 最大的開發難題之一：長原子構建（long atomic build）。創作者 Kyle Matthews 以 Gatsby 為主最近建立了一家公司。Gatsby Inc. 將為 Gatsby 網站構建一個雲基礎架構，可以實現增量構建，甚至可以說是改變了 SSG 的遊戲規則了。

→ Gatsby 教程：

• Snipcart & Gatsby 搭建 ReactJS 無後臺電商網站
• Grav CMS + Gatsby + GraphQL
• 靜態表單，授權，無伺服器功能（Gatsby + Netlify Demo）

---

Hugo

一個易於設定，使用者友好的 SSG，部署執行網站不需要太多配置。

Hugo 以其構建速度而聞名，而其資料驅動內容的特性可以輕鬆地基於 JSON/CSV 源生成HTML。你通過很少的程式碼就能使用預先構建的模板快速設定 SEO，評論，分析和其他功能。

此外，Hugo 為多語言網站提供全面的 i18n 支援，受眾面大大增加。這對於想要本地化的電商網站特別有用。

最近，他們釋出了一種先進的主題功能，這可以讓你使用可重用元件構建 Hugo 站點。

→ Hugo 教程：

• 搭建高速靜態電商網站
• Hugo 的靜態電子商務與 Forestry.io 中的產品管理
• Forestry.io & Hugo 靜態電商網站
• 6 種簡易工具給你優秀，快速的靜態電商體驗

---

Next.js

Next.js 本質上不只是 SSG，它是一個用於靜態服務端渲染的 React 輕量框架。

Next.js 構建可以在瀏覽器端和伺服器上都可執行的通用 JavaScript 應用程式。這個過程提升了這些應用程式在首頁載入和搜尋引擎優化功能方面的表現。Next.js 包括自動程式碼拆分，簡單的前端路由，基於 webpack 的開發環境和任何 Node.js 伺服器實現等一整套功能。

JavaScript 現在無處不在，React 是現在最流行的 JS 前端框架，所以它絕對值得一看。

→ Next.js 教程：

• Next.js 教程：SEO 友好的 React 電商單頁應用
• 用 Next.js 客戶端渲染 ReactJS 應用

---

Nuxt.js

名字和功能都與 Next.js 相似，但 Nuxt 是用於建立 Vue.js 應用程式的框架。它可以在抽象出客戶端/伺服器分佈的同時啟用 UI 呈現。它還有一個用於構建靜態 Vue.js 應用程式的 nuxt generate 選項。

這種用於無伺服器的簡約框架使用十分簡單，但它更傾向於程式化實現而不是傳統的 DOM 腳手架。

由於 Nuxt 是 Vue 框架，因此強烈建議你先了解 Vue，當然之前使用 Vue 的開發者會感到賓至如歸。隨著 Vue.js 的迅速崛起，我們也用 Vue 重構了專案，所以最後當然要推薦一下它啦。

如果你是 Vue.js 使用者，你也可以瞭解一下VuePress。

→ Nuxt 教程：

• Cockpit CMS & Nuxt.js 全棧教程
• Nuxt.js 伺服器端渲染、路由與頁面跳轉

---

2.2 主要考慮因素

本節將採用另一種方法，幫助你找到最適合自己的 SSG。

在選擇合適的工具之前，你應該先問自己這些問題：

1. 您是否需要開箱即用的大量動態功能和擴充套件？

這裡有兩個流派：

1. 選擇一個提供大量開箱即用的功能的靜態站點生成器。不需要大量的外掛或自己構建一切。如果你是這樣想的，Hugo 提供了大量內建功能，其次 Gatsby 也挺適合於這個情況。
2. 選擇功能較少的 SSG，但提供廣泛的外掛生態系統，並且允許你根據需要擴充套件和自定義設定。這可能是 Jekyll 最大的優勢之一。它長期以來如此熱門，社群也逐漸完善，各種各樣的外掛也隨之而出現。為了進一步推動這一概念，Metalsmith 或 Spike 將設定交給外掛，其具有高度可定製性讓其無所不能。要權衡的是，它對技術要求很高，但如果你想學習 SSG 執行的語言，這可能是一線希望！

2. 你在意構建和部署時間嗎？

正如我已經提到的，一般靜態站點的速度就已經很有優勢，但是個別 SSG 更是非一般的快。

這局的贏家明顯是 Hugo。它以其超快的構建時間而聞名，可以在幾毫秒內將內容和模板組合成一個簡單站點，以這個速度幾秒鐘內可以完成數千頁。

諸如 Nuxt 之類的響應式框架也非常適合效能和搜尋引擎優化。

Jekyll 在這方面就不怎麼樣了 —— 許多開發人員抱怨它的構建速度。

3. 你想用 SSG 處理什麼型別的專案？

各個 SSG 實現的目的並不相同，選擇前想清楚你的網站型別可以省掉很多麻煩事。

→ 部落格或小型個人網站：

Jekyll，答案顯而易見。它本身就為部落格而生，它可以抽象出部落格的主要內容。Hexo 是搭建簡單部落格平臺的另一個選擇。不過，其實大多數 SSG 都可以做部落格或個人網站。

也可以瞭解一下：Hugo，Pelican，Gatsby。

→ 文件：

GitBook 使編寫和維護高質量的文件變得容易，現在已是最流行的文件工具。

也可以瞭解一下 Docusaurus，MkDocs。

→ 電子商務：

您還可以用 SSG 生成電商網站（如前面的教程中所示）。但電商網站不好做，需要考量的東西十分多：使用者體驗方面，例如速度和UI定製，搜尋引擎優化也是必不可少的。

大型電商網站需要 CMS 進行產品管理，這個時候就要思考哪個 SSG 更適合你選擇的無頭 CMS。

根據我們的經驗，我們推薦 Gatsby 和 Nuxt 這樣的響應式框架。但如果你還是需要一切從簡，你可以考慮 Jekyll 或 Hugo。

→ 營銷網站：

之前還沒提過 Middleman。它的與眾不同之處在於它可以靈活搭建任何型別的網站，而不是專注於部落格引擎。這對於高階營銷網站來說非常棒，MailChimp 和 Vox Media 等公司也將它用於自己的網站。

也可以瞭解一下 Gatsby，Hugo，Jekyll。

4. 你是否希望自己修改網站和生成器？是否需要使用自己精通的語言？

以下是各個框架使用的語言：

• JavaScript：Next.js & Gatsby（適用於 React）、Nuxt & VuePress（適用於 Vue）、Hexo、GitBook、Metalsmith、Harp、Spike。
• Python：Pelican、MkDocs、Cactus.
• Ruby：Jekyll、Middleman、Nanoc、Octopress.
• Go：Hugo、InkPaper。
• .NET：Wyam、pretzel。

5. 非技術使用者是否需要管理此網站？

開發併網站構建後，網站內容的管理員是誰？在大多數情況下，他們不是技術人員，他們很難通過程式碼進行內容管理。

這種情況應該將有無頭 CMS 的 SSG 放在首位。CMS 的選擇很重要，找到可以對接的 SSG 同樣重要。

Gatsby 的新功能，使用 GraphQL 實現。這裡不解釋 GraphQL 是啥，簡而言之，它可以實現更快更簡潔的資料查詢。

6. 你依賴社群和同行的幫助嗎？

如果答案是肯定的，請考慮前面列出的頂級靜態站點生成器。這些都是目前最受歡迎的 SSG，社群活躍，案例研究和各種資源的支援都不會落後。

注意，現代靜態網站和 JAMstack 仍然是一個相對較新的生態系統的一部分，如果你用的工具使用者不多，踩到坑可能就要自己填了。

總結

到最後我還是不會告訴你，你應該選擇什麼 SSG，你應該按自己的情況自己做選擇。

現在你可以認真思考一下真正吸引你的是什麼。有一件事是肯定的，SSG 一定就會給你自由和靈活的感覺！

你會推薦什麼靜態網站生成器？JAMstack 生態系統將何去何從？我真的很想聽聽大家的意見，請在下面的評論中加入討論！

如果您喜歡這篇文章，就在 Twitter 上分享一下吧！

首發地址 Snipcart blog 本文地址（英語） newsletter

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

---

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。