110静态站点生成器的简要介绍

静态站点生成器现在非常 à la 模式，并且随着 JAMStack 成为当今许多 Web 项目的可行替代方案，这不足为奇！

无论是否是 JAMStack，静态站点生成器 (SSG) 与更传统的 CMS 相比具有一些主要优势，而对于 SSG，有有很多选项可供选择。杰基尔、雨果、盖茨比、Next.jst、萨珀……哦，天哪！

我最近四处逛逛，看看我的一个名为 Spiral11 的项目的最佳静态站点生成器选项是什么。我最初倾向于 Gatsby，因为它包含了一些现代的好东西，比如图像优化，但后来我进一步看了 Eleventy 并爱上了它。

11ty 易于使用，不会妨碍您并准确地吐出您输入的内容，因此不会出现意外或隐藏的代码膨胀。在最基本的情况下，11ty 只是将它从您的工作目录中找到的文件编译成静态 HTML 文件。另外，由于它是用 JavaScript 编写的，因此您可以根据可以在项目中使用的包访问整个 npm。

让我们参观一下，看看它是如何工作的……

十一站点设置

首先使用 npm 或 Yarn 在你的机器上全局安装 Eleventy：

# with npm
$ npm install -g @11ty/eleventy

# with Yarn
$ yarn global add @11ty/eleventy

现在您可以在任何包含有效模板文件的目录中运行 eleventy 命令。

例如，假设我们有一个名为 best-site-ever 的目录，其中包含一个 index.md 文件：

索引.md

## Chomp Chomp **Chomp** 🐊🐊🐊

您现在可以在该目录中运行 eleventy，您会看到 Eleventy 创建了一个 _site 目录，其中包含一个 index.html 文件，其中包含我们期望的内容：

_site/index.html

<h2>Chomp Chomp <strong>Chomp</strong> 🐊🐊🐊</h2>

说到模板语言，您有很多选择。你可以使用 Markdown、Nunjucks、Liquid、Mustache……你可以混合搭配，所以你可以有一些用 Liquid 编写的文件，一些用 Nunjucks 和 Eleventy 处理一切都很好。

十一个命令选项

eleventy 命令也接受一些有用的标志。例如：

–watch：当您的任何项目文件更改时重写输出文件。
–serve：通过本地 Web 服务器服务输出的站点并观察变化。
–dryrun：测试处理过程，不实际输出任何文件。
–输出：指定不同的输出位置。

这意味着很多时候，在本地工作时，您需要使用以下命令服务和重建更改：

$ eleventy --serve

目录结构

使用 Eleventy，您不仅可以自由选择自己喜欢的模板语言，还可以选择自己的目录结构。

假设我们的项目中有另一个 markdown 文件，但这次它位于两个嵌套的子目录中：

/一/二/blog-post.md

One day *I will write* my 1st blog post!

现在如果我们运行 eleventy，_site 中的输出将如下所示：

📁 _site/
  index.html
  📁 one/
    📁 two/
      📁 blog-post/
        index.html

因此，您会注意到目录结构被保留，文件名用作 slug/URI，并且 Eleventy 为每个输出模板创建一个目录，其中包含一个包含 HTML 输出的 index.html 文件。

如果我们希望将文件组织在最终输出中反映不同的目录中怎么办？很简单，我们只需在顶部的前端部分中指定特定模板的永久链接即可。

/一/二/blog-post.md

---
permalink: '/blog-post/'
---

One day *I will write* my 1st blog post!

只需再次运行 eleventy，您现在就会看到 blog-post 出现在 _site 的根级别。这样，指定永久链接可以让您充分灵活。

前台事项

说到前端，您可以将各种元数据放入其中，然后可用于布局（稍后会详细介绍）。例如，在前面的问题中，您将指定帖子的标题、元描述/摘录和标签等内容，并且大多数键可以随意命名。

这里有一个例子来说明：

/一/二/blog-post.md

---
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。大多数情况下，此类 Markdown 文件应包含在布局中，以提供样板 HTML、页眉、导航栏、侧边栏和页脚等内容。

默认情况下，布局模板应位于 _includes 目录中。

让我们使用 Nunjucks 语法创建一些示例布局。一种是我们的 HTML 样板的默认布局，另一种是我们的博客布局：

_includes/default.njk

<!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>

_includes/blog.njk

---
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）：

.eleventy.js

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 甚至不需要配置文件，并且可以在没有配置文件的情况下完成大部分繁重的工作。

使用启动器

到目前为止，我们一直在从头开始创建一个站点以了解它是如何工作的，但是您通常希望从一个已经以您喜欢的方式配置和/或样式的良好基础开始。您可以在此处浏览 11 个启动器的列表。

我个人非常喜欢 Skeleventy starter，它使用 Tailwind CSS 进行样式设置，并配置了 PurgeCSS 以摆脱生产中未使用的样式。如果您正在创建博客，官方的 Eleventy 博客启动器也是一个不错的起点。

了解更多

✨✨ 简短的介绍就到此为止，但我邀请您通过查看以下资源了解更多信息：

官方文档
这与杰森一起学习情节与 Zach Leatherman，Eleventy 的创造者