11ty

Overview

11ty, also known as Eleventy, is a static site generator built on JavaScript. It operates by taking various data sources and template files, processing them, and outputting static HTML, CSS, and JavaScript files. This approach contrasts with dynamic content management systems (CMS) that generate pages on each request. 11ty is designed to be unopinionated regarding front-end frameworks, allowing developers to choose their preferred tools for client-side interactivity or opt for no client-side JavaScript at all. This flexibility contributes to its reputation for generating highly performant and accessible websites.

Developers frequently choose 11ty for projects where content stability and performance are priorities. This includes blogs and personal websites, documentation portals, and marketing sites that require fast load times and high search engine optimization (SEO) scores. Because it outputs pre-rendered HTML, 11ty sites can often achieve better Core Web Vitals scores, which measure user experience aspects like loading performance, interactivity, and visual stability, compared to sites that rely heavily on client-side rendering.

One of 11ty's core strengths is its support for multiple template languages. Developers can use Nunjucks, Liquid, Handlebars, EJS, Pug, or even JavaScript directly as template files. This allows teams to utilize existing knowledge or choose the language best suited for a particular project. It also provides a robust data cascade system, enabling developers to pull data from various sources, including local files (JSON, YAML, JavaScript), external APIs, and markdown files. This data can then be programmatically integrated into templates to generate dynamic content within a static output.

The developer experience with 11ty emphasizes simplicity and control. It offers minimal configuration out of the box but provides extensive options for customization through plugins and configuration files. This balance makes it approachable for new users while still powerful enough for complex static site builds. Its active community contributes to a comprehensive documentation set and a growing ecosystem of resources and starter projects.

Key features

• Multiple template languages: Supports Nunjucks, Liquid, Handlebars, EJS, Pug, Markdown, and JavaScript, allowing developers to choose their preferred syntax for content generation.
• Data cascade: Provides a flexible system for combining data from various sources (global data, local data, front matter, computed data) into templates.
• Zero client-side JavaScript by default: Generates static HTML, leading to fast load times and improved performance metrics without requiring a client-side framework.
• Plug-in ecosystem: Extensible through official and community-contributed plugins for features like image optimization, syntax highlighting, and SEO enhancements.
• Shortcodes: Enables reusable content snippets and complex logic within templates, improving maintainability and reducing repetition.
• Pagination: Built-in support for paginating collections of content, essential for blogs, archives, and documentation sections.
• Collection generation: Automatically creates collections of content based on tags, directories, or custom filters, simplifying content organization.
• Customizable directory structure: Allows developers to define input and output directories, giving full control over the project's file organization.

Pricing

11ty is an entirely free and open-source project. There are no paid tiers, subscriptions, or commercial licenses associated with its use. Development and maintenance are supported by community contributions and sponsorships.

Common integrations

11ty's unopinionated nature allows it to integrate with a wide range of tools and services. While it doesn't have a specific "integrations" section in its documentation, its static output and JavaScript foundation enable compatibility with many common web development technologies:

• Headless CMS: Can pull content from headless CMS platforms like Contentful, Sanity, or Strapi using their respective APIs, then render it statically.
• CSS frameworks: Works with any CSS framework, including Bootstrap, Tailwind CSS, or custom CSS, as 11ty only outputs HTML.
• Build tools: Can be combined with build tools like Parcel or webpack for asset bundling and optimization if advanced front-end processing is needed.
• Deployment platforms: Static sites generated by 11ty can be deployed to any static hosting service, such as Netlify, Vercel, GitHub Pages, or AWS S3. Vercel provides specific deployment guides for Eleventy.
• JavaScript libraries: Integrates with client-side JavaScript libraries and frameworks (e.g., React, Vue, Alpine.js) for interactive components, as 11ty focuses on the static HTML generation.
• Image optimization: Often used with image optimization tools and services, either through 11ty plugins or external services, to deliver performant images.

Alternatives

• Next.js: A React framework that supports static site generation (SSG) alongside server-side rendering (SSR) and Incremental Static Regeneration (ISR), offering more full-stack capabilities.
• Hugo: A static site generator written in Go, known for its build speed and robust features, often preferred for very large sites.
• Jekyll: A Ruby-based static site generator, popular for blogs and deeply integrated with GitHub Pages.
• Astro: A modern static site builder that focuses on shipping less JavaScript, allowing developers to use multiple UI frameworks within the same project.
• Gatsby: A React-based static site generator that leverages GraphQL for data sourcing and offers a rich plugin ecosystem.

Getting started

To begin with 11ty, you'll need Node.js installed. The following steps demonstrate a basic setup to create a simple static page:

# 1. Create a new project directory
mkdir my-11ty-site
cd my-11ty-site

# 2. Initialize a new Node.js project
npm init -y

# 3. Install Eleventy
npm install @11ty/eleventy

# 4. Create your first template file (e.g., index.html)
echo '<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>My 11ty Site</title></head><body><h1>Hello from 11ty!</h1></body></html>' > index.html

# 5. Add a "start" script to your package.json
#    Open package.json and add: "start": "npx @11ty/eleventy --serve"
#    Your scripts section should look like:
#    "scripts": {
#      "start": "npx @11ty/eleventy --serve"
#    },

# 6. Run Eleventy and serve your site locally
npm start

# Eleventy will output your site to the _site directory by default
# and serve it, usually at http://localhost:8080.

This basic example creates a single HTML file. For more complex sites, you would create additional template files, use various template languages, and define data sources. Refer to the official 11ty getting started guide for a comprehensive walkthrough.