“静态网站生成器”，稍后我们会讲到。
Netlify 是此网站的赞助商（非常感谢），我看到 Zach Leatherman 现在已经加入了。非常酷。Zach 是 Eleventy 的创建者，这是一个用于 Node 的 SSG。Eleventy 的众多显著特点之一是，如果你不想安装它，根本不需要安装。让我来设定场景。
假设你有一个三页的网站，你想要使用 SSG 的原因之一是，你想在所有三个页面上重复导航。一个“HTML 包含”，这是 web 开发中最古老的需求之一，就在那里！我们过去已经介绍了许多方法。所以我们有……
/my_project
- index.html
- about.html
- contact.html并且这三个 HTML 文件都需要重复这段导航代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Southside Laundromat</title>
</head>
<body>
{{ INCLUDE NAVIGATION HERE }}
Unique content to this page.
</body>
</html>那么，为什么我们不把这段导航代码块放到一个文件中呢，这样……
/my_project
- /_includes
- nav.html
- index.html
- about.html
- contact.html这有点像……
<nav>
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/contact/">Contact</a>
</nav>那么我们如何实际进行包含呢？这就是 Eleventy 发挥作用的地方。Eleventy 支持多种模板语言，但默认语言是 Liquid。Liquid 支持文件包含！就像这样……
{% include ./nav.html %}所以这是我放在这三个 HTML 文件中的那行代码。那么我该如何处理它呢？是不是到了我必须安装 Eleventy 才能让这一切运行起来的时刻？不，我可以使用一个简单的命令行命令来实现这一点（假设我已经安装了 npm）
npx @11ty/eleventy这是一个 30 秒的视频，展示了它的工作原理
没有 package.json。没有 npm install。从某种意义上说，这是一种零依赖的方式来处理静态网站，我认为这非常酷。Eleventy 默认将所有内容都处理到一个 _site 文件夹中。
假设我想部署这个静态网站……在 Netlify 端，我可以告诉它我想要部署的是 _site 文件夹。我甚至不需要提交它（而且你不应该提交），所以我可以把它放在一个 .gitignore 文件中。Netlify 可以使用完全相同的命令构建它。
如果比管理网站本身更容易管理，我可以将这些设置放到一个文件中。以下内容将写入 netlify.yml 文件
build:
command: "npx @11ty/eleventy"
publish: _site本文的重点是看看这有多酷，你甚至不需要安装任何东西就可以运行 SSG！这涉及到速度的权衡。安装包后，无论是本地还是云计算机运行构建，速度都会更快。
在制作这个简单的演示时，我最终需要为 Eleventy 配置一点东西，因为我想让我的 CSS 文件也包含到处理后的网站中，所以……
module.exports = function(eleventyConfig) {
eleventyConfig.addPassthroughCopy("./styles");
};就是这样。
好技巧。
在 npx 和“经典”npm install 之间，Netlify 缓存 Eleventy 和依赖项模块的方式是否有区别？
不确定！可能吧？我认为 Netlify 非常有动力让构建速度更快，这可能涉及到尽可能地使用缓存。
在我的本地计算机上，看起来
npx每次都会下载模块，因此构建速度并不像预期的那样快。是否有任何设置可以添加缓存？
按照此便捷指南将 Eleventy 添加到您的本地项目：https://www.11ty.dev/docs/getting-started/