近日，我的一位同事向我尋求建議，她打算為自己構(gòu)建一個博客。于是，我對靜態(tài)網(wǎng)站生成器和博客引擎進行了一番研究，發(fā)現(xiàn) Hugo 是一個很不錯的選擇。但是，我的同事還有一些特殊要求，比如，她想要一個自定義的博客網(wǎng)址和 CSS 主題。盡管這些 Hugo 都可以實現(xiàn)，但我并不打算花時間來學(xué)習(xí)它。我想自己創(chuàng)建一個簡單的靜態(tài)網(wǎng)站生成器，以便我的同事在她已經(jīng)準(zhǔn)備好的 HTML 中編寫博客文章。

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

以下教程將帶你使用 Node.js 設(shè)置自己的靜態(tài)網(wǎng)站生成器，Node.js 的版本需要 “>= 8.11.x”。

首先，設(shè)置項目：

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

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

SRC：我們當(dāng)前網(wǎng)站所在的位置；

Public：用來存放我們生成的網(wǎng)站。

我們的目標(biāo)是將 src 目錄的內(nèi)容復(fù)制到 public 目錄中。在項目根目錄下創(chuàng)建 index.js 文件，其內(nèi)容如下：

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

祝賀你！此刻，你已榮升為一名后端開發(fā)人員。

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

上面的代碼清楚地說明了為什么初始版本有一個名為 generateSite 的函數(shù)?，F(xiàn)在執(zhí)行命令 node index.js 啟動我們的靜態(tài)網(wǎng)站生成器，如果在 src 目錄中編輯任何文件，public 都會發(fā)生變化。此時，我們還將添加一個環(huán)境變量來區(qū)分開發(fā)和生產(chǎn)模式。在開發(fā)模式中，我們將關(guān)注更改情況并重新生成網(wǎng)站，而在生產(chǎn)模式中，我們只需重新生成：

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

至此，差不多完成了！現(xiàn)在來說說模板。我們將使用 Mustache.js 模板，它非常簡單易用，并且我們的需求并不復(fù)雜。創(chuàng)建一個文件夾 src/partials，用來存放網(wǎng)站的公共部分。然后稍微修改我們的網(wǎng)站結(jié)構(gòu)，保證所有頁面都存放在 src/pages 目錄中。接下來加載頁面并使用 Mustache 渲染：

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

腳本本身位于 src 目錄下。

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

該腳本不會復(fù)制整個 src 文件夾，而只復(fù)制必要的資源，比如 CSS 文件、圖片等。

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

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

GitLab 提供靜態(tài)網(wǎng)站免費托管，只需一個 .gitlab-ci.yml 配置文件即可。真正令人難以置信之處在于，你可以自定義構(gòu)建過程，這意味著在該例中，我們可以在部署之前生成網(wǎng)站！有關(guān)此功能的詳細(xì)信息，請參見https://about./features/pages/。

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

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

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

譯者：安翔，責(zé)編：屠敏