教你用 100行Node.js 代碼，快速構建一個靜態網站生成器！

近日，我的一位同事向我尋求建議，她打算為自己構建一個博客。於是，我對靜態網站生成器和博客引擎進行了一番研究，發現 Hugo 是一個很不錯的選擇。但是，我的同事還有一些特殊要求，比如，她想要一個自定義的博客網址和 CSS 主題。儘管這些 Hugo 都可以實現，但我並不打算花時間來學習它。我想自己創建一個簡單的靜態網站生成器，以便我的同事在她已經準備好的 HTML 中編寫博客文章。

這個靜態網站生成器的代碼大約 100 行，非常簡潔。它提供了詳細代碼和示例博客 。眾所周知，GitLab 提供靜態頁面的免費託管服務，還帶有 CI/CD 功能，它允許你在部署之前編譯頁面。

以下教程將帶你使用 Node.js 設置自己的靜態網站生成器，Node.js 的版本需要 「>= 8.11.x」。

首先，設置項目：

開始之前，我們需要弄清楚一個問題：為什麼需要靜態網站生成器？因為某些情況並不需要靜態網站生成器。假如你的博客訪問量很小，你只需簡單地手工創建 HTML 頁面並發布它們即可。實際上，在伺服器編程興起之前，在很長時間內這就是大多數 Web 的發布方式。但是，一旦頁面和內容增加，對這些頁面中的通用部分（例如頁面底部）進行更改將會變得非常重複和乏味。因此，我們開始尋找一種更加理想的方法，嘗試使用某種簡單的模板引擎來分離常見內容，然後在特定的地方插入所需的內容。

開始研究模板引擎之前，先設置我們的網站。我們需要在項目根目錄下創建 2 個文件夾 ：

SRC：我們當前網站所在的位置；

Public：用來存放我們生成的網站。

我們的目標是將 src 目錄的內容複製到 public 目錄中。在項目根目錄下創建 index.js 文件，其內容如下：

執行命令 node index.js，即可啟動該腳本。

祝賀你！此刻，你已榮升為一名後端開發人員。

接下來，我們將添加文件監視器，src 文件夾中的內容一旦發生更改就將重新生成網站。該博客總共包含 500-1000 個文件，我們可以在任何變化發生時重新生成整個網站：

上面的代碼清楚地說明了為什麼初始版本有一個名為 generateSite 的函數。現在執行命令 node index.js 啟動我們的靜態網站生成器，如果在 src 目錄中編輯任何文件，public 都會發生變化。此時，我們還將添加一個環境變數來區分開發和生產模式。在開發模式中，我們將關注更改情況並重新生成網站，而在生產模式中，我們只需重新生成：

我們可以執行命令 export NODE_ENV=prod || set NODE_ENV=prod && node index.js 來運行以上代碼。請注意，觀察源目錄的更改和重新編譯並不是每次都必須的，你可以跳過此步驟，只需在每次進行更改時運行腳本即可。

至此，差不多完成了！現在來說說模板。我們將使用 Mustache.js 模板，它非常簡單易用，並且我們的需求並不複雜。創建一個文件夾 src/partials，用來存放網站的公共部分。然後稍微修改我們的網站結構，保證所有頁面都存放在 src/pages 目錄中。接下來載入頁面並使用 Mustache 渲染：

想要了解最終版本，請查看 Software Dawg 項目（https://gitlab.com/wheresvic/software-dawg）。它與本教程有一些細微差別：

腳本本身位於 src 目錄下。

代碼略超過了 100 行，大約 130 行，為了遵循簡潔的代碼實踐風格，使用常量而不是文件夾路徑的字元串。

該腳本不會複製整個 src 文件夾，而只複製必要的資源，比如 CSS 文件、圖片等。

該項目使用 node-sass 編譯模板 CSS。然而，這種依賴性不是必需的，因為已編譯的 CSS 文件也被提交到了 Git。

此外，你還可以安裝 browser-sync 軟體包，然後通過命令 npm run live-reload 運行它，如此一來，只要有任何更改發生瀏覽器就會自動刷新。請注意，由於任何更改都將重新生成整個網站，因此並不適用於 Windows。

GitLab 提供靜態網站免費託管，只需一個 .gitlab-ci.yml 配置文件即可。真正令人難以置信之處在於，你可以自定義構建過程，這意味著在該例中，我們可以在部署之前生成網站！有關此功能的詳細信息，請參見https://about.gitlab.com/features/pages/。

本教程到此結束，我的同事對此非常滿意，該方案非常靈活，它允許她根據自己的喜好進行自定義，也希望對你有所助益！

原文：https://smalldata.tech/blog/2018/08/16/building-a-simple-static-site-generator-using-node-js

作者簡介：Victor Parmar，是一位全棧工程師，熱愛旅行，熱愛 DIY。

譯者：安翔，責編：屠敏

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！