Eleventy (11ty)

Overview

Eleventy, often referred to as 11ty, is a static site generator built on Node.js that converts various input templates and data into static HTML files. Released in 2018, its design philosophy emphasizes simplicity and flexibility, allowing developers to utilize a wide array of templating languages, including Nunjucks, Liquid, Handlebars, Markdown, JavaScript, and HTML, within a single project Eleventy supported template languages. This multi-template support distinguishes it from many other static site generators that often restrict users to a specific templating engine.

Eleventy is particularly well-suited for projects requiring fast load times, robust security, and a strong focus on core web technologies. It generates pre-built HTML, CSS, and JavaScript files during the build process, which can then be served directly by any web server or content delivery network (CDN). This approach eliminates the need for server-side processing at runtime, reducing server load and improving page speed, a critical factor for user experience and search engine optimization optimizing website speed for users. Websites built with Eleventy are inherently more secure than dynamic sites because there is no direct database interaction or server-side code execution during user requests, minimizing potential attack vectors.

Developers who prioritize a minimalist toolchain and a high degree of control over their project structure find Eleventy appealing. It does not impose a rigid framework or a specific client-side rendering library like React or Vue.js, although it can be integrated with them if needed. This makes it an excellent choice for front-end developers familiar with HTML, CSS, and JavaScript, offering a low barrier to entry for static site development Eleventy getting started documentation. Its flexibility extends to data sources; Eleventy can consume data from local files (JSON, YAML, CSV), APIs, or even other content management systems, allowing developers to structure their content workflows as needed.

Common use cases for Eleventy include blogs, documentation sites, portfolios, marketing websites, and small e-commerce sites where content is largely static but frequently updated. Its ability to handle complex data structures and generate collections of pages automatically makes it efficient for managing large amounts of content. For example, a blog can define a collection of Markdown files, and Eleventy will process each file into a distinct blog post page, complete with consistent layouts and navigation, without manual page creation for each entry. The Eleventy community often highlights its performance benefits and the reduced maintenance overhead compared to database-driven content management systems like WordPress for static content needs WordPress server requirements overview.

Key features

• Multi-templating Language Support: Eleventy allows developers to use various popular templating languages, including Liquid, Nunjucks, Handlebars, Markdown, HTML, JavaScript, and more, within a single project. This flexibility enables teams to choose the language best suited for specific content or developer preferences Eleventy template language options.
• Data Cascade: Eleventy provides a powerful data cascade system that allows data to be merged from multiple sources, including global data files, directory data files, and front matter in individual templates. This enables efficient content management and dynamic page generation Eleventy data cascade explanation.
• Collections: Developers can define collections of content based on tags, directories, or custom functions. This feature simplifies the creation of blog post listings, portfolios, or documentation sections by automatically grouping and rendering related content Eleventy collections guide.
• Zero Client-side JavaScript by Default: Eleventy focuses on generating static HTML, leading to highly performant websites with minimal client-side JavaScript. This contributes to faster load times and improved accessibility, though additional JavaScript can be added as needed.
• Plugin System: While minimalist by design, Eleventy supports a plugin system that extends its core functionality. Plugins can add features like image optimization, RSS feed generation, or advanced data processing Eleventy plugin documentation.
• Universal Filters and Shortcodes: Eleventy offers custom filters and shortcodes, which are reusable functions that can transform content or inject dynamic elements into templates. This allows for powerful content manipulation and component reuse across different template languages.
• Flexible Configuration: Eleventy uses a .eleventy.js configuration file, providing extensive options to customize input/output directories, template formats, passthrough file copies, and more, adapting to diverse project requirements Eleventy configuration options.

Pricing

Eleventy is an open-source project released under the MIT License Eleventy project license information. This means it is entirely free to use for any purpose, including commercial projects. There are no licensing fees, subscriptions, or premium features associated with the core Eleventy software.

While the Eleventy software itself is free, building and deploying an Eleventy site may involve costs related to hosting, domain registration, and any third-party services or APIs integrated into the project. These costs are external to Eleventy and depend on the chosen infrastructure and services.

Common integrations

• Headless CMS: Eleventy can integrate with various headless content management systems such as Sanity, Contentful, or Strapi. It fetches content from these platforms during the build process and generates static pages, combining the content flexibility of a CMS with the performance of a static site. For example, developers can configure Eleventy to pull blog posts from a headless CMS API Eleventy custom data from an API.
• Markdown Processors: While supporting Markdown natively, Eleventy can be configured with advanced Markdown parsers and plugins, such as markdown-it, to add features like syntax highlighting for code blocks or custom markdown extensions Eleventy Markdown configuration.
• CSS Frameworks/Preprocessors: Eleventy works seamlessly with CSS frameworks like Tailwind CSS, Bootstrap, or utility-first CSS libraries. It also supports CSS preprocessors such as Sass or PostCSS for advanced styling capabilities, which are typically processed by a build step before Eleventy generates the final HTML Tailwind CSS framework integration guides.
• Deployment Platforms: Eleventy sites can be deployed to any static hosting provider, including Netlify, Vercel, GitHub Pages, or AWS S3. These platforms often provide continuous deployment features, automatically rebuilding and deploying the site whenever changes are pushed to a Git repository.
• Image Optimization Tools: For performance, Eleventy projects often integrate with image optimization tools like eleventy-img (an official plugin) or services like Cloudinary. These tools can resize, compress, and convert images to modern formats (e.g., WebP, AVIF) during the build process Eleventy Image plugin documentation.
• Search & Analytics: For client-side search, services like Algolia or Lunr.js can be integrated. For analytics, tools such as Google Analytics or Plausible Analytics are commonly embedded directly into the generated HTML.

Alternatives

• Jekyll: A Ruby-based static site generator that was influential in popularizing the SSG paradigm, often used for blogs and GitHub Pages.
• Hugo: A Go-based static site generator known for its exceptional build speed, suitable for very large static websites.
• Next.js: A React framework that supports static site generation (SSG) alongside server-side rendering (SSR) and Incremental Static Regeneration (ISR), offering more dynamic capabilities Next.js static HTML export.
• Astro: A modern static site builder focused on shipping less JavaScript, allowing developers to use their preferred UI components (React, Vue, Svelte) and rendering them to static HTML at build time.
• Gatsby: A React-based, GraphQL-powered static site generator that excels at pulling data from multiple sources and optimizing assets for performance.

Getting started

To begin using Eleventy, ensure you have Node.js and npm (or yarn) installed on your system. The following steps outline a basic setup for an Eleventy project:

1. Initialize a new project: Create a new directory for your project and navigate into it.
2. Install Eleventy: Install Eleventy as a local development dependency.
3. Create content: Add some content files, for example, a Markdown file for a page.
4. Create a layout (optional): Define a layout file to wrap your content with common HTML structure.
5. Run Eleventy: Execute the Eleventy build command to generate your static site.

Here's a minimal example:

# 1. Create and navigate into a new project directory
mkdir my-eleventy-site
cd my-eleventy-site

# 2. Initialize npm and install Eleventy
npm init -y
npm install @11ty/eleventy --save-dev

# Add a script to your package.json for convenience
# Open package.json and add "start": "eleventy --serve" and "build": "eleventy" to the "scripts" section.
# Example package.json excerpt:
# "scripts": {
#   "start": "eleventy --serve",
#   "build": "eleventy"
# }

# 3. Create an input file (e.g., index.md)
echo "---
layout: base.njk
title: My First Eleventy Page
---

# Welcome to Eleventy!

This is a simple page generated by Eleventy." > index.md

# 4. Create a layout file (e.g., _includes/base.njk)
mkdir _includes
echo "<!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>" > _includes/base.njk

# 5. Run Eleventy to build and serve your site
npm start

# This command will build your site and start a local development server.
# You can typically view your site at http://localhost:8080.

After running npm start, Eleventy will compile your index.md file using the base.njk layout and serve the resulting HTML. The --serve flag also enables live reloading, so changes to your source files will automatically update the browser. For production, npm run build generates the static files into a default _site directory, ready for deployment.