Eleventy
灵活、稳定且支持多种模板语言的 JavaScript 静态站点生成器。
项目概述
Eleventy（11ty）把 Markdown、HTML 和多种独立模板语言转换为静态文件。它不强制目录结构或客户端框架，默认输出零客户端 JavaScript 的页面，适合内容、文档和渐进增强网站。
Eleventy 由 Zach Leatherman 发起并采用 MIT 许可证，最初定位为 JavaScript 生态中的 Jekyll 替代方案。它在构建阶段读取模板、Front Matter 和数据文件，再输出由团队完全控制的 HTML 与静态资源；不会自动添加框架标记、遥测或浏览器运行时。项目可以从零配置开始，也能通过 ESM 配置、插件、Shortcode、Filter 和自定义 Collection 逐步扩展。
主要特点
Eleventy 用独立模板、灵活数据和可扩展构建流程生成长期可维护的静态网站。
多模板语言支持
可使用 HTML、Markdown、Liquid、Nunjucks、WebC、JavaScript、TypeScript、JSX、MDX 等格式，并按项目需要组合。
默认零客户端 JavaScript
Eleventy 只在构建环境运行，不向页面注入客户端框架；浏览器脚本、组件和水合策略完全由开发者决定。
Data Cascade
数据可来自 Front Matter、目录数据、模板数据、全局文件和计算数据，并按明确的优先级合并到页面。
Collections
通过 Tags 或配置 API 把内容组织为文章、分类、导航和自定义集合，便于生成列表、归档与 Feed。
Filter 与 Shortcode
可以集中封装日期格式、URL、图片、组件片段和异步构建逻辑，再在不同模板语言中复用。
灵活的项目结构
不要求固定 pages 或 app 目录，可指定输入、输出、Include、Data 和静态资源位置，也适合渐进接入旧站点。
开发服务器与增量构建
CLI 提供 Watch 和本地服务器，并尽量只重建受文件变化影响的页面，缩短内容编辑反馈时间。
官方与社区插件
可按需加入图片优化、RSS、导航、语法高亮、WebC、Bundle 和 is-land 等能力，而不强制整套工具链。
适用场景
当页面以内容和 HTML 为主，并希望自行决定浏览器 JavaScript 时，Eleventy 是直接而稳定的选择。
技术文档与知识库
Markdown、Collections、目录数据和语法高亮适合版本相对稳定的产品文档与团队知识库。
博客与出版网站
Front Matter、日期排序、标签归档、Pagination 和 RSS 可组织个人博客、杂志与多作者内容。
营销与品牌网站
静态 HTML、完全可控的资源和渐进增强适合重视性能、SEO、无障碍与长期稳定性的官网。
设计系统文档
可从数据和模板生成组件目录、Token 页面、使用示例及静态预览，而不绑定某个客户端框架。
Headless CMS 前端
构建时从 CMS 或 API 拉取内容并生成静态页面，适合发布频率可控且读流量较高的内容项目。
旧站渐进迁移
可以只处理指定目录和模板，保留既有 HTML、CSS 与前端脚本，逐页引入布局、数据和构建自动化。
优点与注意事项
技术选型不仅要看能力，也要理解它带来的团队成本。
主要优点
Eleventy 擅长的地方
- 输出结构由开发者完全控制，不自动注入框架标记或运行时
- 默认零客户端 JavaScript，适合性能、SEO 和渐进增强目标
- 模板语言选择丰富，Markdown 和已有内容容易复用
- 零配置即可启动，同时保留深度定制构建流程的能力
- Data Cascade、Collections 和 Pagination 适合复杂内容组织
- 架构稳定、依赖相对精简，长期维护与升级成本可控
需要注意
采用前应考虑的问题
Eleventy 不提供浏览器状态管理、SPA 路由或统一水合模型，复杂交互需要原生脚本、Web Components 或其他框架。
登录、个性化、数据库写入和实时数据通常依赖 API、Serverless Function 或独立后端，不由静态构建本身解决。
虽然可以混用多种语法，但布局继承、转义和 Filter 行为存在差异，团队最好规定主要模板语言。
同名数据可能来自多个层级，规模增长后应统一目录数据、全局数据和 Front Matter 的职责，避免覆盖关系难以追踪。
大量远程数据、图片转换和全量 Collection 计算可能拖慢构建，应使用缓存、增量构建并拆分高成本步骤。
图片、搜索、CMS Preview、国际化和局部交互通常通过插件或项目约定实现，自由度高但缺少唯一官方方案。
快速开始
使用 Nunjucks、全局数据和 ESM 配置创建一个最小项目列表网站。
bashmkdir my-eleventy-site
cd my-eleventy-site
npm init -y
npm pkg set type=module
npm install --save-dev @11ty/eleventy
mkdir -p src/_data src/assetsjavascript// src/_data/projects.js
export default [
{
name: "Eleventy",
description: "简单、灵活的静态站点生成器",
url: "https://www.11ty.dev/",
},
{
name: "Astro",
description: "内容驱动的多框架 Web 框架",
url: "https://astro.build/",
},
];html---
title: 值得关注的开源项目
---
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>{{ title }}</title>
</head>
<body>
<main>
<h1>{{ title }}</h1>
<ul>
{% for project in projects %}
<li>
<a href="{{ project.url }}">{{ project.name }}</a>
<p>{{ project.description }}</p>
</li>
{% endfor %}
</ul>
</main>
</body>
</html>javascript// eleventy.config.js
export default function (eleventyConfig) {
eleventyConfig.addPassthroughCopy("src/assets");
return {
dir: {
input: "src",
output: "_site",
data: "_data",
},
};
}bashnpx @11ty/eleventy --serve
# 生成生产文件到 _site
npx @11ty/eleventy下一步：先让所有核心内容和导航在纯 HTML 下可用，再按功能添加原生 JavaScript、Web Components 或 Islands；同时统一团队使用的模板语言，避免不必要的语法混用。
类似项目
这些工具也会在构建阶段生成页面，但在组件模型、交互水合和实现语言上有不同侧重。
Eleventy vs Astro
Eleventy 和 Astro 都适合内容网站并默认输出静态 HTML，但 Eleventy 更接近模板驱动的通用生成器，Astro 则提供组件语法、Islands 和更集成的现代前端体验。
| 比较维度 | Eleventy | Astro |
|---|---|---|
| 核心定位 | 灵活、模板优先的静态站点生成器 | 内容优先、支持多框架的 Web 框架 |
| 模板与组件 | Markdown、Liquid、Nunjucks、WebC 等多种选择 | .astro 组件为主，可引入 React、Vue、Svelte 等 |
| 客户端 JavaScript | 完全自行添加，不提供默认水合模型 | 默认零 JS，通过 client:* 指令按 Island 水合 |
| 数据组织 | Data Cascade、Collections、Pagination 和全局数据 | Content Collections、Loader、Schema 与页面数据获取 |
| 动态渲染 | 核心以构建时静态输出为主 | 支持 SSG、SSR、混合路由和 Server Islands |
| 项目约束 | 目录与模板高度自由，团队自行建立规范 | 文件路由、组件和集成方式更统一 |
| 更适合 | 博客、文档、渐进增强和长期稳定的内容站 | 需要组件化、局部交互或按需服务端渲染的内容站 |
如果网站主要由内容与模板组成，希望完全控制 HTML、自由选择目录结构并保持较少客户端脚本，Eleventy 通常更直接；如果需要复用 React/Vue/Svelte 组件、精细控制 Island 水合，或混合静态与动态路由，Astro 的集成体验更完整。
资料核验
版本、维护信息与本页采用的官方资料来源。
本次核验覆盖 Eleventy 的核心定位、主要能力、官方入口与开源许可。项目版本持续更新，具体补丁版本、兼容性和迁移要求请在采用前继续核对官方发布记录。
官方仓库未归档，核验时最近可见的代码活动日期为 2026 年 7 月 24 日。该状态表示项目近期仍有公开维护活动，不代表固定发布频率或长期支持承诺。