CheatEleventy Static site generator
Light · Postcard
102 × 152 mm · PDF
Dark · Postcard
102 × 152 mm · PDF
Ink saver · Postcard
102 × 152 mm · PDF
Light · A4 landscape
297 × 210 mm · PDF
Dark · A4 landscape
297 × 210 mm · PDF
Ink saver · A4 landscape
297 × 210 mm · PDF
Light · A3 landscape
420 × 297 mm · PDF
Dark · A3 landscape
420 × 297 mm · PDF
Ink saver · A3 landscape
420 × 297 mm · PDF
Start here
npx @11ty/eleventy
Build into _site
npx @11ty/eleventy --serve
Dev server, live reload
npx @11ty/eleventy --input=<dir>
Choose the source folder
npx @11ty/eleventy --output=<dir>
Choose the output folder
npx @11ty/eleventy --watch
Rebuild on change
npx @11ty/eleventy --quiet
Less console noise
npx @11ty/eleventy --dryrun
Run without writing files
layout: <file>
Wrap a page in a layout
Concepts
- Data cascade
- Template md, njk, liquid, html
- Layout in _includes
- _site output folder
Running
npx @11ty/eleventy
Build the site from the current folder
npx @11ty/eleventy --serve
Build, serve and live-reload
npx @11ty/eleventy --input=<dir>
Set the input directory
npx @11ty/eleventy --output=<dir>
Set the output directory
npx @11ty/eleventy --watch
Rebuild on file changes, no server
npx @11ty/eleventy --quiet
Reduce console logging
npx @11ty/eleventy --dryrun
Run without writing any files
npx @11ty/eleventy --help
List current commands and flags
Front matter & layouts
layout: <file>
Wrap this page in a layout
title: <text>
Set a page variable
permalink: <path>
Choose the output path
permalink: false
Render but do not write a file
tags: <name>
Add the page to a collection
date: <date>
Override the date used for sorting
{{ content | safe }}
Output the page body in a Nunjucks layout
{{ page.url }}URL of the current page
Data cascade
| Source | Where |
|---|---|
Computed data |
eleventyComputed |
Template front matter |
the page itself |
Template data file |
<page>.11tydata.json |
Directory data file |
<dir>.11tydata.json |
Layout front matter |
layout file |
Config global data |
config API |
Global data file |
_data/*.json|js |
_data/<name>.json
Global data, available as <name>
_data/<dir>/<name>.json
Nested global data as <dir>.<name>
<dir>/<dir>.11tydata.json
Data shared by templates in a folder
Collections & pagination
collections.<tag>
All pages carrying that tag
{% for post in collections.post %}
Loop over a collection (Nunjucks)
collections.post | reverse
Newest first (non-mutating filter)
pagination:
Front matter block to split data into pages
data: <path>
Dataset to paginate
size: <n>
Items per generated page
pagination.items
Items on the current page
pagination.pageNumber
Current page index, starts at 0
pagination.href.next
URL of the next page
Config file
eleventy.config.js
Config file name (or .eleventy.js, .mjs, .cjs)
export default function (eleventyConfig) {}
Config entry point (ESM)
export const config = { dir: { input, output } }
Set folders in the config
eleventyConfig.addPassthroughCopy("<path>")
Copy files to output untouched
eleventyConfig.addFilter("<name>", fn)
Add a template filter
eleventyConfig.addCollection("<name>",
fn)
Define a custom collection
eleventyConfig.addPlugin(<plugin>)
Enable a plugin
Recipes
npm init -ynpm install --save-dev @11ty/eleventyecho '# Hello' > index.mdnpx @11ty/eleventy --serve# posts/posts.11tydata.json{ "tags": "post", "layout": "post.njk" }# then, in a template{% for post in collections.post %} <a href="{{ post.url }}">{{ post.data.title }}</a>{% endfor %}// eleventy.config.jsexport default function (eleventyConfig) { eleventyConfig.addPassthroughCopy("css");};export const config = { dir: { input: "src", output: "dist" } };---pagination: data: collections.post size: 10permalink: "blog/{{ pagination.pageNumber }}/index.html"---
