Eleventy — Simpler Static Site Generator for the Modern Web

Introduction

Eleventy is a static site generator for Node.js that stands out for its simplicity and flexibility. It ships zero client-side JavaScript by default, supports over 10 template languages, and imposes no framework opinions on your output. Eleventy focuses on generating fast HTML pages from your content with minimal configuration.

What Eleventy Does

• Transforms templates and content files into static HTML pages with no required configuration
• Supports 10+ template languages including Markdown, Nunjucks, Liquid, Pug, EJS, and plain JavaScript
• Ships zero client-side JavaScript by default for maximum performance and accessibility
• Provides a data cascade that merges global data, directory data, and front matter into templates
• Includes a dev server with live reload for rapid local development

Architecture Overview

Eleventy reads input files from your project directory, determines the template engine from file extensions, and processes each file through the data cascade. The data cascade merges global JSON/JS data files, directory-level data files, layout front matter, and template front matter in a predictable order. Eleventy then renders each template into HTML output files matching your configured permalink structure. The tool has no runtime — it produces pure static HTML.

Self-Hosting & Configuration

• Install with npm install @11ty/eleventy (no global install needed; use npx)
• Optionally create .eleventy.js (or eleventy.config.js) to configure input/output dirs, plugins, and filters
• Place content in Markdown or any supported template language; front matter controls layout and metadata
• Build with npx @11ty/eleventy and serve the _site/ output directory with any static host
• Use --serve flag for local development with automatic live reload on file changes

Key Features

• Template language agnostic: mix Markdown, Nunjucks, Liquid, and JS templates in one project
• Data cascade system merges global, directory, and front matter data with clear precedence rules
• Pagination and collection APIs for generating tag pages, archives, and content listings
• Plugin ecosystem for image optimization, RSS feeds, syntax highlighting, and more
• Incremental builds for faster regeneration when only specific files change

Comparison with Similar Tools

• Hugo — Go-based with faster raw build speed; Eleventy offers more template language options and Node.js integration
• Gatsby — React-based with GraphQL data layer; Eleventy is lighter with no client-side framework dependency
• Astro — component-based with partial hydration; Eleventy generates plain HTML with no JavaScript overhead
• Jekyll — Ruby-based with GitHub Pages integration; Eleventy is Node.js-native and more flexible in template choices
• Hexo — Node.js blog framework; Eleventy is more general-purpose with less opinionated structure

FAQ

Q: Does Eleventy require a specific template language? A: No. Eleventy supports Markdown, Nunjucks, Liquid, Handlebars, Pug, EJS, HAML, and plain JavaScript templates. You can mix them in one project.

Q: How fast is Eleventy? A: Eleventy is fast for typical sites. A site with hundreds of pages builds in under a second. Incremental mode speeds up re-builds further.

Q: Can I add client-side JavaScript? A: Yes. Eleventy generates static HTML, but you can include any scripts in your templates. It just does not force a framework on you.

Q: How does Eleventy handle images? A: The official @11ty/eleventy-img plugin generates responsive image formats (AVIF, WebP, JPEG) at build time with automatic srcset attributes.

Sources

• https://github.com/11ty/eleventy
• https://www.11ty.dev/docs/