content-site

Eleventy

所属分类:网站建设与发布平台

支持多种模板语言的轻量 JavaScript 静态网站生成器

Eleventy(通常简称 11ty)是一个静态网站生成器,能够把 Markdown、HTML 以及多种模板语言转换成网页文件。它使用 JavaScript 运行时,可嵌入常见 Node.js 项目工具链,并允许团队选择一种或多种模板语法。对于想把博客、文档或内容网站保存在项目目录中,再生成静态文件部署的开发者,Eleventy 提供了灵活的构建方式。

Eleventy是什么?多模板语言静态网站生成与入门指南

发布于 2026年10月12日更新于 2026年10月27日

Eleventy 官网展示静态网站生成器定位与快速入门内容

从一个最小项目开始

Eleventy 官方快速入门要求使用 JavaScript 运行环境,并建议 Node.js 18 或更新版本。入门流程包括创建项目目录、初始化 package.json、将 @11ty/eleventy 安装到项目依赖,然后运行构建命令。首页还展示了以 npx @11ty/eleventy --serve 启动本地预览的例子。把依赖保存在项目内,有助于团队共享配置,也能减少不同电脑全局安装版本不一致的问题。

最小项目可以从一个 Markdown 或 HTML 文件开始。Eleventy 会根据文件扩展名选择模板引擎,把输入内容构建到默认的 _site 目录。启用开发服务器后,可以在浏览器预览生成页面。正式发布前,先检查本地输出是否包含预期文件、链接和图片,再将生成目录部署到托管服务。

选择熟悉的模板语言

Eleventy 文档列出 Markdown、HTML、Liquid、Nunjucks、JavaScript、JSX、TypeScript、Handlebars、Mustache、EJS、Pug、HAML、Sass 等输入方式。项目可以选择一种主模板语言,也可以根据场景组合多种格式。写文章时,Markdown 容易维护;需要复杂布局时,可以在模板里复用页眉、页脚和文章结构。

模板语言越多,项目的学习与维护成本也越高。开始时先确定主语言和目录规则,确保新成员知道文章放在哪里、模板如何关联数据。若从现有项目引入模板,应先查看它输出到哪里、使用哪些数据文件,再决定是否符合当前站点结构。避免只为一两个特殊页面同时安装多个模板引擎。

Eleventy Getting Started 文档说明 Node.js 环境、npm 安装与模板构建步骤

用集合、数据和分页组织内容

Eleventy 文档包括模板与目录数据文件、全局数据、Front Matter、集合、分页、永久链接、过滤器和国际化等主题。集合可以把带相同标签的文章组织起来,用于生成归档或专题列表;分页适合拆分较长的文章清单;数据文件则可为导航、作者信息或其他重复内容提供集中配置。对于多语言网站,国际化能力可辅助组织不同语言页面。

这些功能应按实际内容规模启用。小型博客可以先维护简单目录和标签;文章数量增加后,再用集合生成分类页并补充清楚的导航。永久链接最好在早期确定,避免文章分享出去后频繁变更地址。升级项目结构前先构建一次,确认集合、分页和模板输出仍然符合预期。

本地预览、部署和维护

Eleventy 提供本地开发服务器,可在内容改变后查看生成页面。开发阶段可以逐步检查首页、文章列表、单篇文章和静态页面;发布时再运行构建,将生成文件交给静态托管平台。静态部署通常不需要在生产服务器上运行 Eleventy,但团队仍需要维护 Node.js 依赖、生成步骤、域名和部署配置。

将源码放进 Git 仓库可以追踪文章和模板变化,也便于回退。正式发布前运行一次完整构建,查看 _site 中是否包含样式、脚本和图片。若部署系统需要执行额外步骤,应把构建命令和 Node 版本写入项目说明,保证其他开发者和自动化流程能重现同样结果。

性能、主题和扩展

Eleventy 官网强调较轻的静态构建方式,并提供性能文档、入门指南、插件和社区资源。静态文件让页面结构由构建步骤提前生成,作者可以根据需要选择图片处理、CSS、搜索和主题等工具。选用主题或插件前,检查它的维护状态、Eleventy 版本要求和输出结构,避免把不需要的前端依赖全部纳入项目。

项目性能还取决于图片大小、脚本数量、字体加载和页面设计。可以在发布前压缩图片、删除未使用样式、检查资源路径,并用浏览器查看实际页面。构建速度快并不意味着可以忽略可访问性、手机布局或代码质量;这些仍需要开发者通过设计和检查来处理。

搜索系统如何发现静态页面

静态页面可能更容易由简单主机提供,但 Google 是否抓取和收录仍取决于页面能否公开访问、内容是否清楚有用、链接结构是否可发现以及站点设置是否允许抓取。Eleventy 本身不会保证收录。文章标题应明确表达问题,正文提供原创解答,小标题、图片替代文字和相关内链要与实际内容一致。

发布后可以检查公开页面、站点地图和内部导航是否准确。如果修改了文章地址,处理旧链接;如果内容已过时,更新正文并注明适用版本。搜索优化应服务读者找到答案,而不是为重复关键词制造无信息页面。模板可以统一输出标题和元信息,但需要确认最终 HTML 中的内容正确。

谁适合使用 Eleventy

Eleventy 适合希望用 JavaScript 工具链构建博客、文档、作品集或企业内容站的开发者。它的优势是模板选择多、内容组织灵活、可输出静态文件;代价是使用者需要理解项目依赖、模板和构建流程。如果作者希望直接在可视化后台编辑文章,或不愿维护代码仓库和发布步骤,应先评估是否需要额外的内容编辑工具。

开始时可以用单篇文章验证项目:安装运行环境,加入一个模板,启动预览,构建输出,再部署到测试地址。确认目录、链接、图片和页面样式正常后,再搬迁完整文章和接入主题。项目持续发展时,把模板约定、运行版本和发布命令写进文档,能让写作与开发协作更顺畅。

上线前检查清单

确认 Node.js 版本满足项目要求,依赖可安装,模板能生成文件,_site 中包含所有页面和资源。检查永久链接、文章列表、图片替代文字、移动布局和站内导航;发布后再通过公开域名抽查内容。把源码、数据、依赖清单和构建说明保存在版本库与备份中,确保未来能重新生成网站。

官方资料