Metalsmith：静态网站生成器

Metalsmith：简单易用的NodeJS静态网站生成工具

你知道吗？在构建静态网站的时候，有一个工具叫做Metalsmith，它真的是超级简单又灵活。作为一个NodeJS的静态网站生成器，Metalsmith不仅能让你轻松地处理各种数据格式，还支持丰富的插件，让你可以根据自己的需求来定制项目。

为什么选择Metalsmith？

方便好用：Metalsmith兼容你已经熟悉的工具和数据格式，比如NodeJS、npm、markdown、json、yaml等等。你可以用自己喜欢的模板语言来操作，完全不需要重新学习新的东西。

简单直观：它能把目录树转换成简单的JavaScript对象，然后你就可以用各种插件轻松地操作这些对象。就像搭积木一样，你可以根据需要随意组合。

高度可扩展：不用担心项目需求会被框架限制，Metalsmith让你完全掌控项目的概念化、结构化和构建过程。你想怎么来就怎么来，完全自由。

多功能：除了生成静态网站，Metalsmith还能用来做项目脚手架、备份工具、命令行工具甚至是部署工具。无论是配置优先还是代码优先，它都能支持。

如何安装Metalsmith？

安装也很简单，用npm、yarn或者pnpm都可以：

    bash
    npm install metalsmith
yarn add metalsmith
pnpm add metalsmith

或者你也可以用一些现成的starter来快速上手。

用Metalsmith构建网站

想用Metalsmith来建个网站或者博客？其实很简单，下面是一个快速入门的例子：

    javascript
    import { fileURLToPath } from 'node:url'
import { dirname } from 'node:path'
import Metalsmith from 'metalsmith'
import collections from '@metalsmith/collections'
import layouts from '@metalsmith/layouts'
import markdown from '@metalsmith/markdown'
import permalinks from '@metalsmith/permalinks'

const __dirname = dirname(fileURLToPath(import.meta.url))
const t1 = performance.now()

Metalsmith(__dirname)
  .source('./src')
  .destination('./build')
  .clean(true)
  .env({
    DEBUG: process.env.DEBUG,
    NODE_ENV: process.env.NODE_ENV
  })
  .metadata({
    sitename: "My Static Site & Blog",
    siteurl: "https://example.com/",
    description: "It's about saying ?Hello? to the world.",
    generatorname: "Metalsmith",
    generatorurl: "https://metalsmith.io/"
  })
  .use(collections({
    posts: 'posts/*.md'
  }))
  .use(markdown())
  .use(permalinks())
  .use(layouts({
    pattern: '**/*.html'
  }))
  .build((err) => {
    if (err) throw err
    console.log(`Build success in ${((performance.now() - t1) / 1000).toFixed(1)}s`)
  });

import { fileURLToPath } from 'node:url'
import { dirname } from 'node:path'
import Metalsmith from 'metalsmith'
import collections from '@metalsmith/collections'
import layouts from '@metalsmith/layouts'
import markdown from '@metalsmith/markdown'
import permalinks from '@metalsmith/permalinks'

const __dirname = dirname(fileURLToPath(import.meta.url))
const t1 = performance.now()

Metalsmith(__dirname)
  .source('./src')
  .destination('./build')
  .clean(true)
  .env({
    DEBUG: process.env.DEBUG,
    NODE_ENV: process.env.NODE_ENV
  })
  .metadata({
    sitename: "My Static Site & Blog",
    siteurl: "https://example.com/",
    description: "It's about saying ?Hello? to the world.",
    generatorname: "Metalsmith",
    generatorurl: "https://metalsmith.io/"
  })
  .use(collections({
    posts: 'posts/*.md'
  }))
  .use(markdown())
  .use(permalinks())
  .use(layouts({
    pattern: '**/*.html'
  }))
  .build((err) => {
    if (err) throw err
    console.log(`Build success in ${((performance.now() - t1) / 1000).toFixed(1)}s`)
  });

不止于静态网站

虽然Metalsmith主要被称为“静态网站生成器”，但它的功能远不止于此。因为一切都是插件，你可以用它来做各种事情，比如：

项目脚手架：读取模板文件，解析占位符，用户输入后生成新文件。
构建工具：从源目录读取文件，转换Sass为CSS，压缩图片等。
电子书生成器：将Markdown转换为HTML、PDF、ePUB、MOBI等格式。
技术文档：从源目录读取文件，转换Markdown为HTML，生成导航。

部署无忧

Metalsmith生成的都是静态文件夹，可以轻松压缩、存档，部署到CDN、Netlify、Github Pages等各种平台。

最后嘛，我觉得Metalsmith真的是一个非常灵活又强大的工具，尤其适合那些想要完全掌控自己项目的人。如果你也在寻找一个简单易用的静态网站生成器，不妨试试Metalsmith，说不定会成为你的新宠哦！