English for Eleventy (11ty) Developers
Vocabulary for developers using Eleventy, the simple static site generator — templates, data cascade, collections, and shortcodes — for teams who value plain-language explanations of a minimal build tool.
Eleventy (often written 11ty) is a static site generator that deliberately avoids a client-side JavaScript framework — it just takes templates and data and outputs plain HTML. Its appeal is simplicity, so the vocabulary around it tends to be simpler too: “data cascade,” “collections,” “shortcodes.” Still, explaining these precisely in English matters when onboarding a new contributor or writing documentation. This guide covers the terms.
Core Philosophy
Zero client-side JavaScript by default — Eleventy ships no framework runtime to the browser unless you deliberately add one; output is plain HTML and CSS unless you opt into more. “We chose Eleventy specifically because the marketing site doesn’t need any client-side framework — plain HTML loads instantly and there’s nothing to hydrate.”
Template language agnostic — Eleventy supports multiple templating languages (Nunjucks, Liquid, markdown, JavaScript templates) in the same project, rather than locking you into one syntax.
“Our layouts are in Nunjucks, but content authors write in plain markdown — Eleventy handles both without any extra configuration.”
The Data Cascade
Data Cascade
The data cascade is Eleventy’s layered system for supplying data to templates — global data files, directory data files, front matter, and computed data all combine, with more specific sources overriding more general ones.
“The page’s title comes from its own front matter, but its layout and default author come from a directory data file further up the cascade.”
Front Matter
Front matter is the YAML block at the top of a template file defining page-specific data — layout, title, tags, and any custom fields.
“Every blog post’s front matter sets its
tagsanddate— that’s what our collections use to group and sort posts.”
Directory Data File
A directory data file (like posts.11tydata.js) applies shared data to every template inside that directory, without repeating it in each file’s front matter.
“Instead of copying the same
layoutandpermalinkpattern into every post’s front matter, we set it once in the directory data file for the posts folder.”
Computed Data
Computed data is data derived from other data at build time — for example, generating an excerpt from a post’s content rather than hand-writing it.
“We added computed data that auto-generates a reading-time estimate from each post’s word count, so authors don’t calculate it manually.”
Collections
Collection — a named group of content items, either automatically created from a shared tag or explicitly configured, used to build listing pages like a blog index or a tag archive.
“The
postscollection includes every file taggedpost, sorted by date — that’s what powers our blog index page.”
Pagination — Eleventy’s built-in mechanism for splitting a large collection across multiple output pages (or generating one page per item in a collection).
“We used pagination to generate one tag-archive page per tag automatically, instead of hand-building a page for each one.”
Templating Vocabulary
Shortcode — a reusable snippet you can call from within any template, similar to a function, used to avoid repeating markup (for example, an embedded YouTube video).
“We wrote a
{% youtube %}shortcode so authors just pass a video ID instead of pasting the full embed markup every time.”
Layout chaining — nesting one layout inside another (a post layout wrapping content, itself wrapped by a base layout), so shared structure isn’t duplicated.
“Our post layout handles the article-specific wrapper, and it in turn extends the base layout for the header and footer — that’s layout chaining.”
Filter — a function that transforms a value within a template, such as formatting a date or truncating a string, called with a pipe syntax in Nunjucks or Liquid.
“We wrote a custom
readableDatefilter so every template formats dates the same way, instead of repeating date-formatting logic everywhere.”
Build and Output Vocabulary
Passthrough copy — telling Eleventy to copy certain files or folders (images, CSS, fonts) directly to the output directory without processing them as templates.
“CSS and images are passthrough copied — Eleventy doesn’t try to template them, it just copies them straight to the output folder.”
Incremental build — Eleventy’s --incremental flag rebuilds only files affected by a change during local development, speeding up the feedback loop.
Explaining Eleventy’s Simplicity to a Team
| Situation | Phrase |
|---|---|
| Justifying the choice for a content-heavy site | ”We don’t need any client-side interactivity here — Eleventy outputs plain HTML, which means faster load times and one less framework to maintain.” |
| Explaining the data cascade to a new contributor | ”Front matter on the page always wins, but shared defaults come from the directory data file — check both before assuming a setting is missing.” |
| Describing a shortcode | ”Instead of pasting the embed code every time, just use the shortcode — it keeps the markup consistent and easy to update later.” |
| Discussing performance | ”There’s no hydration step to think about — the whole page is static HTML, so there’s nothing to profile on the client side.” |
Common Mistakes
- Calling the data cascade “just front matter” — front matter is only one layer; directory data files and global data also contribute, and precedence order matters.
- Saying “Eleventy doesn’t support JavaScript” — it supports JavaScript templates and client-side scripts you add deliberately; it simply doesn’t ship a framework runtime by default.
- Referring to a shortcode as a “component” — shortcodes are template-level reusable snippets, not the same concept as a framework component with its own state.
Practice Exercise
- Explain, in two sentences, why the data cascade’s precedence order matters when debugging a page that has the wrong layout.
- Write a short README section explaining what a shortcode does and when to reach for one instead of repeating markup.
- Draft a one-paragraph justification for choosing Eleventy for a documentation site with no interactive features.