Eleventy (11ty)

What is Eleventy (11ty)?

Eleventy (11ty) is a JavaScript static site generator that runs on Node.js. It reads content and template files, such as Markdown, Nunjucks or Liquid, and writes plain static HTML files to an output folder (_site by default) that you can upload to any web host or CDN.

It belongs to the same family as Hugo and Astro: the work happens at build time, so a visitor gets a finished file instead of a page assembled on every request. For the general idea, see static site generation (SSG).

How Eleventy works

Eleventy reads an input directory (the current directory by default), turns every template it finds into one or more pages and writes them to the output directory. Layouts wrap the content, and data from several places is merged before each page renders. Eleventy calls this merge the data cascade. When two sources define the same key, the higher one wins. From highest to lowest priority:

• Computed data
• Front matter in the template itself
• Template data files
• Directory data files, including parent directories
• Front matter in layouts
• Global data set in the configuration
• Global data files

Configuration lives in a JavaScript file that Eleventy finds on its own, for example eleventy.config.js. The .mjs variant is supported from Eleventy 3.

Template languages

Eleventy does not force one template language. Its documentation lists HTML, Markdown, MDX, JavaScript, JSX, TypeScript, WebC, Nunjucks, Liquid, Handlebars, Mustache, EJS, HAML, Pug and Sass, and you can add a custom one. You can mix them in one project, which makes it easy to migrate an old site one template at a time.

Collections and pagination

Collections group content. Give pages the same string in the tags front matter and they appear together in collections.<tag>; collections.all holds everything by default. Tags exist only to build collections, they are not a category hierarchy.

Pagination turns one template into many pages. You add a pagination block with a data source, a size and usually a permalink. With four items and a size of two, Eleventy writes two pages and gives each one its items plus links to the previous and next page.

Example: a small blog

Put Markdown posts in a posts folder, give each one tags: post and a layout, then add an index template that loops over collections.post. After a build, the output folder holds one HTML file per post plus a list page. Upload that folder and the site is live. There is no application server to keep running.

Common mistakes

• Expecting request-time features. A generated site does no server rendering, so forms, search, comments and logins need a third-party service or a serverless function. If you need pages built per request, look at server-side rendering (SSR).
• Treating tags as categories. They only build collections, so plan your own taxonomy in front matter or data files.
• Being surprised by data cascade priority. A value in front matter beats one in a directory data file, and computed data beats both. Check the order above before debugging a value that will not change.
• Adding heavy client-side JavaScript back in. The speed advantage comes from sending little script, so measure before you add bundles.

Eleventy, load testing and monitoring

A static site served from a CDN rarely collapses under traffic, so a full-site load test is usually less useful than testing the parts that are not static: form handlers, search endpoints and serverless functions. Use LoadFocus load testing for those endpoints and API monitoring to watch them between releases.

Because the output is plain HTML, page speed depends mostly on your assets and hosting. Page speed monitoring tracks Lighthouse scores and Core Web Vitals over time, and the post how to monitor Core Web Vitals with alerts and reports walks through the setup.

FAQ: Eleventy

Is Eleventy a framework?

No. It is a build tool that turns templates and data into static files. It has no front-end runtime of its own, so you decide whether to add any client-side JavaScript.

What do I need to run Eleventy?

Node.js. The documentation asks for version 18 or higher and recommends even-numbered releases.

Can Eleventy render pages on the server per request?

The default output is static HTML built ahead of time. For per-request rendering, use a framework with server rendering such as Next.js or Nuxt, or call a serverless function from your static pages.

How is Eleventy different from Hugo?

Both generate static sites. Eleventy runs on Node.js and is configured in JavaScript with many template languages, while Hugo is a single Go program with its own templating.

Where can I host an Eleventy site?

Anywhere that serves static files: a storage bucket behind a CDN, a static hosting service or a plain web server. Upload the contents of the output folder.