Eleventy (11ty)

Overview

Eleventy, often referred to as 11ty, is an open-source static site generator (SSG) launched in 2018. It distinguishes itself by not being tied to a specific front-end framework or library, offering developers a flexible tool for converting various template languages and data sources into static HTML. This approach positions Eleventy as a solution for projects prioritizing performance, security, and maintainability inherent to static websites.

Eleventy operates by taking source files, processing them through a configurable build step, and outputting a directory of static assets, including HTML, CSS, JavaScript, and images. This pre-rendering process means that when a user requests a page, the server delivers a ready-to-serve HTML file, eliminating the need for server-side processing at runtime. This can contribute to faster load times and reduced server load compared to dynamic content management systems (CMS) that generate pages on demand. According to web.dev, faster loading times can improve user experience and search engine optimization by reducing bounce rates and improving core web vitals like Largest Contentful Paint (LCP) and First Input Delay (FID).

Eleventy is particularly well-suited for projects where content changes infrequently or can be updated through a build process. This includes blogs, portfolios, documentation sites, marketing pages, and e-commerce storefronts that utilize a headless CMS. Its developer-centric design emphasizes simplicity and configurability. Developers can use their preferred templating languages, such as Nunjucks, Liquid, Handlebars, Pug, EJS, Haml, or Markdown, and integrate data from various sources like local JSON files, API endpoints, or a headless CMS. This flexibility allows teams to choose tools that align with their existing skill sets and project requirements, rather than being constrained by a framework's opinionated structure.

The core philosophy behind Eleventy is to provide a minimal, unopinionated foundation. Unlike some full-stack frameworks that bundle client-side rendering capabilities and routing, Eleventy focuses solely on the static generation aspect. This often results in smaller project footprints and fewer dependencies, which can simplify maintenance and reduce potential security vulnerabilities. Its command-line interface (CLI) is straightforward, enabling developers to quickly set up and build projects without extensive configuration. For teams looking to build performant, secure, and easily scalable static websites without committing to a specific JavaScript framework, Eleventy offers a pragmatic and efficient solution.

Key features

• Multiple Template Language Support: Eleventy supports a wide array of template languages, including Nunjucks, Liquid, Handlebars, Pug, EJS, Haml, JavaScript Template Literals, and Markdown, allowing developers to choose their preferred syntax for content creation (Eleventy Template Languages documentation).
• Data Cascade: Eleventy's data cascade system enables flexible data management, allowing data to be merged from various sources (global data files, directory data files, front matter) and made available to templates (Eleventy Data Cascade documentation).
• Flexible Configuration: Projects can be configured through an .eleventy.js file, providing extensive control over input/output directories, template engines, passthrough file copying, and custom collections (Eleventy Configuration documentation).
• Collections: Developers can define custom collections of content based on tags, directories, or arbitrary logic, which facilitates content organization and dynamic listing within templates (Eleventy Collections documentation).
• Shortcodes and Filters: Eleventy supports custom shortcodes and filters, extending the functionality of template languages to perform specific tasks or transform data directly within content files (Eleventy Shortcodes documentation).
• Serverless Functions Integration: Eleventy can integrate with serverless functions, enabling dynamic features like form submissions, API calls, or authentication on a static site by offloading complex logic to cloud functions (Eleventy Serverless documentation).
• Performance-Focused Output: By generating static HTML files, Eleventy contributes to fast loading times, reduced server load, and improved search engine optimization (SEO) due to pre-rendered content.

Pricing

Eleventy is an open-source project released under the MIT License. It is free to use for any purpose, including commercial projects.

Pricing as of June 2026. Source: Eleventy GitHub Repository LICENSE

Common integrations

• Headless CMS: Integrates with headless content management systems like Sanity.io (Sanity.io Eleventy integration documentation) or Contentful to manage content separately from the presentation layer.
• CSS Frameworks: Compatible with utility-first CSS frameworks such as Tailwind CSS (Tailwind CSS Eleventy guide) or component-based frameworks like Bootstrap (Bootstrap documentation) for styling.
• Build Tools: Can be used alongside build tools like webpack or Gulp for asset processing, image optimization, and advanced front-end workflows.
• Deployment Platforms: Deploys easily to static hosting platforms such as Netlify, Vercel, or GitHub Pages due to its static output.
• Search Services: Integrates with client-side search solutions like Lunr.js or Algolia for adding search functionality to static sites.
• Image Optimization: Often paired with tools like Eleventy Image plugin (Eleventy Image Plugin documentation) or cloud-based image CDNs for responsive image delivery.

Alternatives

• Jekyll: A Ruby-based static site generator, widely used for blogs and documentation, known for its strong community and GitHub Pages integration.
• Hugo: Written in Go, Hugo is recognized for its build speed, making it suitable for large static sites with extensive content.
• Next.js: A React framework that supports static site generation (SSG) alongside server-side rendering (SSR) and client-side rendering, offering a full-stack solution for React developers (Next.js Static Exports documentation).
• Gatsby: A React-based SSG that leverages GraphQL for data sourcing, providing a powerful ecosystem for complex static websites.
• Astro: A modern SSG focused on shipping less JavaScript, allowing developers to build fast websites using various UI frameworks or no framework at all (Astro Getting Started documentation).

Getting started

To begin with Eleventy, ensure Node.js is installed. The following steps outline how to create a basic Eleventy project:

1. Initialize a new project:

mkdir my-eleventy-site
cd my-eleventy-site
npm init -y

2. Install Eleventy:

npm install @11ty/eleventy

3. Create your first content file (e.g., index.md):

---
title: "Welcome to my Eleventy Site"
layout: "base.njk"
---

# Hello, Eleventy!

This is my first static page generated with Eleventy.

4. Create a base layout file (e.g., _includes/base.njk):

<!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>
    <main>
        {{ content | safe }}
    </main>
</body>
</html>

5. Add a script to package.json to easily 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.0"
  }
}

6. Run Eleventy to build and serve your site:

npm start

This command will build your site and start a local development server, typically accessible at http://localhost:8080/. The output will be generated in the _site directory by default.