Metalsmith 是一款使用 Node.js 构建的静态网站生成器，而 metalsmith-static 则是一个 Metalsmith 插件，可以将静态网站生成器导出的文件发布到服务器上。在本篇文章中，我们将详细介绍如何使用 metalsmith-static 来构建并发布静态网站。
安装和配置
首先，需要确保已经安装了最新版本的 Node.js 和 npm。然后，在项目根目录下运行以下命令来安装 Metalsmith 和 metalsmith-static：
npm install --save-dev metalsmith metalsmith-static
接着，在项目根目录下创建一个名为 metalsmith.js 的文件，并添加以下内容：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ------ - -----------------------------
---------------------
---------------- -- -----
----------------------- -- ----
--------------
-------------------- -
-- ----- ----- ----
---此代码片段定义了一个基本的 Metalsmith 配置，其中 source 属性指定源文件目录，destination 属性指定输出目录，.use(static()) 表示要使用 metalsmith-static 插件来处理静态文件。
部署
完成上述设置后，可以通过运行以下命令生成静态网站并部署到服务器上：
npm run build
这将依据配置文件生成静态文件，并将它们存储在 build 目录中。接下来，可以通过将该目录上传到服务器或使用其他发布工具来部署网站。
示例
下面是一个简单的示例，展示了如何使用 Metalsmith 和 metalsmith-static 来创建并部署一个基本的静态网站。
首先，在项目根目录下创建一个名为 src 的目录，并在其中创建一个名为 index.html 的文件，文件内容如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------ ------------- ------- ------ --------- ----------- ------- -------
然后，按照上述步骤创建 metalsmith.js 文件，并运行以下命令生成和部署网站：
npm run build
这将生成一个名为 build 的目录，在其中包含一个名为 index.html 的文件。接着，可以通过将该目录上传到服务器或使用其他发布工具来部署网站。
结论
通过使用 metalsmith-static 插件，我们可以轻松地将 Metalsmith 生成的静态网站部署到服务器上。在这篇文章中，我们提供了一个简单而且易于理解的 Metalsmith 配置示例，以及如何使用该插件来生成和部署静态网站的基本步骤。如果你正在寻找一种简单而又功能强大的方式来构建静态网站，那么 Metalsmith 是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/45533