日，我的一位同事向我尋求建議，她打算為自己構(gòu)建一個博客。于是，我對靜態(tài)網(wǎng)站生成器和博客引擎進(jìn)行了一番研究，發(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”。

npm init
npm i --save-exact bluebird chokidar fs-extra mustache
mkdir src
mkdir public

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

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

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

1. SRC：我們當(dāng)前網(wǎng)站所在的位置；
2. Public：用來存放我們生成的網(wǎng)站。

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

const Promise=require("bluebird");
const fse=require("fs-extra");
Promise.resolve().then(async ()=> {
 await main();
});
const main=async()=> {
 await generateSite();
};
const generateSite=async()=> {
 await copyAssets();
};
const copyAssets=async()=> {
 await fse.emptyDir("public");
 await fse.copy("src", "public");
};

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

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

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

const chokidar=require("chokidar");
const main=async()=> {
 await generateSite();
 watchFiles();
};
const watchFiles=()=> {
 const watcher=chokidar.watch(
 [
 "src"
 ],
 {
 ignored: /(^|[/\])../, // chokidar will watch folders recursively
 ignoreInitial: false,
 persistent: true
 }
 );
 watcher.on("change", async path=> {
 console.log("changed " + path + ", recompiling");
 await generateSite();
 });
 // catch ctrl+c event and exit normally
 process.on("SIGINT", function() {
 watcher.close();
 });
};

上面的代碼清楚地說明了為什么初始版本有一個名為 generateSite 的函數(shù)。現(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)模式中，我們只需重新生成：

const env=process.env.NODE_ENV || "dev";
const main=async ()=> {
 console.log("Running app in " + env);
 await generateSite();
 if (env==="dev") {
 watchFiles();
 }
};

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

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

const fs=require("fs");
const generateSite=async ()=> {
 await copyAssets();
 await buildContent();
};
const buildContent=async ()=> {
 const pages=await compilePages();
 await writePages(pages);
};
const compilePages=async ()=> {
 const partials=await loadPartials();
 const result={};
 const pagesDir=path.join("src", "pages");
 const fileNames=await fs.readdirAsync(pagesDir);
 for (const fileName of fileNames) {
 const name=path.parse(fileName).name;
 const fileContent=await fs.readFileAsync(path.join(pagesDir, fileName));
 result[name]=Mustache.render(fileContent.toString(), {}, partials);
 }
 return result;
};
const loadPartials=async ()=> {
 const result={};
 const partialsDir=path.join("src", "partials");
 const fileNames=await fs.readdirAsync(partialsDir);
 for (const fileName of fileNames) {
 const name=path.parse(fileName).name;
 const content=await fs.readFileAsync(path.join(partialsDir, fileName));
 result[name]=content.toString();
 }
 return result;
};
const writePages=async pages=> {
 for (const page of Object.keys(pages)) {
 await fs.writeFileAsync(path.join("public", page + ".html"), pages[page]);
 }
};

想要了解最終版本，請查看 Software Dawg 項目（https://gitlab.com/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.gitlab.com/features/pages/。

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

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

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

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