Skip to navigation Skip to main content
Eleventy

Eleventy(11ty) 是一个比竞品更简洁的静态网站生成器。

Blog
Help Eleventy: Fill out Survey Awesome!
Versions
Stable
3.0.0
Canary
3.0.1-alpha.1
Toggle Menu

快速入门

Eleventy 需要 Node.js 18 或更高版本才能运行。 你可以在终端窗口（或者命令行窗口）中运行 node --version 命令来检查是否安装了 Node。（等等，什么是终端窗口？） 如果找不到 node 或者它的版本号小于 18，那么你就需要重新 安装 Node.js 后才能继续后面的步骤。

现在，我们将创建一个名为 index.md 的 Markdown 格式的文件。你可以在自己常用的编辑器中创建此文件，或者在终端窗口（或者命令行窗口）中运行以下命令：

echo '# Heading' > index.md
 
echo '# Heading' | out-file -encoding utf8 'index.md'

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

npx @11ty/create index.md "# Heading"

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

使用 npx 运行 Eleventy。npx 是 npm 所提供的一个命令。

npx @11ty/eleventy --serve
 
pnpm dlx @11ty/eleventy --serve

pnpm is an optional alternative to npm that needs to be installed separately.

yarn dlx @11ty/eleventy --serve

Yarn is an optional alternative to npm that needs to be installed separately.

Eleventy 会将当前目录下的任何带有有效的 文件扩展名 (md is one of many) 的文件编译并输到 _site 文件夹下。运行过程中会有类似下面这样的输出：

[11ty] Writing _site/index.html from ./index.md (liquid)
[11ty] Wrote 1 file in 0.03 seconds (v3.0.0)
[11ty] Watching…
[11ty] Server at http://localhost:8080/

--serve 参数用于启动 本地开发服务器。 在浏览器中打开 http://localhost:8080/ 网址就能查看你刚创建的网站了。

News from the Blog

为什么选择 Eleventy？

  • Eleventy 的 构建速度快，并且构建出来的网站速度也快。
    Name Building ×4000 Markdown Files
    Eleventy 1.93s == 🏁
    Astro 22.90s ======================= 🏁
    Gatsby 29.05s ============================== 🏁
    Next.js 70.65s ======================================================================= 🏁
  • Eleventy 能够 稳定地用于生产环境 并且深受用户信赖：
    • Trusted by
    • IndieWeb Avatar for https://www.nasa.gov/NASA
    • IndieWeb Avatar for https://home.web.cern.ch/Cern
    • IndieWeb Avatar for https://tc39.es/TC39
    • IndieWeb Avatar for https://www.w3.org/W3C
    • IndieWeb Avatar for https://about.google/Google
    • IndieWeb Avatar for https://www.mozilla.org/Mozilla
    • IndieWeb Avatar for https://www.jetbrains.com/JetBrains
    • …and more
         Eleventy 已被下载超过 800 万次，并在 GitHub 上被 70,000+ 软件仓库所使用。
  • Eleventy 提供了 对项目输出的完全控制。我们不会在你的页面中 注入自己的标记。
  • Eleventy 拥有一个 真正负责的社区。 What is Addy Osmani’s Twitter PhotoAddy Osmani saying about Eleventy?
  • Eleventy 非常稳定。 从 2017 年 12 月发布第一版本算起，我们已经发布了 57 个版本，这些版本中，只有两个版本涉及到 Eleventy 自身的更改且需要开发者注意。

    a11yproject.com launched with version 1.0.0 of Eleventy. […] It's been a little under three years and I haven't had to make any adjustments to its dependencies, and it can still install and run from a cold start with no complications. When I update the site to use version 2.0.0 I'll actually be removing dependencies, and not adding more. […] That's rare and special.—IndieWeb Avatar for https://ericwbailey.design/ Eric Bailey

  • Eleventy 不会跟踪你。我们 没有且不使用遥测技术，你也无需特意关闭数据收集。
  • Eleventy 可以 零配置 使用，并可以通过灵活的配置项进行扩展。
  • Eleventy 支持多种模板语言。你可以选择其中一种使用，也可以在一个项目中同时使用所有模板语言：
  • Eleventy 支持 独立的第三方模板语言。我们不想用自定义格式的模板语言来束缚你的内容。如果你以后决定使用不同的语法，可以很容易地进行迁移。
  • Eleventy 并不要求你使用任何 JavaScript 框架，这意味着 在默认情况下客户端可以没有任何 JavaScript 代码。我们 从长远考虑，不参与框架竞赛。你的前端技术栈中使用的工具链、模块和组件都能与 Eleventy 脱钩。你可以在Work from a solid foundation of 预渲染模板 的坚实基础上进行开发，以满足你的项目对 渐进式增强 的要求。
  • Eleventy 可以适应现有项目的目录结构。Eleventy 并不要求必须有 app 目录或 pages 目录。按照你想要的目录结构来！
  • Eleventy 支持 增量式采用。我们只查找你所指定的 文件 和 目录。此外，你还可以更精确地选择 丢弃或忽略项目中的特定文件。你无需从零开始一个 Eleventy 项目。Eleventy 非常灵活，一次可以只转换几个模板。因此，迁移你的项目时可快可慢，随你而定。

立即开始使用 Eleventy 吧！ 或者继续了解更多关于 Eleventy 项目的信息。

Open Collective Supporters

Loading…

 中文文档

Todd and Bruce said this button should be bigger and as you can see they were right.

使用 Eleventy 创建的网站

IndieWeb Avatar for https://eslint.org/eslint.org
Screenshot of https://eslint.org/
IndieWeb Avatar for https://nordhealth.design/nordhealth.design
Screenshot of https://nordhealth.design/
IndieWeb Avatar for https://www.filamentgroup.com/www.filamentgroup.com
Screenshot of https://www.filamentgroup.com/
IndieWeb Avatar for https://www.a11yproject.com/www.a11yproject.com
Screenshot of https://www.a11yproject.com/
IndieWeb Avatar for https://blog.glitch.com/blog.glitch.com
Screenshot of https://blog.glitch.com/
IndieWeb Avatar for https://every-layout.dev/every-layout.dev
Screenshot of https://every-layout.dev/
IndieWeb Avatar for https://developer.chrome.com/developer.chrome.com
Screenshot of https://developer.chrome.com/
IndieWeb Avatar for https://gsap.com/gsap.com
Screenshot of https://gsap.com/
IndieWeb Avatar for https://ffconf.org/ffconf.org
Screenshot of https://ffconf.org/
IndieWeb Avatar for https://www.11ty.dev/www.11ty.dev
Screenshot of https://www.11ty.dev/
IndieWeb Avatar for https://lit.dev/lit.dev
Screenshot of https://lit.dev/
IndieWeb Avatar for https://mochajs.org/mochajs.org
Screenshot of https://mochajs.org/
IndieWeb Avatar for https://moderncss.dev/moderncss.dev
Screenshot of https://moderncss.dev/
IndieWeb Avatar for https://tc39.es/tc39.es
Screenshot of https://tc39.es/
IndieWeb Avatar for https://2024.xoxofest.com/2024.xoxofest.com
Screenshot of https://2024.xoxofest.com/
IndieWeb Avatar for https://v8.dev/v8.dev
Screenshot of https://v8.dev/
IndieWeb Avatar for https://digitalhumanities.mit.edu/digitalhumanities.mit.edu
Screenshot of https://digitalhumanities.mit.edu/

上面列出的是 110 位作者的作品。目前总共收集了 1130 个网站。

老王的自卖自夸你可以不信 Rainbow

听听这些 快乐的开发者 是如何评价 Eleventy 的吧：

“Eleventy is almost fascinatingly simple.” —Chris Coyier’s Twitter PhotoChris Coyier

“2022 winner of the Google Open Source Peer Bonus Award” —IndieWeb Avatar for https://google.com/Google

“Eleventy + Netlify have become my new workflow for static sites. I think I'm in love.” —Mina Markham’s Twitter PhotoMina Markham

“Eleventy is absolutely wonderful. It’s by far the nicest static site generator I’ve used in what feels like forever.” —Addy Osmani’s Twitter PhotoAddy Osmani

“Don’t tell Zach I said it but Eleventy is seeming fresh as hell so far” —Mat Marquis’s Twitter PhotoMat Marquis

“I use Eleventy on almost every project at this point and I love it.” —IndieWeb Avatar for https://lea.verou.me/Lea Verou

“Eleventy is a killer static site generator. That’s all.” —Sara Soueidan’s Twitter PhotoSara Soueidan

“I heard Eleventy was good” —Lach Zeatherman’s Twitter PhotoLach Zeatherman

“Jekyll is dead to me” —IndieWeb Avatar for https://andy-bell.co.uk/Andy Bell

“I looked into and actively tried using various static site generators for this project. Eleventy was the only one I could find that gave me the fine-grained control I needed at blazingly fast build times.” —Mathias Bynens’s Twitter PhotoMathias Bynens

“#1 Product of the Day (May 2022)” —IndieWeb Avatar for https://producthunt.com/Product Hunt

…and many more!

竞品

本项目旨在与其它静态网站生成器直接竞争。我们鼓励您试一试、比一比其它竞品：