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

時間 2019-11-16

原文原文鏈接

原文地址：How to Choose the Best Static Site Generator in 2018

原文做者：Mathieu Dionne

譯文出自：掘金翻譯計劃

本文永久連接：github.com/xitu/gold-m…

譯者：ssshooter

校對者：dandyxu lihanxiang

截止到如今已經有很是多靜態站點生成器了。css

即便咱們已經作了 15+（還在增長）個演示和教程，也沒法覆蓋全部靜態站點生成器。前端

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

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

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

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

你能夠學習到如下內容：webpack

它們是什麼（以及爲何要使用它們）。
如今最好的靜態站點生成器是什麼。
在選擇 SSG 以前的注意事項。

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

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

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

那有什麼新特性？github

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

簡而言之，靜態站點生成器會獲取您的站點內容，將其應用於模板，並生成純靜態 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 教程：

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 教程：

Hugo

一個易於設置，用戶友好的 SSG，部署運行網站不須要太多配置。

Hugo 以其構建速度而聞名，而其數據驅動內容的特性能夠輕鬆地基於 JSON/CSV 源生成HTML。你經過不多的代碼就能使用預先構建的模板快速設置 SEO，評論，分析和其餘功能。

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

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

→ Hugo 教程：

Next.js

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

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

JavaScript 如今無處不在，React 是如今最流行的 JS 前端框架，因此它絕對值得一看。

→ Next.js 教程：

Nuxt.js

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

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

因爲 Nuxt 是 Vue 框架，所以強烈建議你先了解 Vue，固然以前使用 Vue 的開發者會感到賓至如歸。隨着 Vue.js 的迅速崛起，咱們也用 Vue 重構了項目，因此最後固然要推薦一下它啦。

若是你是 Vue.js 用戶，你也能夠了解一下VuePress。

→ Nuxt 教程：

2.2 主要考慮因素

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

在選擇合適的工具以前，你應該先問本身這些問題：

1. 您是否須要開箱即用的大量動態功能和擴展？

這裏有兩個流派：

選擇一個提供大量開箱即用的功能的靜態站點生成器。不須要大量的插件或本身構建一切。若是你是這樣想的，Hugo 提供了大量內置功能，其次 Gatsby 也挺適合於這個狀況。
選擇功能較少的 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。