流行的靜態站點生成器概述

所有靜態頁面生成器都有一個看似簡單的任務：生成靜態 HTML 文件及其所有資產。

提供靜態 HTML 文件有許多明顯的好處，例如更輕鬆的緩存、更快的加載時間和更安全的整體環境。 每個靜態頁面生成器產生不同的 HTML 輸出。

然而，這篇文章的目的不是深入討論它們機制的複雜性，而是比較每個框架提供的功能集，並突出每個框架的獨特方面和特性。

流行的靜態頁面框架概述

在這篇文章中，我們將仔細研究以下靜態頁面框架： Jekyll 、 Middleman 、 Hugo和Hexo 。 這些絕不是唯一的生成器，但它們是最常用的生成器，由大型社區和大量有用資源提供支持。

讓我們仔細看看它們並比較它們的基本特徵：

• 傑基爾
  • 用紅寶石寫的，
  • 支持開箱即用的 Liquid 模板引擎；
• 中間人
  • 用紅寶石寫的，
  • 支持開箱即用的 ERB 和 Haml 模板引擎；
• 雨果
  • 用圍棋寫的，
  • 支持開箱即用的 Go 模板引擎；
• 海索
  • 用 JavaScript 編寫，
  • 開箱即用支持 EJS 和 Pug。

注意：值得指出的是，這些靜態頁面生成器中的每一個都可以使用插件和擴展進行自定義和擴展，從而滿足您的大部分或全部需求。

設置靜態站點生成器

這些框架中的每一個的文檔都很全面，而且非常出色，您可以在此處獲取它：

Jekyll 文檔

中間人文檔

雨果文檔

Hexo 文檔

如果您只是按照安裝指南進行操作，您應該會在幾分鐘內準備好開發環境。 安裝後，您可以通過從終端運行命令來啟動新項目。

例如，這是您在不同框架中啟動新項目的方式：

傑基爾

jekyll new my_website

中間人

middleman init my_website

雨果

hugo new my_website

海索

hexo init my_website

配置

配置通常存儲在單個文件中。 每個靜態網站生成器都有其細節，但所有四個中的許多設置都是相同的。

您可以指定存儲源文件的位置或輸出構建源的位置。 通過設置 exclude 或skip_render選項跳過不會在構建過程中使用的數據總是有用的。 您還可以使用配置文件來存儲項目標題或作者等全局設置。

遷移到靜態生成器

如果您已經準備好一個 Wordpress 項目，您可以相對輕鬆地將其遷移到靜態頁面生成器。

對於 Jekyll，您可以使用 Jekyll Exporter 插件。 對於 Middleman，您可以使用名為 wp2middleman 的命令行工具。 您可以使用 Wordpress 到 Hugo Exporter 進行 Hugo 遷移，對於 Hexo，您可以閱讀我去年寫的關於如何從 Wordpress 遷移到 Hexo 的指南。

原理幾乎相同且非常簡單——首先將所有內容導出為合適的格式，然後將其包含在正確的文件夾中。

內容

靜態頁面生成器使用 Markdown 作為主要內容。 Markdown 功能強大，可以快速學習。 由於其簡單的語法，使用 Markdown 編寫內容感覺很自然。 文檔看起來乾淨整潔。

您應該將文章放在全局配置文件中指定的文件夾中。 文章名稱應遵循生成器指定的約定。

在 Jekyll 中，您應該在_posts目錄中放置一篇文章。 文章名稱應採用以下格式：YEAR-MONTH-DAY-title.MARKUP。 其他生成器也有類似的規則，它們提供了創建新文章的命令。

以下是在 Middleman、Hugo 和 Hexo 中創建新文章的命令：

中間人

middleman article my_article

雨果

hugo new posts/my_article.md

海索

hexo new post my_article

在 Markdown 中，您僅限於一組特定的語法。 對我們來說幸運的是，所有生成器也可以處理原始 HTML。 例如，如果要添加具有特定類的錨點，可以像在常規 HTML 文件中一樣添加它：

This is a text with <a class="my-class" href="#">a link</a> 。

前沿問題

Front matter 是 Markdown 文件頂部的數據塊。 您可以設置自定義變量來存儲創建更好內容所需的數據。 您可以在前面定義一個變量，而不是在 Markdown 中編寫 HTML，這可能導致文檔結構混亂和醜陋。

例如，這是您可以向文章添加標籤的方式。

 tags: - web - dev - featured

靜態頁面生成器中的模板

靜態頁面生成器使用模板語言來處理模板。 要將數據插入模板，您需要使用標籤。 例如，要在 Jekyll 中顯示頁面標題，您可以編寫：

{{ page.title }}

讓我們嘗試在Jekyll 中的帖子中顯示前文中的標籤列表。 您需要檢查變量是否可用。 然後，您需要遍歷標籤並將它們顯示在無序列表中。

 {%- if page.tags -%} <ul> {%- for tag in page.tags -%} <li>{{ tag }}</li> {%- endfor -%} </ul> {%- endif -%}

中間人：

 <% if current_page.data.tags %> <ul> <% for tag in current_page.data.tags %> <li><%= tag %></li> <% end %> </ul> <% end %>

雨果：

 {{ if .Params.Tags }} <ul> {{ range .Params.Tags }} <li>{{ . }}</li> {{ end }} </ul> {{ end }}

海索：

 <% if (post.tags) { %> <ul> <% post.tags.forEach(function(tag) { %> <li><%= tag.name %></li> <% } ); %> </ul> <% } %>

注意：最好檢查變量是否存在以防止構建過程失敗。 它可以為您節省數小時的調試和測試時間。

使用變量

靜態頁面生成器提供可用於處理模板的全局變量。 不同的變量類型持有不同的信息。 例如，Hexo 中的全局變量 site 保存有關站點的帖子、頁面、類別和標籤的信息。

了解可用變量以及如何使用它們可以使開發人員的生活更輕鬆。 Hugo 使用 Go 的模板庫進行模板化。 如果您不熟悉上下文或他們如何稱呼它的“點”，則在 Hugo 中使用變量可能會出現問題。

Middleman 沒有全局變量。 但是，您可以打開 middleman-blog 擴展，它允許您訪問一些變量，例如文章列表。 如果要添加全局變量，可以通過將數據提取到數據文件來實現。

數據文件

當您想要存儲 Markdown 文件中不可用的數據時，您應該使用數據文件。 例如，如果您需要保存要在網站頁腳中顯示的社交鏈接列表。 所有靜態頁面生成器都支持 YAML 和 JSON 文件。 此外，Jekyll 支持 CSV 文件，Hugo 支持 TOML 文件。

讓我們將這些社交鏈接存儲在我們的數據文件中。 由於所有生成器都支持 YAML 格式，我們將數據保存在 social.yml 文件中：

 - name: Twitter href: https://twitter.com/malimirkeccita - name: LinkedIn href: http://github.com/maliMirkec/ - name: GitHub href: https://www.linkedin.com/in/starbist/

Jekyll 默認將數據文件存儲在_data目錄中。 Middleman 和 Hugo 使用數據目錄，Hexo 使用source/_data directory 。

要輸出數據，您可以使用以下代碼：

傑基爾

{%- if site.data.social -%} <ul> {% for social in site.data.social %} <li><a href="{{ social.href }}">{{ social.name }}</li> {%- endfor -%} </ul> {%- endif -%}

中間人

<% if data.social %> <ul> <% data.social.each do |s| %> <li><a href="<%= s.href %>"><%= s.name %></li> <% end %> </ul> <% end %>

雨果

{{ if $.Site.Data.social }} <ul> {{ range $.Site.Data.social }} <li><a href="{{ .href }}">{{ .name }}</a></li> {{ end }} </ul> {{ end }}

海索

<% if (site.data.social) { %> <ul> <% site.data.social.forEach(function(social){ %> <li><a href="<%= social.href %>"><%= social.name %></a></li> <% }); %> </ul> <% } %>

幫手

模板通常支持數據過濾。 例如，如果你想讓標題大寫，你可以這樣做：

{{ page.title | upcase }}

Middleman 有類似的語法：

<%= current_page.data.title.upcase %>

Hugo 使用以下命令：

{{ .Title | upper }}

Hexo 有不同的語法，但結果是一樣的。

<%= page.title.toUpperCase() %>

靜態頁面生成器如何處理資產

資產管理在靜態頁面生成器中的處理方式不同。 Jekyll 會在任何位置編譯資產文件。 Middleman 僅處理存儲在源文件夾中的資產。 Hugo 中資產的默認位置是資產目錄。 Hexo 建議將資產放在全局源目錄中。

SASS

Jekyll 開箱即用地支持 Sass，但您應該遵循一些規則。 Middleman 還支持開箱即用的 Sass。 Hugo 通過 Hugo Pipes for Sass 編譯 Sass。 Hexo 通過插件實現。

ES6

如果你想使用 es6 的現代 JavaScript 特性，那麼你應該安裝一個插件。 可能有多個版本的類似插件，因此您可能需要檢查代碼或查看未解決的問題或最新提交以找到最佳版本。

圖片

默認情況下也不支持圖像優化。 此外，像 es6 插件一樣，有不止一個插件可以優化圖像。 做好功課並嘗試找到最適合這項工作的插件。 或者，您可以使用第三方解決方案。 在我使用 Hexo 構建的博客中，我使用的是 Cloudinary 免費計劃。 我開發了一個 cloudinary 標籤，並通過 Cloudinary 轉換提供響應式和優化的圖像。

插件、擴展

靜態頁面生成器具有強大的庫，可讓您自定義網站。 每個插件都有不同的用途。 您可以找到範圍廣泛的插件，從 LiveReload 以獲得更好的開發環境到生成站點地圖或 RSS 提要。

您可以編寫一個新的插件或擴展。 在您這樣做之前，請檢查是否存在類似的插件。 請參閱 Jekyll 插件列表、Middleman 擴展和 Hexo 插件。 Hugo 沒有插件或擴展。 但是，它確實支持自定義簡碼。

Markdown 中的簡碼

簡碼是您可以放置​​在 Markdown 文檔中的代碼片段。 這些片段輸出 HTML 代碼。 Hugo 和 Hexo 支持簡碼。 有內置的簡碼，比如 Hugo 中的圖：

{{< figure src="/lint/to/image.jpg" title="My image" >}}

Hexo youtube 簡碼：

{% youtube video_id %}

如果您找不到合適的短代碼，您可以創建一個新的。 例如，Hexo 不支持 CanIUse 嵌入，我開發了一個支持 CanIUse 嵌入的新標籤。 不要忘記在 npm 或官方生成器站點上發布您的插件。 如果您這樣做，社區將不勝感激。

內容管理系統

靜態頁面生成器對於非技術人員來說可能是開銷。 學習如何使用命令或 Markdown 對每個人來說都不是一件容易的事。 在這種情況下，用戶可以從 JAMstack 站點的內容管理系統中受益。 在此列表中，您可以找到最適合您需求的系統。 知道配置 CMS 需要一些時間，但從長遠來看，您和其他用戶可以從更有效地發佈內容中受益。

獎勵：JAMstack 模板

如果您不想在配置項目上花費太多時間，您可以從 JAMstack 模板中受益。 其中一些模板已經預先配置了 CMS，這可以為您節省很多時間。

通過檢查代碼，您還可以學到很多東西。 嘗試安裝模板，將其與其他模板進行比較，然後選擇最適合您的模板。

包起來

靜態頁面生成器是一種快速可靠的網站構建方式。 如今，您甚至可以使用生成器構建重要且高度定制的網站。

例如，Smashing Magazine 去年搬到了 JAMstack，他們設法顯著加快了網站速度。 還有其他靜態網站的成功示例，它們都具有相同的原則——生成靜態資源並通過內容交付網絡交付它們，以實現更快的加載和卓越的用戶體驗。

您可以使用靜態網站做更多事情：從使用 Wordpress REST API 作為後端到使用 Lambda 函數。 即使對於簡單的網站也有出色的解決方案，例如開箱即用的 HTTPS 或處理表單提交。

我希望這篇靜態頁面框架的概述能幫助你認識到它們的潛力，並在你下次想到一個新項目時考慮使用它們。