Eleventy Technology Intelligence

What is Eleventy?

Eleventy (11ty) is a simpler static site generator that transforms templates into HTML without requiring a client-side JavaScript framework. It focuses on being fast, flexible, and framework-independent, letting developers choose their preferred templating languages.

Created by Zach Leatherman in 2018, Eleventy emerged as a JavaScript alternative to Jekyll and Hugo. Unlike Gatsby or Next.js, Eleventy doesn't ship any client-side JavaScript by default—you get pure HTML. It supports 11 different templating languages including Nunjucks, Liquid, Markdown, and JavaScript template literals, making it accessible to developers from various backgrounds.

Key Features

Template Languages

• Nunjucks: Mozilla's powerful templating
• Liquid: Shopify's familiar syntax
• Markdown: Content authoring
• JavaScript: .11ty.js template functions
• Others: EJS, Haml, Pug, Handlebars, Mustache

Zero Client JavaScript

• Pure HTML: No framework overhead
• Opt-in JavaScript: Add only what you need
• Progressive Enhancement: Works without JS
• Performance: Minimal page weight

Data Cascade

• Global Data: _data folder files
• Directory Data: Per-folder defaults
• Template Data: Front matter
• Computed Data: Dynamic values

Build System

• Incremental builds
• Watch mode with live reload
• Plugin ecosystem
• Custom collections and filters

Use Cases

Personal Blogs

Bloggers appreciate Eleventy's simplicity for writing-focused sites. Markdown content with front matter produces clean HTML without JavaScript bloat, resulting in fast-loading pages on any connection.

Documentation

Technical documentation sites benefit from Eleventy's flexibility. Multiple templating options accommodate different author preferences, while the data cascade organizes complex documentation hierarchies.

Marketing Websites

Marketing teams build landing pages that score perfectly on Core Web Vitals. The zero-JavaScript default means pages load instantly, improving conversion rates and SEO rankings.

Design System Documentation

Design teams document component libraries with Eleventy. Custom shortcodes render live component examples alongside documentation, keeping patterns and docs synchronized.

Government and Institutional Sites

Government websites use Eleventy for accessibility compliance. Progressive enhancement ensures content reaches all users regardless of JavaScript support or assistive technology.

Newsletters and Archives

Publishers archive newsletter content as static sites. Eleventy processes thousands of Markdown files quickly, generating searchable archives with minimal hosting costs.

Code Examples

Nunjucks Template

---
layout: base.njk
title: My Blog Post
tags: posts
---

<article>
    <h1>{{ title }}</h1>
    <time datetime="{{ page.date | dateISO }}">
        {{ page.date | readableDate }}
    </time>
    {{ content | safe }}
</article>

{% for post in collections.posts | reverse %}
    <a href="{{ post.url }}">{{ post.data.title }}</a>
{% endfor %}

.eleventy.js Configuration

module.exports = function(eleventyConfig) {
    // Add a filter
    eleventyConfig.addFilter("readableDate", dateObj => {
        return DateTime.fromJSDate(dateObj).toFormat("LLLL d, yyyy");
    });

    // Add a shortcode
    eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);

    // Add a collection
    eleventyConfig.addCollection("posts", collection => {
        return collection.getFilteredByGlob("src/posts/**/*.md");
    });

    // Copy static assets
    eleventyConfig.addPassthroughCopy("src/css");
    eleventyConfig.addPassthroughCopy("src/images");

    return {
        dir: { input: "src", output: "_site" }
    };
};

Global Data File

// _data/site.js
module.exports = {
    name: "My Site",
    url: "https://example.com",
    author: "Jane Doe",
    buildTime: new Date()
};

// _data/posts.js - Fetch external data
module.exports = async function() {
    const response = await fetch("https://api.example.com/posts");
    return response.json();
};

JavaScript Template

// posts.11ty.js
class Posts {
    data() {
        return {
            layout: "base.njk",
            pagination: {
                data: "collections.posts",
                size: 10,
                alias: "posts"
            }
        };
    }

    render({ posts, pagination }) {
        return `
            <ul>
                ${posts.map(post => `
                    <li><a href="${post.url}">${post.data.title}</a></li>
                `).join('')}
            </ul>
        `;
    }
}

module.exports = Posts;

Comparison and Philosophy

Eleventy vs Hugo

• Language: Eleventy JavaScript, Hugo Go
• Speed: Hugo faster builds for huge sites
• Templates: Eleventy more language options
• Ecosystem: Eleventy npm ecosystem access

Eleventy vs Gatsby

• Client JS: Eleventy zero, Gatsby ships React
• Data Layer: Eleventy simple, Gatsby GraphQL
• Complexity: Eleventy minimal, Gatsby full framework
• Interactivity: Eleventy HTML-first, Gatsby SPA

Core Philosophy

• Betting on HTML, not frameworks
• Zero client JavaScript by default
• Framework flexibility—use any or none
• Simplicity over configuration

Strengths

• Blazing fast builds
• No lock-in to any framework
• Progressive enhancement friendly
• Active, growing community

Considerations

• Manual setup for interactive features
• No built-in image optimization (requires plugins)
• Less opinionated—more decisions to make
• Smaller plugin ecosystem than Gatsby