Eleventy（11ty）是什么？
Eleventy（通常写作 “11ty”）是一个用 JavaScript 写的静态网站生成器，主打简单、灵活、支持多种模板语言以及零配置起步。它适合内容站点、博客、作品集或文档类型的网站。Eleventy 的设计哲学是静态优先（static-first），尽可能在构建阶段生成 HTML，不依赖复杂的框架或者前端库来运行时渲染。
一些 Eleventy 的优势包括：
- 支持多种模板语言（如 Markdown、Nunjucks、Liquid、Handlebars、EJS 等），可以在同一个项目中混用。
- 零配置起步简单，新手可以快速搭建项目。
- 构建速度快，本地预览 (live-reload / serve) 支持，修改内容能快速看到效果。
- 插件系统、短代码（shortcodes）、filter、数据文件、集合（collections）等特性强大但按需使用，不会一上来就显得复杂。
Eleventy 的使用方法：从零开始构建一个静态站点
下面介绍 Eleventy 的基本使用流程，适合第一次尝试或希望快速搭建网站的用户。
1. 准备环境
确保你的电脑上安装了 Node.js（推荐版本是最新的 LTS 或者 >=18）。
安装一个包管理工具，如 npm（Node 自带）、或者 yarn、pnpm 等。
2. 创建项目
新建一个项目文件夹，例如 my-website。
在该目录下运行 npm init -y，生成 package.json。
安装 Eleventy 作为开发依赖：例如 npm install @11ty/eleventy --save-dev。
3. 构建基础结构与配置
在项目根目录中可以创建一个配置文件 .eleventy.js。如果你不做任何配置，Eleventy 会使用默认配置：当前目录为输入目录，输出目录为 _site。
如果想调整结构，比如把源码文件放在 src/ 目录、输出目录改为 public/，可以在 .eleventy.js 中设置类似如下内容：
module.exports = function(eleventyConfig) {
return {
dir: {
input: "src",
output: "public"
}
};
};
4. 添加模板与页面
在输入目录（默认或你设定的，比如 src/）创建内容文件，例如 index.md、about.md。这些文件可以写 Markdown 或 HTML，也可以使用你选择的模板语言。
在页面文件顶部使用 front matter（通常用 YAML 或者其他支持的格式）来指定页面特定数据，比如 title、layout 等。示例：
---
title: "首页"
layout: "layouts/base.njk"
---
# 欢迎使用 Eleventy
这是我的第一个静态网站页面。
创建布局文件，例如 _includes/layouts/base.njk。布局中一般包含 HTML 基本框架、头部、尾部等共享部分，同时包含内容插槽来展示每个页面的内容。使用语法例如 {{ content | safe }}（对于 Nunjucks）来插入内容。
5. 静态资源与额外设置
如果你有 CSS、图片、字体等静态资源，可以让 Eleventy “直接复制”（passthrough）这些资源到输出目录，同时监视其变化以便开发时自动刷新页面。通过配置 eleventyConfig.addPassthroughCopy() 和 addWatchTarget() 实现。
使用短代码（shortcodes）和过滤器 (filters) 增强模板功能。例如建立一个“当前年份”的短代码，避免手动更新 footer 年份。
6. 集合（Collections）、数据文件与动态内容
集合（Collections）：可以把带有某些标签（tags）的内容组织起来。例如为文章分类或者项目列表等用途。通过在 front matter 中设置 tags，然后在模板内使用 collections.xxx 对这些内容进行遍历。
数据文件（Data Files）：在 _data 目录下放置 JSON、JS 模块或其他格式文件，这些文件中的数据可以在模板中直接使用。这对于共享数据（比如导航栏、作者信息、站点配置等）非常有用。
7. 本地开发与预览
使用 Eleventy 自带的本地服务器预览功能。命令 npx @11ty/eleventy --serve（或通过在 package.json 中定义脚本如 npm run start）可以启动服务器，并在文件变化时自动重建与刷新。
8. 构建与部署
当内容准备好以后，用 Eleventy 构建生产版本：执行 npx @11ty/eleventy（或通过脚本 npm run build）。这会生成静态 HTML、CSS、资源等输出目录下的所有内容。
部署静态站点可以选择 GitHub Pages、Netlify、Vercel、Kinsta 的静态托管服务，或者其他静态文件托管方案。把输出目录内容上传到服务器或托管平台即可。
实用提示与最佳实践
- 尽量保持内容与布局分离，使用布局和 partials（片段）来减少重复的代码。
- 利用数据文件管理共享信息，比如站点标题、导航栏、作者简介等，模板中引用。
- 对图片进行优化（如果需要加载很多图片），可以使用 Eleventy 的插件或短代码来生成不同尺寸或格式的图片。
- 如果站点多语言或页面内容量大，要考虑目录结构、输出路径、permalink （永久链接）的设置，确保 SEO 和 URL 清晰。
- 在开发中做好测试，注意页面加载速度、资源大小、响应式设计等。
总结
Eleventy（11ty）是一个非常适合内容为主导的网站的静态站点生成器。它既简单易上手，又提供灵活性供你随着需求增长而扩展。对于博客、文档站、作品集等用途来说，用 Eleventy 可以快速搭建、部署维护成本低，并且性能和SEO表现非常不错。如果你正在寻找一个既能“零配置启动”又灵活可定制的工具，Eleventy 是很值得一试的选择。