之前文章探討了是否應該使用靜態網站生成器的理由。簡而言之，靜態網站生成器從模板和原始數據（通常包含在 Markdown 文件中）構建僅包含 HTML 的頁面文件。它提供了一些 CMS 的好處，而沒有託管、性能和安全方面的開銷。
靜態網站可能適合各種項目，包括：
本質上，靜態網站生成器是一個構建工具。您可以像使用 Grunt 或 Gulp 一樣，使用它來運行任務或項目腳手架。
無可爭議的靜態網站冠軍是 Jekyll——一個 2008 年啟動的 Ruby 項目。您不一定需要 Ruby 專業知識來使用 Jekyll，但這會有所幫助。幸運的是，大多數流行語言都有各種各樣的開源靜態網站生成器。 JavaScript 選項包括 Hexo、Harp 和 Assemble。對於更簡單的項目，您也可以使用 Gulp 等構建工具。
我選擇 Metalsmith 用於本教程是因為它：
本教程已經構建了一個演示網站。它不會贏得任何設計獎項，但它說明了基本概念。 Metalsmith 構建代碼可以從 GitHub 存儲庫中檢查和安裝。或者，您可以按照此處的說明操作並創建您自己的基本站點。
我已經使用過幾次 Metalsmith 了——請不要認為這是構建每個靜態網站的最終方法！
確保您已安裝 Node.js（例如使用 nvm），然後創建一個新的項目目錄，例如 project 並初始化您的 package.json 文件：
<code>cd project && cd project npm init -y </code>
現在安裝 Metalsmith 和我們將用於構建站點的各種插件。這些是：
<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars </code>
我們將在項目中使用以下結構作為源 (src) 和構建 (build) 目錄。
您可以按照以下說明創建示例文件，也可以直接從演示 src 目錄複製它們。
頁面 Markdown 文件包含在 src/html 中。這可以包含每個網站部分的一級子目錄，即
每個目錄包含一個 index.md 文件，它是該部分的默認頁面。其他頁面可以使用任何唯一名稱。
構建過程會將這些文件轉換為基於目錄的永久鏈接，例如
每個 Markdown 文件都提供內容和元信息，稱為“前題”位於 --- 標記之間的頂部，例如
<code>--- title: My page title description: A description of this page. layout: page.html priority: 0.9 date: 2016-04-19 publish: draft --- This is a demonstration page. ## Example title Body text.</code>
大多數前題都是可選的，但您可以設置：
HTML 頁面模板包含在 src/template 中。已定義兩個模板：
雖然支持其他選項，但使用了 Handlebars 模板系統。典型的模板需要一個 {{{ contents }}} 標記來包含頁面內容以及任何前題值，例如 {{ title }}：
<code>cd project && cd project npm init -y </code>
對 {{> meta }}、{{> header }} 和 {{> footer }} 的引用是部分……
部分——或 HTML 代碼片段文件——包含在 src/partials 中。這些主要用於模板中，但也可以使用以下代碼包含在內容頁面中：
<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars </code>
其中 partialname 是 src/partials 目錄中文件的名稱。
靜態資產（例如圖像、CSS 和 JavaScript 文件）包含在 src/assets 中。所有文件和子目錄都將按原樣複製到網站的根目錄。
構建站點所需的自定義插件包含在 lib 目錄中。
網站將在構建目錄中構建。我們將通過兩種方式構建網站：
可以在項目目錄的根目錄中創建一個名為 build.js 的基本示例：
<code>--- title: My page title description: A description of this page. layout: page.html priority: 0.9 date: 2016-04-19 publish: draft --- This is a demonstration page. ## Example title Body text.</code>
使用 node ./build.js 運行它，一個靜態網站將在構建目錄中創建。 Markdown 將被解析為 HTML，但它不可用，因為我們沒有在構建過程中包含模板。
從表面上看，Metalsmith 構建文件看起來類似於 Gulp 中使用的構建文件（儘管它不使用流）。通過使用任何適當的參數將其傳遞給 Metalsmith use 方法來調用插件。插件本身必須返回另一個函數，該函數接受三個參數：
這個簡單的示例將所有元數據和頁面信息記錄到控制台（它可以在 build.js 中定義）：
<code>
lang="en">
>
{{> meta }}
>
>
{{> header }}
<main>></main>
>
{{#if title}}
<h1>></h1>{{ title }}>
{{/if}}
{{{ contents }}}
>
>
{{> footer }}
>
>
</code>Metalsmith 構建代碼可以更新為使用此插件：
<code>{{> partialname }}</code>此調試函數可以幫助您創建自己的自定義插件，但是您可能需要的絕大多數功能都已經編寫好了——Metalsmith 網站上列出了很長的插件列表。
下面解釋了演示站點構建文件的主要部分。
如果 NODE_ENV 環境變量已設置為 production（在 Mac/Linux 上導出 NODE_ENV=production 或在 Windows 上設置 NODE_ENV=production），則變量 devBuild 將設置為 true：
<code>cd project && cd project npm init -y </code>
主目錄在 dir 對像中定義，以便我們可以重複使用它們：
<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars </code>
加載 Metalsmith 和插件模塊。注意：
<code>--- title: My page title description: A description of this page. layout: page.html priority: 0.9 date: 2016-04-19 publish: draft --- This is a demonstration page. ## Example title Body text.</code>
siteMeta 對象使用應用於每個頁面的信息定義。重要的值是 domain 和 rootpath，它們根據開發或生產構建進行設置：
<code>
lang="en">
>
{{> meta }}
>
>
{{> header }}
<main>></main>
>
{{#if title}}
<h1>></h1>{{ title }}>
{{/if}}
{{{ contents }}}
>
>
{{> footer }}
>
>
</code>還定義了一個 templateConfig 對象來設置模板默認值。這將由 metalsmith-in-place 和 metalsmith-layouts 插件使用，它們啟用使用 Handlebars 的頁面內和模板渲染：
<code>{{> partialname }}</code>Metalsmith 對象現在像以前一樣初始化，但我們還將 siteMeta 對像傳遞給 metadata 方法，以確保該信息可用於每個頁面。因此，我們可以在任何頁面中引用諸如 {{ name }} 之類的項目以獲取站點名稱。
<code>// basic build
'use strict';
var
metalsmith = require('metalsmith'),
markdown = require('metalsmith-markdown'),
ms = metalsmith(__dirname) // the working directory
.clean(true) // clean the build directory
.source('src/html/') // the page source directory
.destination('build/') // the destination directory
.use(markdown()) // convert markdown to HTML
.build(function(err) { // build the site
if (err) throw err; // and throw errors
});
</code>我們的第一個插件調用調用 metalsmith-publish，它刪除任何其前題 publish 值設置為草稿、私有或未來日期的文件：
<code>function debug(logToConsole) {
return function(files, metalsmith, done) {
if (logToConsole) {
console.log('\nMETADATA:');
console.log(metalsmith.metadata());
for (var f in files) {
console.log('\nFILE:');
console.log(files[f]);
}
}
done();
};
};
</code>setdate 是包含在 lib/metalsmith-setdate.js 中的自定義插件。它確保每個文件都設置了“date”值，即使在前題中沒有定義任何值，也可以通過盡可能回退到發布日期或文件創建時間來實現：
<code>ms = metalsmith(__dirname) // the working directory
.clean(true) // clean the build directory
.source('src/html/') // the page source directory
.destination('build/') // the destination directory
.use(markdown()) // convert Markdown to HTML
.use(debug(true)) // *** NEW *** output debug information
.build(function(err) { // build the site
if (err) throw err; // and throw errors
});
</code>metalsmith-collections 是最重要的插件之一，因為它根據頁面在源目錄中的位置或其他因素將每個頁面分配給類別或分類法。它可以使用前題（例如日期或優先級）重新排序文件，並允許您為該集合設置自定義元數據。代碼定義：
<code>devBuild = ((process.env.NODE_ENV || '').trim().toLowerCase() !== 'production') </code>
接下來是 Markdown 到 HTML 的轉換，然後是 metalsmith-permalinks 插件，它為構建定義了目錄結構。請注意，moremeta 在下面為每個文件設置了 :mainCollection：
<code>dir = {
base: __dirname + '/',
lib: __dirname + '/lib/',
source: './src/',
dest: './build/'
}
</code>metalsmith-word-count 計算文章中的字數併計算大約需要多長時間才能閱讀。參數 { raw: true } 僅輸出數字：
<code>metalsmith = require('metalsmith'),
markdown = require('metalsmith-markdown'),
publish = require('metalsmith-publish'),
wordcount = require("metalsmith-word-count"),
collections = require('metalsmith-collections'),
permalinks = require('metalsmith-permalinks'),
inplace = require('metalsmith-in-place'),
layouts = require('metalsmith-layouts'),
sitemap = require('metalsmith-mapsite'),
rssfeed = require('metalsmith-feed'),
assets = require('metalsmith-assets'),
htmlmin = devBuild ? null : require('metalsmith-html-minifier'),
browsersync = devBuild ? require('metalsmith-browser-sync') : null,
// custom plugins
setdate = require(dir.lib + 'metalsmith-setdate'),
moremeta = require(dir.lib + 'metalsmith-moremeta'),
debug = consoleLog ? require(dir.lib + 'metalsmith-debug') : null,
</code>moremeta 是包含在 lib/metalsmith-moremeta.js 中的另一個自定義插件。它將其他元數據附加到每個文件：
插件代碼比較複雜，因為它處理導航。如果您需要更簡單的層次結構，則有更簡單的選項。
<code>cd project && cd project npm init -y </code>
metalsmith-in-place 和 metalsmith-layouts 插件分別控制頁面內和模板佈局。傳遞上面定義的相同 templateConfig 對象：
<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars </code>
如果設置了 htmlmin（在生產構建中），我們可以壓縮 HTML：
<code>--- title: My page title description: A description of this page. layout: page.html priority: 0.9 date: 2016-04-19 publish: draft --- This is a demonstration page. ## Example title Body text.</code>
debug 是包含在 lib/metalsmith-debug.js 中的最終自定義插件。它類似於上面描述的 debug 函數：
<code>
lang="en">
>
{{> meta }}
>
>
{{> header }}
<main>></main>
>
{{#if title}}
<h1>></h1>{{ title }}>
{{/if}}
{{{ contents }}}
>
>
{{> footer }}
>
>
</code>啟動 Browsersync 測試服務器，以便我們可以測試開發構建。如果您以前沒有使用過它，它看起來就像魔法：每次您進行更改時，您的網站都會神奇地刷新，並且當您滾動或瀏覽網站時，兩個或多個瀏覽器中的視圖會同步：
<code>{{> partialname }}</code>最後，我們可以使用：
<code>// basic build
'use strict';
var
metalsmith = require('metalsmith'),
markdown = require('metalsmith-markdown'),
ms = metalsmith(__dirname) // the working directory
.clean(true) // clean the build directory
.source('src/html/') // the page source directory
.destination('build/') // the destination directory
.use(markdown()) // convert markdown to HTML
.build(function(err) { // build the site
if (err) throw err; // and throw errors
});
</code>剩下的就是最後的 .build() 步驟來創建網站：
<code>function debug(logToConsole) {
return function(files, metalsmith, done) {
if (logToConsole) {
console.log('\nMETADATA:');
console.log(metalsmith.metadata());
for (var f in files) {
console.log('\nFILE:');
console.log(files[f]);
}
}
done();
};
};
</code>完成後，您可以再次運行 node ./build.js 來構建您的靜態網站。
我在構建簡單的 Metalsmith 網站時學到了很多東西，但請注意以下問題：
插件可能會與其他插件衝突。例如，計算相對根路徑的 metalsmith-rootpath 與創建自定義構建目錄結構的 metalsmith-permalinks 不太兼容。我通過在 lib/metalsmith-moremeta.js 插件中編寫自定義根路徑計算代碼解決了此問題。
如果插件放置的順序錯誤，則插件可能會相互依賴或衝突。例如，生成 RSS 的 metalsmith-feed 插件必須在 metalsmith-layouts 之後調用，以確保不會在頁面模板中生成 RSS XML。
當 Browsersync 運行並編輯文件時，集合會被重新解析，但舊數據似乎仍然存在。這可能是 lib/metalsmith-moremeta.js 自定義插件的問題，但菜單和前後鏈接可能會不同步。要修復它，請使用 Ctrl/Cmd C 停止構建並重新啟動構建。
使用 Gulp 等任務管理器的人會注意到 Metalsmith 提供了一個熟悉的構建過程。有用於使用 Sass 進行 CSS 預處理、圖像壓縮、文件連接、醜化和更多功能的插件。對於更簡單的流程，它可能就足夠了。
但是，Gulp 具有更廣泛的插件範圍，並允許進行複雜的構建活動，例如 lint、部署和使用 auto-prefixer 的 PostCSS 處理。有一些 Gulp/Metalsmith 集成插件，儘管我遇到了一些問題，並且它們不應該是必要的，因為 Gulp 任務可以直接運行 Metalsmith，例如
<code>cd project && cd project npm init -y </code>
此過程可以防止上面提到的 Browsersync 重新構建問題。請記住使用 .clean(false) 以確保當其他任務處於活動狀態時，Metalsmith 永遠不會清除構建文件夾。
如果您有簡單或高度定制的網站需求，Metalsmith 是理想的選擇。也許可以嘗試使用文檔項目並一次添加一個功能。 Metalsmith 並不像 Jekyll 等替代方案那樣功能齊全，但它並非旨在如此。您可能需要編寫自己的插件，但這樣做很容易，這對 JavaScript 開發人員來說是一個巨大的好處。
創建 Metalsmith 構建系統需要時間，我們還沒有考慮 HTML 模板和部署所涉及的工作量。但是，一旦您擁有一個可用的流程，添加、編輯和刪除 Markdown 文件就會變得非常簡單。它可能比使用 CMS 更容易，並且您擁有靜態網站的所有好處。
Metalsmith 是一款簡單易用的可插入靜態網站生成器。它基於 Node.js，並使用模塊化結構，允許您通過插件根據需要添加功能。這使其具有令人難以置信的靈活性和可定制性。您應該使用 Metalsmith 創建靜態網站，因為它允許您完全按照自己的意願構建網站，而無需受傳統 CMS 的限制。此外，靜態網站比動態網站更快、更安全且更易於維護。
要安裝 Metalsmith，您需要在計算機上安裝 Node.js 和 npm。安裝這些後，您可以通過在終端中運行命令 npm install metalsmith 來安裝 Metalsmith。這將安裝 Metalsmith 及其所有依賴項。
要創建一個新的 Metalsmith 項目，首先在終端中導航到要創建項目的目錄。然後，運行命令 metalsmith 創建一個新項目。這將創建一個新的目錄，其名稱為您的項目名稱，在此目錄內，它將為您的靜態網站創建一個基本結構。
要向您的 Metalsmith 項目添加插件，您需要通過 npm 安裝它們，然後在您的 Metalsmith 配置文件中引用它們。例如，要添加markdown 插件，您首先需要運行npm install metalsmith-markdown，然後在您的配置文件中，您需要添加var markdown = require('metalsmith-markdown'); 並將.use(markdown()) 添加到您的Metalsmith 構建鏈中。
要構建您的 Metalsmith 網站，您需要在終端中運行命令 metalsmith build。這將編譯所有文件並將它們輸出到構建目錄，然後您可以將其部署到您的服務器。
要自定義您的 Metalsmith 網站的佈局，您可以使用 Handlebars 或 Jade 等模板引擎。這些允許您為網站的不同部分（如頁眉、頁腳和各個頁面）創建可重用的模板。
要向您的 Metalsmith 網站添加內容，您可以在源目錄中創建 markdown 文件。構建網站時，這些文件將轉換為 HTML。您還可以使用 Netlify CMS 等 CMS 來管理您的內容。
要部署您的 Metalsmith 網站，您可以使用 Netlify 或 GitHub Pages 等服務。這些服務將託管您的靜態網站，並在您推送到存儲庫時自動部署更改。
要更新您的 Metalsmith 網站，您只需更改源文件，然後重新構建您的網站。更改將反映在構建目錄中，然後您可以將其部署到您的服務器。
是的，Metalsmith 具有高度可擴展性，可用於大型複雜網站。其模塊化結構允許您根據需要添加功能，並且它使用靜態文件意味著它可以處理大量內容而不會減慢速度。
以上是如何使用金屬史密斯創建靜態站點的詳細內容。更多資訊請關注PHP中文網其他相關文章！
