入门

19.1k 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.1.2 需要一个 JavaScript 运行时环境才能运行，一般推荐使用 Node.js — 18 或更高版本。

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

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

Step 1 Make a Project Directory

Create a directory for your project using the mkdir command (short for make directory):

mkdir eleventy-sample

Now move into that directory with the cd command (short for change directory):

cd eleventy-sample

Step 2 Install Eleventy

创建 `package.json` 文件

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

npm pnpm Yarn

npm init -y

The npm command (included with Node.js) will create a package.json file for you with npm init -y. The -y flag tells npm to use default values and skips the questionnaire.

Use the following command if you want to use ESM in your project and not CommonJS.

npm pkg set type="module"

pnpm init

Learn more about pnpm (it requires separate installation).

yarn init

Learn more about yarn (it requires separate installation).

安装 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

Here’s what your command line should look like after you run Eleventy:

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

如果你在输出的内容中看到 (v3.1.2) 字样，说明你使用的是最新版本的 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.

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

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

Alternatively, you can create these using any text editor — make sure you save them into your project folder and they have the correct file extensions.

创建好上述 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.1.2)

We’ve now compiled our two content templates in the current directory into the output folder (_site is the default).

If you’d like to experiment further with template file syntax, edit the following sample README.md file in your browser. Front Matter, Liquid and Markdown syntax are in use.

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

Step 5 Gaze upon your templates

使用 --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.1.2)
[11ty] Watching…
[11ty] Server at http://localhost:8080/

在浏览器中打开 http://localhost:8080/ 或 http://localhost:8080/README/ 网址，就能看到你用 Eleventy 构建的网站了！当你修改并保存模板文件时，Eleventy 会自动刷新浏览器并显示修改后的内容！

Step 6 让网站上线（可选步骤）

Your output folder (_site) now contains all of the statically built files for your new web site. You can upload this folder to any web host! Head over to our deployment documentation to read more about putting your Eleventy project online for everyone to see.