Eleventy：轻量静态站点生成器安装与构建指南

Eleventy（昵称 11ty）是一个更简单的静态站点生成器，作为 Jekyll 的替代方案，用 JavaScript 编写，把一个目录里的模板（多种类型）转换成 HTML。它支持 HTML、Markdown、JavaScript、Liquid、Nunjucks，并通过插件支持 WebC、Sass、Vue、Svelte、TypeScript、JSX 等。

一、项目官方信息

特点：零配置起步、模板灵活、无数据库、输出纯静态 HTML，可托管到任意静态托管（GitHub Pages、Netlify、Vercel、Cloudflare Pages）。

二、官方图片

Eleventy 官方 Logo（Build Awesome 气球）：

三、环境要求

• Node.js（LTS 版本）。
• npm 包管理器。
• 无数据库、无构建链强依赖；纯静态输出。

四、完整部署步骤

1. 安装

npm install @11ty/eleventy --save-dev

注：新包名已迁移为 @awesome.me/buildawesome，但 @11ty/eleventy 仍向后兼容可用。

2. 初始化目录

新建项目目录，放入模板文件，例如：

.
├── src/
│   ├── index.md
│   └── about.md
└── eleventy.config.js

3. 运行 Eleventy

npx @11ty/eleventy

默认会扫描当前目录的模板并输出到 _site/。

4. 本地开发（带实时刷新）

npx @11ty/eleventy --serve

默认启动本地开发服务器，模板改动自动重新生成并刷新浏览器。

5. 配置输入输出目录

在 eleventy.config.js 中配置：

export default function (eleventyConfig) {
  return {
    dir: {
      input: "src",
      output: "_site"
    }
  };
}

6. 构建并部署

npx @11ty/eleventy

把 _site/ 目录上传到任意静态托管即可。

五、使用方法

支持的模板语言

原生支持 HTML、Markdown、JavaScript、Liquid、Nunjucks；通过插件支持 WebC、Sass、Vue、Svelte、TypeScript、JSX 等。

数据与模板

• _data/ 目录下的数据文件会自动注入到模板；
• 模板 front matter 可配置布局、permalink、标签等；
• 集合（collections）可按标签/分类组织文章列表。

常用命令

npx @11ty/eleventy              # 构建到 _site/
npx @11ty/eleventy --serve      # 本地开发服务器
npx @11ty/eleventy --watch      # watch 模式（不启动服务）
npx @11ty/eleventy --output=dist  # 自定义输出目录

插件

官方插件见 https://www.11ty.dev/docs/plugins/ ，含 RSS、语法高亮、图片优化、导航等。

六、常见问题 FAQ

1. 运行后没有输出？ 确认在项目根目录执行，且目录里有 .md/.html 等模板文件；可用 --input=src 指定输入目录。

2. npx @11ty/eleventy 找不到？ 先 npm install @11ty/eleventy --save-dev 把包装到本地项目。

3. 本地开发服务器端口？ --serve 默认起在 http://localhost:8080，端口可通过 --port 修改。

4. 如何部署到 GitHub Pages？ 构建出 _site/ 后，用 GitHub Actions 把该目录发布到 Pages 分支，或直接推到 <user>.github.io 仓库。

5. 想用 Vue/Svelte 组件？ 通过官方插件引入，Eleventy 支持在模板中嵌入组件化模板。

6. 新包名是什么？ 项目包已逐步迁移到 @awesome.me/buildawesome，但 @11ty/eleventy 仍可继续安装使用。

七、跳转链接

• GitHub 仓库：https://github.com/11ty/eleventy
• 官方文档：https://www.11ty.dev/docs/
• 入门指南：https://www.11ty.dev/docs/getting-started/
• npm 包：https://www.npmjs.com/package/@11ty/eleventy
• 插件文档：https://www.11ty.dev/docs/plugins/