SEO中文网

Appearance

Eleventy（11ty） ​

Eleventy（简称11ty）是Node.js编写的轻量静态站点生成器SSG，定位是Jekyll的JS替代方案，主打简单、零配置、无强制前端框架、构建速度快，输出纯静态HTML文件。 官网：https://www.11ty.dev/，支持中文文档。

Eleventy核心工作原理 ​

读取源目录里的模板/Markdown内容，经过模板引擎渲染，输出到 _site 文件夹，得到完整静态网站；不自带运行时JS，输出就是纯HTML/CSS/JS，可以部署到任何静态托管（Netlify、Vercel、Github Pages、Nginx）。

  • 配置文件：.eleventy.js，几乎所有自定义都写在这一个文件内。
  • 文件系统路由：文件路径直接对应URL路径，不需要额外路由配置，例如 posts/hello.md 自动生成 /posts/hello.html。
  • Front‑matter：Markdown头部YAML元数据，用来设置页面标题、布局、标签、自定义变量。

✨Eleventy主要特性 ​

  1. 零配置开箱即用，不强制规定项目目录结构，兼容你现有的文件组织方式。
  2. 多模板引擎同时混用，一个项目可以同时使用多种模板：Markdown、Nunjucks、Liquid、Handlebars、EJS、WebC、原生HTML等，默认推荐Nunjucks。
  3. 零客户端JS默认：不会自动注入框架代码，页面默认干净；交互需要自己引入Alpine.js、Vanilla JS等。
  4. 集合(Collections)机制：自动按标签、分类把md文件聚合，用来做博客列表、归档页、标签页，非常适合博客、文档站。
  5. 数据文件系统：支持JSON/JS/YAML全局数据，全局变量可以在所有模板使用；也可以使用页面局部数据。
  6. 插件生态：自定义过滤器、短代码、转换器，可使用npm生态的包；WebC是官方组件方案，服务端渲染Web Components。
  7. 构建速度优秀：没有虚拟DOM、不做打包，大量页面构建速度远快于Gatsby、Next.js；数千篇文章构建只需要几秒。
  8. 本地开发服务：--serve 启动热重载开发服务器，修改文件立刻刷新浏览器。

📦快速上手Eleventy ​

环境要求：Node.js ≥18

bash
# 初始化项目
npm init -y

# 安装eleventy
npm install @11ty/eleventy --save-dev

# 启动本地开发服务
npx @11ty/eleventy --serve

# 生产构建，输出 _site 目录
npx @11ty/eleventy

最简单的项目：新建 index.md，写Markdown，直接运行就生成静态页面，不需要任何配置文件。

👍Eleventy优点 ​

  1. 学习门槛低：懂HTML、Markdown、基础JS就能上手，没有复杂框架概念。
  2. 自由度极高：不锁死技术栈。你可以随便用CSS、Tailwind、Alpine、原生JS，不强制React/Vue。
  3. 输出纯净静态文件，体积小，访问速度快，托管成本低。
  4. 内容与模板分离，方便迁移；如果以后想换别的SSG，Markdown内容可以直接复用。
  5. 适合内容驱动站点：博客、文档、个人作品集、简单营销官网。

👎Eleventy缺点 ​

  1. 没有内置客户端交互能力，复杂交互需要自己手动写JS，不像Astro/Next.js自带组件岛屿。
  2. 生态相比Astro、Hugo，主题模板数量偏少，很多需要自己写模板。
  3. 不支持服务端渲染SSR，不适合需要大量动态用户交互的网站。
  4. 高级自定义需要写JS配置，需要一点Node.js基础。

Eleventy和主流SSG简单对比 ​

工具语言特点适合场景
Eleventy(11ty)Node.js轻量、多模板、无强制JS运行时，构建快博客、文档、静态内容站，希望完全控制前端代码
HugoGo构建极快，主题丰富大型文档、博客，不想写JS
AstroNode.js岛屿架构，支持React/Vue组件，兼顾静态+轻交互内容站+部分交互页面
GatsbyNode.jsReact重度，GraphQL，配置重大型内容站，重度React项目
JekyllRuby老牌，GitHub Pages默认简单博客，Ruby环境

选型建议：如果你想要纯静态、不想被框架绑架、写博客/文档，希望自己完全掌控HTML/CSS，Eleventy非常合适；如果你需要大量组件交互，优先考虑Astro。

Eleventy适合的项目 ​

  • 个人博客、技术笔记
  • 产品文档站点
  • 作品集、个人主页
  • 静态营销落地页
  • 多站点静态项目

不适合 ​

  • 需要登录、用户动态、大量实时交互的Web应用（这时候应该选Next.js/Nuxt）。

我来给你搭一个最小可运行的 Eleventy 示例项目，直接复制就能跑。先看一下当前目录。我来创建一个完整的最小 Eleventy 项目，包含首页、博客列表、两篇示例文章和基础布局。所有文件已创建，现在安装依赖并构建验证项目能否正常运行。依赖安装成功，运行构建验证。构建成功，生成了 5 个页面。看一下最终的项目结构。项目已搭建完成并验证构建通过。下面是完整说明。

Eleventy DEMO项目结构 ​

eleventy-demo/
├── .eleventy.js          # Eleventy 配置文件（核心）
├── .gitignore
├── package.json
└── src/
    ├── index.md           # 首页（Markdown + Nunjucks 混排）
    ├── about.md           # 关于页
    ├── posts.njk          # 文章列表页（Nunjucks 模板）
    ├── _data/
    │   └── site.json      # 全局站点数据（标题、作者等）
    ├── _includes/
    │   ├── base.njk       # 基础布局（HTML 框架 + 样式）
    │   └── post.njk       # 文章详情布局（继承 base）
    └── posts/
        ├── posts.json     # 目录级配置（标签、布局、URL）
        ├── hello-world.md # 示例文章 1
        └── eleventy-core-concepts.md  # 示例文章 2

运行方式 ​

bash
cd eleventy-demo

# 安装依赖（已完成）
npm install

# 启动本地开发服务器（带热重载）
npm start
# 访问 http://localhost:8080

# 生产构建，输出到 _site/ 目录
npm run build

核心文件解读 ​

.eleventy.js — 配置中心 ​

所有自定义都写在这里。这个示例做了三件事：

  1. 指定目录结构：源文件在 src/，输出到 _site/
  2. 注册过滤器：readableDate 把日期格式化成中文可读格式
  3. 静态资源透传：src/assets/ 里的文件直接复制到输出目录

posts.json — 目录级数据 ​

这是 Eleventy 的巧妙设计：放在 posts/ 目录下的 JSON 文件，会自动应用到该目录下所有内容文件。这里统一设置了：

  • layout: post.njk — 所有文章用文章布局
  • tags: ["posts"] — 所有文章打上 posts 标签，自动进入集合
  • permalink — 自定义 URL 为 /posts/文件名/ 形式

集合（Collections）如何工作 ​

因为所有文章都有 posts 标签，Eleventy 自动创建了 collections.posts 集合。在首页和文章列表页中通过遍历这个集合来展示文章列表：

njk
{% for post in collections.posts | reverse %}
  <a href="{{ post.url }}">{{ post.data.title }}</a>
{% endfor %}

reverse 过滤器让最新的文章排在前面。

你可以马上做的事 ​

  1. 改站点信息：编辑 src/_data/site.json，换成你的博客名和作者
  2. 写新文章：在 src/posts/ 下新建 .md 文件，参考已有文章的 Front-matter 格式
  3. 改样式：编辑 src/_includes/base.njk 中的 <style> 部分
  4. 加页面：在 src/ 下新建 .md 或 .njk 文件，自动生成对应页面

构建验证结果：5 个页面全部生成成功（首页、关于页、文章列表页、两篇文章详情页），可以直接部署到 Netlify、Vercel、GitHub Pages 等任何静态托管平台。

Copyright © 2026 SEO中文网