Eleventy Quick Setup

发表于 2026-08-15 更新于 2026-08-19

Eleventy 快速安装

SCG GitHub 11ty/buildawesome

Eleventy

技术栈：Node.js
官方网站：11ty.dev
项目地址：github.com/11ty/eleventy
模板演示：eleventy-simple.pages.dev
插件演示： fastcomments.com/commenting-system-for-11ty

📝 笔记总结

# 检查 Node.js 版本
node --version
# 创建项目目录
mkdir eleventy-sample
# 进入项目目录
cd eleventy-sample
# 创建 package.json，-y 使用默认值跳过问卷
npm init -y
# 如果项目中使用 ESM 而不是 CommonJS
npm pkg set type=\"module\"
# 安装 Eleventy 并保存到项目的 `package.json` 
npm install @11ty/eleventy
# 运行本地项目版本 Eleventy
npx @11ty/eleventy
# 创建两个新的模板文件
echo '<!doctype html><title>Page title</title><p>Hi</p>' | out-file -encoding utf8 'index.html'
echo '# Heading' | out-file -encoding utf8 'README.md'
# 创建好模板后，再次运行 Eleventy
npx @11ty/eleventy
# --serve 启动支持热重载的本地 Web 服务器
npx @11ty/eleventy --serve

📖 内容来源

Eleventy Documentation - Guide - Get Started

🚀 快速安装

🔍 Node.js > 18

1 2	# 检查 Node.js 版本 node --version

📁 步骤 1：创建项目目录

step 1 make a project directory

# 创建项目目录
mkdir eleventy-sample
# 进入项目目录
cd eleventy-sample

📦 步骤 2：安装 Eleventy

Step 2 Install Eleventy

# 创建 package.json，-y 使用默认值跳过问卷
npm init -y
# 如果项目中使用 ESM 而不是 CommonJS
npm pkg set type=\"module\"
# 安装 Eleventy 并保存到项目的 `package.json` 
npm install @11ty/eleventy

npm init -y

npm install @11ty/eleventy

▶️ 步骤 3：运行 Eleventy

Step 3 Run Eleventy

1 2	# 运行本地项目版本 Eleventy npx @11ty/eleventy

运行 Eleventy 后，命令行输出：

1	[11ty] Wrote 0 files in 0.03 seconds (v3.1.6)

但是，Eleventy 没有处理任何文件，只有一个空文件夹，因为里面没有模板。

npx @11ty/eleventy

📝 步骤 4：创建模板

Step 4 Create some templates

模板是一种内容文件，可以使用 Markdown、HTML、Liquid、Nunjucks 等格式编写，Eleventy 在构建站点时会将其转换成一个（或多个）页面。

1
2
3

# 创建两个新的模板文件
echo '<!doctype html><title>Page title</title><p>Hi</p>' | out-file -encoding utf8 'index.html'
echo '# Heading' | out-file -encoding utf8 'README.md'

如果 out-file 命令在 Windows 终端窗口中不可用（PowerShell 特有的命令），改用跨平台方法。
或者使用任何文本编辑器创建模板文件。
确保保存到项目文件夹，文件扩展名正确。

1 2	# 创建好模板后，再次运行 Eleventy npx @11ty/eleventy

命令行输出大致如下所示：

1
2
3

[11ty] Writing _site/README/index.html from ./README.md (liquid)
[11ty] Writing _site/index.html from ./index.html (liquid)
[11ty] Wrote 2 files in 0.04 seconds (v3.1.6)

npx @11ty/eleventy

现在已将当前目录中的两个内容模板编译到输出文件夹中（默认为 _site）。

如果进一步试验模板文件语法，编辑以下示例 README.md 文件，其中使用了 Front Matter、Liquid 和 Markdown 语法。

---
title: Heading
---
# {{ title }}

👀 步骤 5：预览模板

Step 5 Gaze upon your templates

1 2	# --serve 启动支持热重载的本地 Web 服务器 npx @11ty/eleventy --serve

命令行输出大致如下所示：

[11ty] Writing _site/index.html from ./index.html (liquid)
[11ty] Writing _site/README/index.html from ./README.md (liquid)
[11ty] Wrote 2 files in 0.04 seconds (v3.1.6)
[11ty] Watching…
[11ty] Server at http://localhost:8080/