网站源码是什么?（教你用 100 行 Node.js 代码，快速构建一个静态网站生成器！）网站源码 / 网站源码怎么使用...

近日，我的一位同事向我寻求建议，她打算为自己构建一个博客于是，我对静态网站生成器和博客引擎进行了一番研究，发现 Hugo 是一个很不错的选择但是，我的同事还有一些特殊要求，比如，她想要一个自定义的博客网址和 CSS 主题。

尽管这些 Hugo 都可以实现，但我并不打算花时间来学习它我想自己创建一个简单的静态网站生成器，以便我的同事在她已经准备好的  HTML 中编写博客文章这个静态网站生成器的代码大约 100 行，非常简洁。

它提供了详细代码和示例博客 众所周知，GitLab 提供静态页面的免费托管服务，还带有 CI/CD 功能，它允许你在部署之前编译页面以下教程将带你使用 Node.js 设置自己的静态网站生成器，Node.js 的版本需要 “>= 8.11.x

”npm initnpm i --save-exact bluebird chokidar fs-extra mustachemkdir srcmkdir public首先，设置项目：开始之前，我们需要弄清楚一个问题：为什么需要静态网站生成器？因为某些情况并不需要静态网站生成器。

假如你的博客访问量很小，你只需简单地手工创建 HTML 页面并发布它们即可实际上，在服务器编程兴起之前，在很长时间内这就是大多数 Web 的发布方式但是，一旦页面和内容增加，对这些页面中的通用部分（例如页面底部）进行更改将会变得非常重复和乏味。

因此，我们开始寻找一种更加理想的方法，尝试使用某种简单的模板引擎来分离常见内容，然后在特定的地方插入所需的内容开始研究模板引擎之前，先设置我们的网站我们需要在项目根目录下创建 2 个文件夹 ：SRC：我们当前网站所在的位置；。

Public：用来存放我们生成的网站我们的目标是将 src 目录的内容复制到 public 目录中在项目根目录下创建 index.js 文件，其内容如下：constPromise = 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");};执行命令 node index.js，即可启动该脚本。

祝贺你！此刻，你已荣升为一名后端开发人员接下来，我们将添加文件监视器，src 文件夹中的内容一旦发生更改就将重新生成网站该博客总共包含 500-1000 个文件，我们可以在任何变化发生时重新生成整个网站：。

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 的函数。

现在执行命令 node index.js 启动我们的静态网站生成器，如果在 src 目录中编辑任何文件，public 都会发生变化此时，我们还将添加一个环境变量来区分开发和生产模式在开发模式中，我们将关注更改情况并重新生成网站，而在生产模式中，我们只需重新生成：。

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

await generateSite();if (env === "dev") {    watchFiles();  }};我们可以执行命令 export NODE_ENV=prod || set NODE_ENV=prod && node index.js 来运行以上代码。

请注意，观察源目录的更改和重新编译并不是每次都必须的，你可以跳过此步骤，只需在每次进行更改时运行脚本即可至此，差不多完成了！现在来说说模板我们将使用 Mustache.js 模板，它非常简单易用，并且我们的需求并不复杂。

创建一个文件夹 src/partials，用来存放网站的公共部分然后稍微修改我们的网站结构，保证所有页面都存放在 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）它与本教程有一些细微差别：脚本本身位于 src 目录下。

代码略超过了 100 行，大约 130 行，为了遵循简洁的代码实践风格，使用常量而不是文件夹路径的字符串该脚本不会复制整个 src 文件夹，而只复制必要的资源，比如 CSS 文件、图片等该项目使用 node-sass 编译模板 CSS。

然而，这种依赖性不是必需的，因为已编译的 CSS 文件也被提交到了 Git此外，你还可以安装 browser-sync 软件包，然后通过命令 npm run live-reload 运行它，如此一来，只要有任何更改发生浏览器就会自动刷新。

请注意，由于任何更改都将重新生成整个网站，因此并不适用于 WindowsGitLab 提供静态网站免费托管，只需一个 .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。译者：安翔，责编：屠敏