静态网站生成器是非常点菜模式，现在并与JAMStack成为一个更比可行的选择对许多web项目，这些天，这也难怪！
无论是否使用 JAMStack，静态站点生成器 (SSG) 都比更传统的 CMS 提供了一些主要优势，而在 SSG 方面，有很多选项可供选择。Jekyll、Hugo、Gatsby、Next.jst、Sapper……天哪！
我最近四处逛逛，想看看我的一个名为Spiral11的项目的最佳静态站点生成器选项。我最初倾向于 Gatsby，因为它包含了一些现代的好东西，比如图像优化，但后来我进一步研究了 Eleventy 并坠入爱河。
11ty 易于使用，不会妨碍您并准确地吐出您输入的内容，因此不会出现意外或隐藏的代码膨胀。在最基本的情况下，11ty 只是将它从您的工作目录中找到的文件编译为静态 HTML 文件。另外，由于它是用 JavaScript 编写的，因此您可以访问npm可以在项目中使用的包的全部内容。
让我们参观一下，看看它是如何工作的……
110 站点设置
首先使用 npm 或 Yarn 在您的机器上全局安装 Eleventy：
# with npm
$ npm install -g @11ty/eleventy
# with Yarn
$ yarn global add @11ty/eleventy
现在您可以eleventy在包含有效模板文件的任何目录中运行该命令。
例如，假设我们有一个名为 的目录best-site-ever，其中包含一个index.md文件：
## Chomp Chomp **Chomp** 🐊🐊🐊
您现在可以eleventy在该目录中运行，您将看到 Eleventy 创建了一个_site目录，index.html其中包含我们期望的文件：
<h2>Chomp Chomp <strong>Chomp</strong> 🐊🐊🐊</h2>
说到模板语言，您有很多选择。你可以使用 Markdown、Nunjucks、Liquid、Mustache ……而且你可以混合搭配，所以你可以有一些用 Liquid 编写的文件，一些用 Nunjucks 和 Eleventy 会处理一切。
十一个命令选项
该eleventy命令还接受一些有用的标志。例如：
- –watch：当您的任何项目文件更改时重写输出文件。
- –serve：通过本地 Web 服务器为输出的站点提供服务并观察更改。
- –dryrun：测试处理而不实际输出任何文件。
- –output：指定不同的输出位置。
这意味着很多时候，在本地工作时，您需要使用以下命令服务和重建更改：
$ eleventy --serve
目录结构
使用 Eleventy，您不仅可以自由选择自己喜欢的模板语言，还可以选择自己的目录结构。
假设我们的项目中有另一个 markdown 文件，但这次它位于两个嵌套的子目录中：
One day *I will write* my 1st blog post!
现在，如果我们运行eleventy，输出_site将如下所示：
📁 _site/
index.html
📁 one/
📁 two/
📁 blog-post/
index.html
因此，您会注意到目录结构被保留，文件名用作 slug/URI，Eleventy 为每个输出模板创建一个目录，其中包含一个 index.html 文件，其中包含 HTML 输出。
如果我们希望我们的文件在最终输出中以不同方式反映的目录中组织怎么办？很简单，我们可以在顶部的前端部分中为特定模板指定永久链接。
---
permalink: '/blog-post/'
---
One day *I will write* my 1st blog post!
eleventy再次运行，您现在将看到现在blog-post出现在_site. 这样，指定固定链接可以让您获得充分的灵活性。
前台事项
说到前端，您可以将各种元数据放入其中，然后可用于布局（稍后会详细介绍）。例如，在前面的事情中，您将指定帖子的标题、元描述/摘录和标签等内容，并且大多数键可以命名为您喜欢的任何名称。
这里有一个例子来说明：
---
title: "My first blog post 😊"
date: 2020-04-02
excerpt: "This post talks about how one day I'll write a 1st post."
permalink: '/blog-post/'
emotion: happy
tags:
- blog
- getting-started
---
One day *I will write* my 1st blog post!
收藏
我不会在这里深入讨论这个主题，我邀请您阅读文档以了解更多信息，但 Eleventy 使用您在前面提供的标签来填充集合，这些集合可以在其他模板中迭代，例如，分类页面。
还有一个名为的特殊集合all，默认情况下包含每个帖子。使用该all集合，您最终可能会得到类似站点地图的内容，其中包含您不想要的帖子/页面，因此有一种简单的方法可以选择不将帖子或页面包含在集合中：
---
eleventyExcludeFromCollections: true
---
布局
到目前为止，我们所做的只是从我们创建的 Markdown 文件中输出 HTML。大多数情况下，此类降价文件应包含在布局中，以提供样板 HTML、页眉、导航栏、侧边栏和页脚等内容。
默认情况下，布局模板应位于_includes目录中。
让我们使用 Nunjucks 语法创建一些示例布局。一种是我们 HTML 样板的默认布局，另一种是我们的博客布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }} | My Site</title>
</head>
<body>
{{ content | safe }}
</body>
</html>
---
layout: default
---
<h1>{{ title }}</h1>
<div>
Published on {{ date }}
</div>
<article>
{{ content | safe }}
</article>
如您所见，一个布局可以调用另一个布局，我们的布局可以访问位于常规模板文件前端的数据。
我们可以通过在任何内容模板的前端指定布局来使用布局：
---
layout: blog.njk
title: "My first blog post 😊"
date: 2020-04-02
excerpt: "This post talks about how one day I'll write a 1st post."
---
One day *I will write* my 1st blog post!
十一配置
到目前为止，我们已经完成了所有工作，甚至没有触及配置文件，它展示了使用 Eleventy 的简单性。但是随着您的网站变得越来越复杂，您肯定希望能够设置一些配置选项。您可以在.eleventy.js项目根目录下的文件中执行此操作。
这是一个示例配置文件，它将我们的静态资产复制到输出目录并指定不同的输出目录名称 ( public)：
module.exports = eleventyConfig => {
// Copy our static assets to the output folder
eleventyConfig.addPassthroughCopy('css');
eleventyConfig.addPassthroughCopy('js');
eleventyConfig.addPassthroughCopy('images');
// Returning something from the configuration function is optional
return {
dir: {
output: 'public'
}
};
};
您可以在配置文件中执行各种操作，例如缩小 HTML 输出、使用插件和配置短代码。同样，我邀请您查看文档以了解有关可以配置的内容的更多信息。但是，如果您一开始感到不知所措，请记住，默认情况下 Eleventy 甚至不需要配置文件，并且可以在没有配置文件的情况下完成大部分繁重工作。
使用启动器
到目前为止，我们一直在从头开始创建一个站点，以了解它是如何工作的，但通常您会希望从一个已经以您喜欢的方式配置和/或样式化的良好基础开始。您可以在此处浏览110 个初学者的列表。
我个人非常喜欢Skeleventy starter，它使用Tailwind CSS进行样式设置，并配置了PurgeCSS以摆脱生产中未使用的样式。如果您正在创建博客，官方的Eleventy 博客启动器也是一个不错的起点。
了解更多
✨✨ 这就是这个简短的介绍，但我邀请您通过查看这些资源来了解更多信息：
- 官方文档
- 《与杰森一起学习》与《Eleventy》的创造者扎克·莱瑟曼 ( Zach Leatherman ) 的这一集
