Eleventy (11ty)

What is Eleventy (11ty)?

Eleventy, often written as 11ty, is a JavaScript static site generator. It takes a folder of content files, such as Markdown documents, HTML pages, and template files, and transforms them into a set of plain static HTML pages that can be served from any web server or content delivery network. Eleventy runs entirely at build time on your machine or inside a continuous integration pipeline. The output is ordinary HTML and CSS, and only JavaScript if you add it yourself. That output-first philosophy is why Eleventy sites tend to be small, fast, and easy to host. Built on Node.js, Eleventy is intentionally unopinionated: it forces no front-end framework on you, ships no client-side runtime, and does not lock you into a single template language.

What is a static site generator?

A static site generator, or SSG, produces a complete website ahead of time rather than assembling each page on every request. In a traditional dynamic stack, a server runs application code and queries a database each time a visitor loads a page. With a static site generator, that work happens once, during the build, and the result is a collection of finished HTML files. When a visitor arrives, the server simply hands over a file that already exists. There is no database to query at request time, no server rendering to wait for, and a very small attack surface. Static files also cache extremely well at the edge, which is why static sites frequently post excellent scores when you measure them with performance and Core Web Vitals tools.

How Eleventy works: the data cascade

The core idea behind Eleventy is the data cascade. Every page can receive data from several sources, and Eleventy merges those sources in a defined order of priority: front matter written directly in a template, JSON or JavaScript data files in a special data directory, computed data generated at build time, and directory-level data files that apply to every template in a folder. Higher-priority sources override lower-priority ones, so you set sensible defaults globally and override them for a single section or page. When Eleventy builds, it reads each input file, resolves its data through the cascade, runs the chosen template engine to produce HTML, and writes the result to an output directory named _site by default. Because data files can be plain JavaScript, you can fetch from an API or compute values during the build with no runtime dependency.

Template languages Eleventy supports

One of Eleventy's defining strengths is that it supports many template languages out of the box, and you can mix them within a single project. A common pattern is to write article bodies in Markdown while wrapping them in a Nunjucks or Liquid layout that supplies the surrounding page structure.

• Markdown for long-form content such as articles and documentation.
• Nunjucks and Liquid for layouts, loops, includes, and conditional logic.
• HTML for pages that need no templating at all.
• JavaScript templates and WebC when you want full programmatic or component control.

This freedom means teams rarely relearn a proprietary syntax. If your team already knows Liquid or Nunjucks, you are productive on day one.

Zero-config philosophy and JavaScript configuration

Eleventy is designed to run with zero configuration. Point it at a folder of files and it produces a site. As a project grows you add a single configuration file, conventionally named .eleventy.js or eleventy.config.js, which is plain JavaScript. In that file you register shortcodes, filters, plugins, collections, and passthrough copy rules for static assets. Because the configuration is ordinary code rather than a rigid schema, you have full programmatic flexibility without ceremony, and you only introduce complexity when your project actually needs it.

Collections and pagination

Collections are how Eleventy groups related content. Any set of pages that share a tag, such as every post tagged blog, automatically becomes a collection you can loop over to build index pages, navigation menus, tag archives, and feeds. Collections can also be defined programmatically in the configuration file for advanced sorting or filtering. Pagination is closely related: Eleventy can split a large collection across multiple pages, generate a page per item from a data set, and even create pages from the keys of an object. This is how a single template can output hundreds of tag pages or product pages from one data source, all as static HTML.

Why choose Eleventy

Developers reach for Eleventy when they want speed and control without the weight of a full front-end framework. Because Eleventy ships no client-side runtime by default, the pages it produces are lean: no hydration step, no large JavaScript bundle to parse, no framework overhead. You add JavaScript only where a specific feature needs it, which keeps the baseline extremely light. The other draw is simplicity. The mental model is small: content plus templates plus data equals HTML. There is far less to learn than with tools that combine routing, bundling, server rendering, and state management, and for content-driven sites that reduced surface area means faster builds, easier debugging, and lower maintenance.

Eleventy compared with other tools

Eleventy is a pure static site generator focused on producing HTML, whereas some alternatives bundle a client-side framework or a server runtime.

Hugo is written in Go and is renowned for extremely fast builds on huge sites, though its Go template syntax is less familiar to many web developers. Next.js and Gatsby are React-based and fit better when you need a rich single-page application, at the cost of shipping a framework to the browser. Astro sits closer to Eleventy in spirit but adds a component model and partial hydration through its islands architecture. Eleventy's differentiator is minimalism: it generates static HTML from content and templates with very little imposed structure.

Typical use cases

Eleventy is a natural fit for content that is written once and read many times. Common projects include personal and company blogs, technical documentation sites, product and marketing landing pages, changelogs, portfolios, and knowledge bases. Any of these can be built, committed to version control, and deployed as static files to a host or CDN with no running application to maintain.

Performance benefits

Static output is the foundation of Eleventy's performance story. Pre-rendered HTML can be served instantly from a cache close to the visitor, which shortens time to first byte and helps the Largest Contentful Paint. Because Eleventy ships no framework JavaScript by default, there is little for the browser to download, parse, and execute, which benefits interaction responsiveness. That said, a fast generator is a starting point, not a guarantee. Real-world speed still depends on image sizes, third-party scripts, font loading, and hosting, so it is good practice to measure a generated site under realistic conditions, checking Core Web Vitals and running load tests to confirm your CDN and caching hold up as traffic grows.

Getting started overview

Because Eleventy runs on Node.js, you begin by installing it into a project with a package manager. From there you create a folder of content, add an optional configuration file, and run the build command to generate the site into the output directory. Eleventy also includes a development server with hot reloading, so you can preview changes locally as you edit. When you are satisfied, the same build command produces the final static files, which you commit or upload to your host. Many teams wire this into a continuous integration pipeline so every push rebuilds and redeploys the site automatically.

Limitations to be aware of

Eleventy is not the right tool for every project. Because it renders at build time, content that must change on every request, such as a live user dashboard or a personalized feed, needs a dynamic backend or client-side code layered on top. Very large sites can experience long build times, since every page is regenerated, although incremental builds mitigate this. Eleventy is JavaScript and Node.js based, so it assumes some comfort with that ecosystem. Finally, its minimalism means features that frameworks include by default, such as image optimization or bundling, are added through plugins rather than bundled in, which gives flexibility but requires assembling your own toolchain.

FAQ about Eleventy

Is Eleventy free to use?

Yes. Eleventy is open source and free to use, including for commercial projects. You install it as a Node.js package and run it locally or in a build pipeline at no cost.

Do I need to know React to use Eleventy?

No. Eleventy does not use React or any client-side framework. You work with template languages such as Markdown, Nunjucks, and Liquid, and you only add JavaScript where a specific feature requires it.

What is the difference between Eleventy and WordPress?

WordPress renders pages dynamically from a database on each request, while Eleventy pre-renders every page to static HTML at build time. Eleventy sites have no database or server application to maintain, which usually means faster delivery and a smaller security surface, but content changes require a rebuild rather than an instant edit in an admin panel.

Can Eleventy handle a large website?

Eleventy can build sites with thousands of pages. On very large sites, full rebuilds can take time because every page is regenerated, so teams use incremental builds and efficient data sources. For the largest sites where raw build speed is the top priority, some teams prefer Hugo.

Does Eleventy improve SEO?

Eleventy does not rank pages by itself, but the fast, clean, server-rendered HTML it produces is easy for search engines to crawl and tends to perform well on Core Web Vitals, which are part of Google's page experience signals. Good content, correct metadata, and sensible site structure still do the heavy lifting.

How is Eleventy different from a framework like Next.js?

Next.js is a React framework that can render on a server and ships a JavaScript runtime to the browser for interactive, app-like experiences. Eleventy is a pure static site generator that outputs plain HTML with no client-side framework by default. Choose Eleventy for content-driven sites that value simplicity and minimal JavaScript, and choose Next.js when you need a rich React application.