Eleventy, 2024 in Review

Stable: 3.0.0
Canary: 3.0.1-alpha.4

Toggle Menu

Eleventy 1.93s

Gatsby 29.05s

入门

17.7k Star Eleventy on GitHub! This is an easy way to support our underrated project and help boost our rank on both GitHub and jamstack.org’s list of site generators.

Eleventy v3.0.0 需要一个 JavaScript 运行时环境才能运行，一般推荐使用 Node.js — 18 或更高版本。

你可以在终端窗口（或者命令行窗口）中运行 node --version 命令来检查是否安装了 Node。 (等等，什么是终端窗口？) 如果找不到 Node 或者输出的版本号小于 18，那么在进入下一步之前，你需要下载并安装 Node.js。我们推荐您使用偶数版本号的 Node.js。

有视频教程吗？当然，看这里：6 分钟从零开始创建一个博客。

Step 1 创建项目目录

使用 mkdir 命令（全称为 make directory）为你的项目创建一个目录：

mkdir eleventy-sample

然后使用 cd 命令（全称为 change directory）进入刚才创建的目录：

cd eleventy-sample

Step 2 安装 Eleventy

创建 `package.json` 文件

为你新建的项目安装 Eleventy 时需要一个 package.json 文件。

npm pnpm Yarn

npm init -y

npm 命令（Node.js 自带）将使用 npm init -y 命令为你创建一个 package.json 文件。-y 参数用来告诉 npm 所有设置全部使用默认值并跳过提问。

如果你的项目使用的是 ESM 而不是 CommonJS 的话，请使用以下命令

npm pkg set type="module"

pnpm init

了解更多关于 pnpm 的信息（pnpm 需要单独安装）。

yarn init

了解更多关于 yarn 的信息（yarn 需要单独安装）。

安装 Eleventy

@11ty/eleventy 已经发布到 npm 上了，我们可以通过运行以下命令来安装并保写入到项目的 package.json 文件中：

npm pnpm Yarn

npm install @11ty/eleventy

pnpm install @11ty/eleventy

yarn add @11ty/eleventy

你也可以将 Eleventy 安装到全局环境，但最推荐的还是上面说的安装到项目本地并写入 package.json 文件。

Step 3 运行 Eleventy

npm pnpm Yarn

npx @11ty/eleventy

We can use the npx command (also provided by Node.js) to run our local project's version of Eleventy.

pnpm exec eleventy

yarn exec eleventy

下面是运行 Eleventy 后命令行中输出的内容：

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

如果你在输出的内容中看到 (v3.0.0) 字样，说明你使用的是最新版本的 Eleventy。不过，Eleventy 此时并没有处理任何文件！这是意料之中的，因为我们的目录下是空的，没有任何模板文件。

Step 4 创建模板文件

模板（template）是以 Markdown、HTML、Liquid、Nunjucks 等格式编写的文件，用于存储内容。Eleventy 在构建网站时将这些文件转换为页面。

让我们运行以下两条命令来创建两个新的模板文件。

macOS Linux Windows Cross Platform

echo '<!doctype html><title>Page title</title><p>Hi</p>' > index.html
echo '# Heading' > README.md

echo '<!doctype html><title>Page title</title><p>Hi</p>' | out-file -encoding utf8 'index.html'
echo '# Heading' | out-file -encoding utf8 'README.md'

If the out-file command is not available in your Windows Terminal window (it’s PowerShell specific), use the Cross Platform method instead.

npx @11ty/create index.html "<!doctype html><title>Page title</title><p>Hi</p>"
npx @11ty/create README.md "# Heading"

Learn more about @11ty/create (requires Node.js 18 or newer).

你也可以使用任何文本编辑器来创建这些文件，只需确保将这些文件保存到项目目录下即可，并且设置正确的文件扩展名。

创建好上述 HTML 模板和 Markdown 模板之后，我们再次通过以下命令来运行 Eleventy：

npm pnpm Yarn

npx @11ty/eleventy

pnpm exec eleventy

yarn exec eleventy

输出结果如下所示：

[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.0.0)

我们已将当前目录下的两个模板编译并输出到 _site（默认）目录下了。

Step 5 检查一下模板的输出吧

使用 --serve 参数启动一个支持热重载的本地服务器。

npm pnpm Yarn

npx @11ty/eleventy --serve

pnpm exec eleventy --serve

yarn exec 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.0.0)
[11ty] Watching…
[11ty] Server at http://localhost:8080/