Overview

Eleventy (11ty) is an open-source static site generator that converts various input files into static HTML. Developed by Zach Leatherman and first released in 2017, Eleventy distinguishes itself by its flexibility and minimalist approach, often described as a "simpler static site generator" because it doesn't impose a specific front-end framework or client-side JavaScript runtime Eleventy Documentation. Instead, it processes content and templates at build time, generating pre-rendered HTML files that can be served directly by a web server.

Eleventy is well-suited for developers who prioritize performance, simplicity, and control over their website's output. It excels in building small to medium-sized websites, blogs, documentation portals, and marketing sites where content changes infrequently or can be pre-generated. Its ability to work with multiple template languages, including Nunjucks, Liquid, Handlebars, Markdown, and even JavaScript files as templates, provides developers with choice and familiarity Eleventy Supported Template Languages. This flexibility extends to data sourcing, allowing content to be pulled from local files, JSON, or JavaScript modules, which can then be injected into templates via its data cascade.

The core philosophy of Eleventy centers on progressive enhancement and web standards. By generating static assets, it inherently delivers fast loading times and a strong foundation for SEO, as search engine crawlers can easily parse pre-rendered HTML Web.dev article on page speed. Unlike some other static site generators that might require a specific framework like React or Vue, Eleventy allows developers to use plain HTML, CSS, and JavaScript, or integrate lightweight client-side libraries as needed, without dictating the front-end stack. This makes it a suitable choice for projects where minimizing client-side dependencies and maximizing server-side rendering benefits are key objectives.

Eleventy's developer experience is characterized by its modularity. Developers can configure plugins, shortcodes, and filters to extend its functionality, or write custom JavaScript logic directly within their build process. The data cascade mechanism allows for granular control over how data flows into templates, from global data files to directory-specific data and even front matter within individual content files Eleventy Data Cascade Explanation. This hierarchical data management simplifies content organization and reuse across a site. For projects requiring high performance, maintainability, and a JavaScript-centric build pipeline without the overhead of complex client-side frameworks, Eleventy provides a focused and efficient solution.

Key features

  • Multiple Template Language Support: Processes various template languages including Nunjucks, Liquid, Handlebars, Markdown, JavaScript (as templates), HTML, and Pug, allowing developers to choose their preferred syntax for content and layout Eleventy Template Language Documentation.
  • Data Cascade: Provides a flexible system for managing data, allowing information to be sourced from global data files, directory data files, and front matter, which then cascades down to individual templates and content pages Understanding Eleventy's Data Cascade.
  • Zero Client-side JavaScript: By default, Eleventy produces static HTML, CSS, and images, resulting in fast-loading websites with no required client-side JavaScript runtime overhead, contributing to better performance and accessibility.
  • Flexible Configuration: Highly configurable via an .eleventy.js file, enabling custom setups for input/output directories, collections, plugins, filters, shortcodes, and more Eleventy Configuration Options.
  • Collections API: Programmatically create collections of content based on tags, directories, or custom functions, simplifying content organization and navigation generation Eleventy Collections API Reference.
  • Plugin Ecosystem: Supports a growing ecosystem of official and community-contributed plugins for tasks like image optimization, syntax highlighting, and more Eleventy Plugins Directory.
  • Universal Filters and Shortcodes: Extend template functionality with reusable JavaScript functions (filters) for transforming data and custom HTML components (shortcodes) for injecting dynamic content.
  • Serverless Function Integration: Offers first-party support for integrating serverless functions, enabling dynamic features on static sites without compromising performance Eleventy Serverless Plugin.

Pricing

Eleventy is an open-source project and is free to use for any purpose. The project is maintained through community contributions and financial support from individuals and companies. Financial contributions are voluntary and do not unlock additional features or tiers of service.

Tier Cost Features Notes
Open Source Free Full access to all Eleventy features, documentation, and community support. No restrictions on usage, project size, or commercial applications.
Supporter Variable Financial contribution to support ongoing development. Optional, does not unlock additional features. Support tiers available via Open Collective Eleventy Supporter Information.

Pricing as of 2026-05-08.

Common integrations

  • Content Management Systems (CMS): Integrates with headless CMS platforms like Netlify CMS, Forestry.io, or Strapi by pulling content via APIs or Git-based workflows.
  • Deployment Platforms: Compatible with static site hosting providers such as Netlify, Vercel, GitHub Pages, and Cloudflare Pages, which can automatically build and deploy Eleventy sites from a Git repository.
  • Image Optimization: Often used with plugins like eleventy-img for responsive image generation and optimization Eleventy Image Plugin Documentation.
  • CSS Frameworks: Works with any CSS framework (e.g., Tailwind CSS, Bootstrap, Bulma) as Eleventy does not impose a specific styling methodology.
  • JavaScript Tooling: Seamlessly integrates with standard JavaScript build tools like Webpack, Rollup, or Esbuild for bundling client-side JavaScript if required.
  • Search Functionality: Can be integrated with client-side search libraries (e.g., Lunr.js, Algolia) or server-side search solutions by generating a search index during the build process.
  • Analytics: Easily adds analytics scripts from providers like Google Analytics or Plausible to generated HTML templates.

Alternatives

  • Next.js: A React framework for building full-stack web applications, offering both static site generation (SSG) and server-side rendering (SSR) capabilities, often chosen for larger, more dynamic applications.
  • Hugo: A static site generator written in Go, known for its exceptional build speed, making it suitable for very large sites and projects where build times are critical.
  • Jekyll: A Ruby-based static site generator, widely adopted for blogs and documentation, known for its simplicity and strong integration with GitHub Pages.
  • Gatsby: A React-based static site generator that uses GraphQL for data sourcing, offering a rich plugin ecosystem and performance optimizations, often used for content-rich websites.
  • Astro: A modern static site builder focused on shipping less JavaScript, allowing developers to use their favorite UI components and automatically hydrating only interactive parts of the page.

Getting started

To begin using Eleventy, ensure you have Node.js installed. You can then create a new project and initialize Eleventy. The following example demonstrates setting up a basic Eleventy project that transforms a Markdown file into HTML.

First, create a new directory for your project and navigate into it:

mkdir my-eleventy-site
cd my-eleventy-site

Initialize a new Node.js project and install Eleventy:

npm init -y
npm install @11ty/eleventy --save-dev

Next, create a content file, for example, index.md, with some Markdown content:

---
title: My First Eleventy Page
layout: base.njk
---

# Welcome to Eleventy!

This is a simple Markdown page processed by Eleventy.

Create a base layout file, for example, _includes/base.njk, using Nunjucks (a common choice for Eleventy):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
</head>
<body>
    <header>
        <h1>{{ title }}</h1>
    </header>
    <main>
        {{ content | safe }}
    </main>
    <footer>
        <p>&copy; 2026 My Eleventy Site</p>
    </footer>
</body>
</html>

By default, Eleventy looks for an _includes directory for layouts. You can configure this in an .eleventy.js file if needed, but for this example, the default works.

Finally, add a script to your package.json to run Eleventy:

{
  "name": "my-eleventy-site",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "npx @11ty/eleventy --serve",
    "build": "npx @11ty/eleventy"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@11ty/eleventy": "^2.0.1"
  }
}

Now, run the development server:

npm start

Eleventy will build your site and serve it, typically at http://localhost:8080/. You can then open this URL in your browser to see your generated static page. To build the site for deployment:

npm run build

This command will output the static files to the _site directory by default, ready for deployment.