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

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

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

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

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

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

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

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

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

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

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

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

上面的代碼清楚地說明了為什么初始版本有一個(gè)名為 generateSite 的函數(shù)?，F(xiàn)在執(zhí)行命令 node index.js 啟動(dòng)我們的靜態(tài)網(wǎng)站生成器，如果在 src 目錄中編輯任何文件，public 都會(huì)發(fā)生變化。此時(shí)，我們還將添加一個(gè)環(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 來運(yùn)行以上代碼。請(qǐng)注意，觀察源目錄的更改和重新編譯并不是每次都必須的，你可以跳過此步驟，只需在每次進(jìn)行更改時(shí)運(yùn)行腳本即可。

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

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

腳本本身位于 src 目錄下。

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

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

該項(xiàng)目使用 node-sass 編譯模板 CSS。然而，這種依賴性不是必需的，因?yàn)橐丫幾g的 CSS 文件也被提交到了 Git。

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

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

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

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

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

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