静态方法创建静态map_如何使用Metalsmith创建静态站点

静态方法创建静态map

My previous posts discussed reasons why you should or should not consider a static site generator. In summary, a static site generator builds HTML-only page files from templates and raw data typically contained in Markdown files. It offers some of the benefits of a CMS without the hosting, performance and security overheads.

我以前的帖子讨论了为什么应该或不应该考虑使用静态网站生成器的原因。 总而言之，静态网站生成器会通过Markdown文件中通常包含的模板和原始数据构建仅HTML页面文件。 它提供了CMS的一些优点，而没有托管，性能和安全性开销。

A static site may be appropriate for a range of projects, including:

静态站点可能适用于一系列项目，包括：

• A small website or personal blog. Sites with a few dozen pages, infrequent posts and one or two authors could be ideal.
  小型网站或个人博客。 站点只有几十页，不经常发布并且只有一两个作者的网站可能是理想的选择。
• Technical documentation such as a REST API.
  技术文档，例如REST API。
• Application prototypes requiring a series of web page views.
  需要一系列网页视图的应用程序原型。
• An eBook — Markdown files can be converted to PDF or other formats as well as HTML.
  电子书— Markdown文件可以转换为PDF或其他格式以及HTML。

In essence, a static site generator is a build tool. You could use one for running tasks or project scaffolding like you could with Grunt or Gulp.

本质上，静态站点生成器是构建工具。 您可以像使用Grunt或Gulp一样使用它来运行任务或项目支架。

为什么选择金属匠？ (Why Metalsmith?)

The undisputed static site champion is Jekyll—a Ruby project launched in 2008. You don’t necessarily require Ruby expertise to use Jekyll but it will help. Fortunately, there is a wide range of open source static site generators for most popular languages. JavaScript options include Hexo, Harp and Assemble. You could also use a build tool such as Gulp for simpler projects.

毫无疑问，静态站点冠军是Jekyll，这是2008年启动的Ruby项目。使用Jekyll不一定需要Ruby专业知识，但它会有所帮助。 幸运的是，对于大多数流行的语言，有各种各样的开源静态站点生成器 。 JavaScript选项包括Hexo ， Harp和Assemble 。 您也可以使用诸如Gulp之类的构建工具来简化项目。

I choose Metalsmith for this tutorial because it:

我选择本教程的Metalsmith是因为：

1. is not aimed at specific project types such as blogs
   不针对特定项目类型，例如博客
2. supports a wide range of template and data format options
   支持多种模板和数据格式选项
3. is lightweight
   轻巧
4. has few dependencies
   很少有依赖
5. uses a modular structure
   使用模块化结构
6. offers a simple plug-in architecture, and
   提供了一个简单的插件架构，并且
7. is easy to get started.
   很容易上手。

A demonstration website has been built for this tutorial. It won’t win any design awards but it illustrates the basic concepts. The Metalsmith build code can be examined and installed from the GitHub repository. Alternatively, you can follow the instructions here and create your own basic site.

本教程已建立了一个演示网站 。 它不会获得任何设计奖项，但可以说明基本概念。 可以从GitHub存储库中检查和安装Metalsmith构建代码。 或者，您可以按照此处的说明创建自己的基本站点。

I have used Metalsmith a couple of times—please don’t presume this is the definitive way to build every static site!

我已经使用Metalsmith了几次，请不要以为这是构建每个静态站点的明确方法！

安装Metalsmith (Install Metalsmith)

Ensure you have Node.js installed (for example using nvm) then create a new project directory, e.g. project and initialize your package.json file:

确保已安装Node.js (例如， 使用nvm )，然后创建一个新的项目目录(例如project并初始化package.json文件：

cd project && cd project
npm init -y

Now install Metalsmith and the assorted plugins we’ll use to build our site. These are:

现在安装Metalsmith和我们将用来构建站点的各种插件。 这些是：

• metalsmith-assets — includes static assets in your Metalsmith build

  metalsmith-assets —在您的Metalsmith版本中包含静态资产

• metalsmith-browser-sync — incorporates BrowserSync into your workflow

  metalsmith-browser- sync-将BrowserSync集成到您的工作流程中

• metalsmith-collections — adds collections of files to the global metadata

  metalsmith-collections —将文件集合添加到全局元数据

• metalsmith-feed — generates an RSS feed for a collection

  metalsmith-feed-为集合生成RSS feed

• metalsmith-html-minifier — minifies HTML files using kangax/html-minifier

  metalsmith-html-minifier-使用kangax / html-minifier最小化HTML文件

• metalsmith-in-place — renders templating syntax in source files

  Metalsmith-in-place —在源文件中渲染模板语法

• metalsmith-layouts — applies layouts to your source files

  metalsmith-layouts-将布局应用于源文件

• metalsmith-mapsite — generates a sitemap.xml file

  metalsmith-mapsite —生成一个sitemap.xml文件

• metalsmith-markdown — converts markdown files

  metalsmith-markdown —转换markdown文件

• metalsmith-permalinks — applies a custom permalink pattern to files

  metalsmith-permalinks-将自定义的永久链接模式应用于文件

• metalsmith-publish — adds support for draft, private, and future-dated posts

  metalsmith-publish —增加了对草稿，私人和未来职位的支持

• metalsmith-word-count — computes word coun