Skip to content
Search

Eleventy

lastmod 2025-12-14created 2022-01-1751 edits

Eleventy, a simpler static site generator.

Categories

Template engines

Plugins

List of Official Plugins

All official plugins live under the @11ty npm organization and plugin names will include the @11ty/ prefix.

  • Image: A utility to resize and generate images.
  • Fetch: A utility to fetch and cache network requests.
  • <is-land>: A plugin to smartly and efficiently load and initialize client-side components to your web site.
  • Render: A plugin to add shortcodes to render an Eleventy template string (or file) inside of another template.
  • RSS: Generate an Atom feed to allow others to subscribe to your content using a feed reader.
  • Internationalization (i18n): Utilities to manage pages and linking between localized content on Eleventy projects.
  • Syntax Highlighting: Code syntax highlighting using PrismJS without client-side JavaScript.
  • Navigation: A plugin for creating hierarchical navigation in Eleventy projects. Supports breadcrumbs too!
  • InputPath to URL: Maps an Eleventy input file path to its output URL.
  • HTML <base>: Emulate the <base> element by adding a prefix to all URLs in .html output files.
  • Directory Output: A plugin to group and sort console output by directory, with file size and benchmarks.
  • Inclusive Language: A plugin to check for inclusive language in markdown files.
  • Serverless: A plugin to run Eleventy in a serverless function for server side rendering (e.g. Previews in your CMS) and/or in very large sites with On-demand Builders.
  • Edge: A plugin to run Eleventy in an Edge Function to add dynamic content to your Eleventy sites.

Community plugins

Features

  • Alternative to Jekyll
  • Uses the current folder structure as is
  • Supports many template engines at once: HTML, Markdown, JS, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug..
  • Written in JS (Node.js), but not a JS framework (generated pages don't need to include any extra JS)

Quick Start

Install it as a devDependencies entry: 

npm install @11ty/eleventy --save-dev

Create a Markdown file. 

echo '# Page header' > index.md

Eleventy requires Node.js 14 (expand to learn more). Run Eleventy. 

npx @11ty/eleventy

Eleventy compiles any files in the current directory matching valid file extensions (.md is one of many) to the output folder (_site by default). It might look like this: 

Writing _site/index.html from ./index.md (liquid)
Wrote 1 file in 0.03 seconds (v2.0.1)

Run 

npx @11ty/eleventy --serve

to start up a local development server and open http://localhost:8080/ in your web browser of choice to see your web site.

Command-line reference 

## 도움말
npx @11ty/eleventy --help

## 빌드:
npx @11ty/eleventy --input=. --output=_site

## 사용 포맷
npx @11ty/eleventy --formats=md,html,ejs

## 서버 실행
npx @11ty/eleventy --serve
npx @11ty/eleventy --serve --port=8081

## 왓치모드로 빌드
npx @11ty/eleventy --watch

## 샷다마우스
npx @11ty/eleventy --quiet

## 테스트
npx @11ty/eleventy --dryrun

## 설정파일 위치 변경
npx @11ty/eleventy --config=myeleventyconfig.js

## 출력포맷: Output a JSON structure (does not write to the file system)
npx @11ty/eleventy --to=json

## 출력포맷: Output a Newline Deliminated JSON structure (does not write to the file system)
npx @11ty/eleventy --to=ndjson

## 출력포맷: Default behavior (Output to file system)
npx @11ty/eleventy --to=fs

## 증분빌드: *Repeat* builds only operate on files that have changed
npx @11ty/eleventy --watch --incremental
npx @11ty/eleventy --serve --incremental

## 증분빌드: Skip the initial full build with `--ignore-initial`
npx @11ty/eleventy --serve --incremental --ignore-initial

## 초기 빌드 없이 실행
npx @11ty/eleventy --watch --ignore-initial
npx @11ty/eleventy --serve --ignore-initial
npx @11ty/eleventy --serve --incremental --ignore-initial

ESM support

Configuration

It looks for the following configuration files.

The first configuration file found is used. The others are ignored.

  • markdownTemplateEngine - The default global template engine used to pre-process Markdown files. Use false to skip pre-processing and only transform Markdown.
  • htmlTemplateEngine - The default global template engine used to pre-process HTML files. Use false to skip pre-processing and pass the content through as-is. (HTML is not transformed, so technically it could be plain text.)

Transforms

URL support

Just write {{ "/pages/two" | url }}. If you set pathPrefix in the config, the prefix is added automatically.

Minify HTML output

Use html-minifier with #Transforms.

Working with Templates

What is a Template
A content file written in a format such as Markdown, HTML, Liquid, Nunjucks, and more, which Eleventy transforms into a page (or pages) in the built site.
Templates can access data exposed through the data cascade using template syntax.

Add CSS, JS, Fonts

Add assets to your Eleventy project.

Layouts

See Eleventy:Layouts

Wrap content in other content.

Layout Chaining

Wrap layouts in other layouts.

Collections

Group, reuse, and sort content in interesting ways.

Create Pages From Data

Iterate over a data set and create multiple output files.

Pagination

Iterate over a data set and create multiple files from a single template.

Pagination Navigation

Create a list of links to every paginated page in a pagination template.

Content Dates

Assign dates to content using dates in the front matter.

Remap a template to a new output location (or prevent it from writing a file)

Internationalization (i18n)

How best to deliver localized, multilingual content.

Common Pitfalls

Some common problems people run into.

Using Data

What is Data
Exposed through variables that can be used inside templates and layouts with template syntax.
Data for a given template is aggregated through a process called the data cascade.

Configure your Templates

There are a few special data keys you can assign in your data to control how templates behave. These can live anywhere in the data cascade.

  • permalink - Changes the output target of the current template. Normally you can't use template syntax to reference other variables in your data, but permalink is an exception. See #Permalinks.
  • layout - Wraps the current template with a layout template found in the _includes folder. See #Layouts.
  • pagination - Lets you iterate over data. Outputs multiple HTML files from a single template.
  • tags - A single string or array that identifies the content as part of a collection. Collections can be reused in other templates.
  • date - Overrides the default date (file creation) to customize how the file is sorted in a collection.
  • templateEngineOverride - Overrides the template engine on a per-file basis. This option only works in Front Matter ⚠️ (for now). Read Issue #445.
  • eleventyExcludeFromCollections - Set to true to exclude this content from all collections (collections tagged in data or set up using the configuration API).
  • eleventyComputed - Programmatically sets data values based on other values in the data cascade.
  • eleventyNavigation - Used by the navigation plugin.

Advanced:

  • eleventyImport.collections - added in v2.0.0. An array of collection names used to inform template dependencies for incremental builds and to render templates in the correct order.
  • dynamicPermalink - An option to disable template syntax for the permalink key.
  • permalinkBypassOutputDir - Writes the file somewhere other than the output directory.

Eleventy Supplied Data

Data Cascade

Eleventy's order of operations for evaluating all the data for a given template and resolving any conflicts that arise.

The data cascade follows the principle of co-location, so data defined broadly to apply to many templates is overridden by data that targets a specific template more specifically.

  • Front Matter Data
  • Template & Directory Data Files
  • Global Data Files
  • Data Deep Merge
  • Config Global Data
  • Computed Data

Environment Variables

JavaScript Data Files

Custom Data File Formats

Themes

Vite example

Tailwind example

Based on the daisyUI example.

tailwind.config.js 

module.exports = {
  content: ['./src/**/*.{njk,md}'],
  plugins: [require('daisyui'), require('@tailwindcss/typography')],
};

package.json 

{
  "name": "11ty-starter",
  "version": "0.0.0",
  "scripts": {
    "dev": "eleventy --serve",
    "build": "eleventy"
  },
  "devDependencies": {
    "@11ty/eleventy": "^1.0.0",
    "@tailwindcss/typography": "^0.5.2",
    "autoprefixer": "^10.4.2",
    "daisyui": "^2.6.0",
    "postcss": "^8.4.7",
    "tailwindcss": "^3.0.23",
    "vite": "^2.8.6"
  }
}

.eleventy.js 

const postcss = require('postcss');
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

module.exports = (eleventyConfig) => {
  eleventyConfig.addNunjucksAsyncFilter('postcss', (cssCode, done) => {
    postcss([tailwindcss(require('./tailwind.config.js')), autoprefixer()])
      .process(cssCode)
      .then(
        (r) => done(null, r.css),
        (e) => done(e, null)
      );
  });
  eleventyConfig.addWatchTarget('styles/**/*.css');
  return {
    dir: {
      input: 'src',
      output: 'dist',
    },
  };
};

./src/_includes/layouts/default.njk 

---
title: My Blog
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    {% set css %}
    {% include "src/styles/index.css" %}
    {% endset %}
    <style>
      {{css | postcss | safe}}
    </style>
  </head>
  <body class="prose">
    {{ content | safe }}
  </body>
</html>

./src/styles/index.css 

@tailwind base;
@tailwind components;
@tailwind utilities;

./src/index.md 

---
layout: layouts/default.njk
---

# Markdown heading

## Markdown heading

### Markdown heading

<div class="not-prose">
  <button class="btn">Hello 11ty</button>
</div>

Web template engine

See that page.

11ty with Nunjucks

Troubleshooting

require() of ES Module .../eleventy.config.js from .../node_modules/@11ty/eleventy/src/Util/Require.js not supported 

[11ty] Eleventy CLI Fatal Error: (more in DEBUG output)
[11ty] 1. Error in your Eleventy config file 'eleventy.config.js'. (via EleventyConfigError)
[11ty] 2. require() of ES Module /home/yourname/Project/yourid-ui/eleventy.config.js from /home/yourname/Project/yourid-ui/node_modules/@11ty/eleventy/src/Util/Require.js not supported.
[11ty] eleventy.config.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
[11ty] Instead rename eleventy.config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/yourname/Project/yourid-ui/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead). (via Error)
[11ty]
[11ty] Original error stack trace: Error [ERR_REQUIRE_ESM]: require() of ES Module /home/yourname/Project/yourid-ui/eleventy.config.js from /home/yourname/Project/yourid-ui/node_modules/@11ty/eleventy/src/Util/Require.js not supported.
[11ty] eleventy.config.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
[11ty] Instead rename eleventy.config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/yourname/Project/yourid-ui/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
[11ty]
[11ty]     at requireLocal (/home/yourname/Project/yourid-ui/node_modules/@11ty/eleventy/src/Util/Require.js:6:10)
[11ty]     at TemplateConfig.requireLocalConfigFile (/home/yourname/Project/yourid-ui/node_modules/@11ty/eleventy/src/TemplateConfig.js:287:23)
[11ty]     at TemplateConfig.mergeConfig (/home/yourname/Project/yourid-ui/node_modules/@11ty/eleventy/src/TemplateConfig.js:334:28)
[11ty]     at TemplateConfig.getConfig (/home/yourname/Project/yourid-ui/node_modules/@11ty/eleventy/src/TemplateConfig.js:159:26)
[11ty]     at new Eleventy (/home/yourname/Project/yourid-ui/node_modules/@11ty/eleventy/src/Eleventy.js:109:39)
[11ty]     at Object.<anonymous> (/home/yourname/Project/yourid-ui/node_modules/@11ty/eleventy/cmd.js:60:16)

It's right there in the log. Because of the "type": "module" field in package.json, the file is interpreted as an ES module. If you want it read as CommonJS, change the extension to .cjs.

And this thing makes the problem snowball...

  1. As of 2023-03-15, this still doesn't seem to be fixed in 11ty
  2. Renamed the config file to eleventy.config.cjs to force it to be read as CommonJS.
  3. I'm using tailwind, and its config file is UMD, so I thought it'd be fine, but it doesn't load. -_- argh
  4. So I rewrote tailwind.config.js in CommonJS style and loaded it with require. (With import() the plugins didn't load -> the plugin function isn't an async function, so await isn't possible)
  5. I'm using vite, and it uses ES Modules. -> I had type: module in package.json, so I removed it and changed the extension to vite.config.mts. See the related issue

It seems this 11ty @11ty/eleventy/src/Util/Require.js only handles the require() function when reading CommonJS.

A detour using esm

#836 says you can make it work with node -r esm node_modules/.bin/eleventy... but it doesn't seem to be a method officially provided by 11ty...

.esmrc.json 

{
  "cjs": {
    "dedefault": true
  }
}

A method you can apply in a plugin

While waiting for this, if anyone is struggling to import ESM-only dependencies, you can do the following. 

module.exports = function(eleventyConfig) {
  let esmDep;

  eleventyConfig.on('eleventy.before', async ({}) => {
    esmDep = await import('esm/dep/name');
  });

  // you can use esmDep here
};

Looks like it was merged in pull request 3074 ... probably available from v3.0.0

List of Static Site Generator

See also

Favorite site

References

  1. Manage_your_SVG_files_with_Eleventy_Render_plugin_-_chriskirknielsen.pdf ↩

author Zer0 sitemap