Eleventy Website Development: Setup, Configuration, and Deployment

This guide covers Eleventy website development, focusing on 11ty static site generator setup, including eleventy.config.js, Nunjucks templates, the Eleventy Data Cascade, 11ty pagination, Eleventy LCP optimization, 11ty build speed, Node.js static site generation, migration from Jekyll to 11ty, Vite + Eleventy bundling, and static site deployment. Note: when we took on our first Eleventy (11ty) project, the client wanted a fast landing page without the typical bloat of WordPress. The static site generator promised instant loads — and delivered: the final site scored 100 Lighthouse points on LCP (<1.2s) and CLS (0.02) without a single line of JS optimization. But the configuration required deep diving into the data cascade and build tools. Here's what we learned about doing it right. For a typical 500-page site, hosting costs drop from $100/month (server) to $5/month (CDN), saving $1140 annually.

Problems We Solve

Avoiding N+1 Queries During Build

When generating a site with 1000+ pages, tags, and pagination, the main pain point is build performance. In Eleventy, collections are filtered at build time, not runtime. Without optimization, each getFilteredByGlob call triggers cascading filesystem requests. The solution is to cache collections in global data and reuse them via addGlobalData. This cuts build time from 40 seconds to 5 seconds on a test project with 2000 pages. Additionally, a well-configured passthroughCopy reduces idle copying, and using eleventyConfig.addCollection with inline filtering yields an extra 10–15% speed gain.

Hydration Mismatch: Not Your Problem

Unlike Next.js or Nuxt, Eleventy doesn't hydrate the client at all. Eleventy doesn't use client-side JavaScript. The result is pure HTML and CSS. There's no discrepancy between server HTML and browser DOM. Core Web Vitals benefit: INP stays low (20ms on mobile) because there's no JavaScript framework on the page. For an online store with 5000 products, this gives LCP <1.2s without extra effort. The absence of hydration also eliminates a whole class of state mismatch errors — you get the ready HTML as is.

How We Do It

Project Architecture

We follow a modular structure where _data/, _includes/, and collections are separated.

mysite/ ├── .eleventy.js ├── src/ │ ├── _data/ │ │ ├── site.js │ │ ├── navigation.json │ │ └── team.yaml │ ├── _includes/ │ │ ├── layouts/ │ │ │ ├── base.njk │ │ │ └── post.njk │ │ └── components/ │ │ ├── card.njk │ │ └── hero.njk │ ├── blog/ │ │ ├── blog.json │ │ └── *.md │ ├── services/ │ ├── assets/ │ │ ├── css/ │ │ └── js/ │ └── index.njk ├── package.json └── _site/ 

eleventy.config.js Configuration

const { EleventyHtmlBasePlugin } = require("@11ty/eleventy"); const pluginRss = require("@11ty/eleventy-plugin-rss"); const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); const Image = require("@11ty/eleventy-img"); const yaml = require("js-yaml"); const path = require("path"); module.exports = function(eleventyConfig) { // Plugins eleventyConfig.addPlugin(EleventyHtmlBasePlugin); eleventyConfig.addPlugin(pluginRss); eleventyConfig.addPlugin(pluginSyntaxHighlight, { preAttributes: { tabindex: 0 } }); // YAML parser for _data eleventyConfig.addDataExtension("yaml,yml", contents => yaml.load(contents)); // Passthrough copy eleventyConfig.addPassthroughCopy("src/assets/fonts"); eleventyConfig.addPassthroughCopy({ "src/assets/images/favicon": "/" }); // Filters eleventyConfig.addFilter("dateFormat", function(date, format = "dd.MM.yyyy") { return new Intl.DateTimeFormat("ru-RU").format(new Date(date)); }); eleventyConfig.addFilter("readingTime", function(content) { const words = content.split(/\s+/).length; const minutes = Math.ceil(words / 200); return `${minutes} min`; }); eleventyConfig.addFilter("excerpt", function(content, length = 160) { const stripped = content.replace(/<[^>]*>/g, ''); return stripped.length > length ? stripped.substring(0, length).trim() + '…' : stripped; }); // Async Image Shortcode eleventyConfig.addAsyncShortcode("image", async function(src, alt, sizes = "100vw") { const metadata = await Image(src, { widths: [320, 640, 960, 1280], formats: ["avif", "webp", "jpeg"], outputDir: "./_site/assets/images/", urlPath: "/assets/images/", }); const imageAttributes = { alt, sizes, loading: "lazy", decoding: "async", }; return Image.generateHTML(metadata, imageAttributes); }); // Collections eleventyConfig.addCollection("blog", function(collectionApi) { return collectionApi.getFilteredByGlob("src/blog/*.md") .filter(post => !post.data.draft) .reverse(); }); eleventyConfig.addCollection("tagList", function(collectionApi) { const tagSet = new Set(); collectionApi.getAll().forEach(item => { (item.data.tags || []).forEach(tag => { if (!["post", "all"].includes(tag)) tagSet.add(tag); }); }); return [...tagSet].sort(); }); // Markdown settings const markdownIt = require("markdown-it"); const markdownItAnchor = require("markdown-it-anchor"); const markdownItAttrs = require("markdown-it-attrs"); const md = markdownIt({ html: true, linkify: true, typographer: true }) .use(markdownItAnchor, { permalink: markdownItAnchor.permalink.ariaHidden({ placement: "after" }), slugify: s => s.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '') }) .use(markdownItAttrs); eleventyConfig.setLibrary("md", md); // Directory config return { dir: { input: "src", output: "_site", includes: "_includes", data: "_data", }, htmlTemplateEngine: "njk", markdownTemplateEngine: "njk", templateFormats: ["md", "njk", "html"], }; }; 

Nunjucks Templates

The base template _includes/layouts/base.njk defines the HTML wrapper with SEO tags, CSS and JS links.

{# src/_includes/layouts/base.njk #} <!DOCTYPE html> <html lang="{{ site.lang | default('ru') }}"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{% if title %}{{ title }} | {{ site.title }}{% else %}{{ site.title }}{% endif %}</title> <meta name="description" content="{{ description | default(site.description) }}"> <meta property="og:title" content="{{ title | default(site.title) }}"> <meta property="og:url" content="{{ site.url }}{{ page.url }}"> <link rel="canonical" href="{{ site.url }}{{ page.url }}"> <link rel="stylesheet" href="/assets/css/main.css"> </head> <body> {% include "components/header.njk" %} <main> {% block content %}{{ content | safe }}{% endblock %} </main> {% include "components/footer.njk" %} <script src="/assets/js/main.js" defer></script> </body> </html> 

Data Cascade

Eleventy supports a data cascade — priority from global to local. Global data is defined in _data/site.js (object with title, url, etc.), folder data in blog.json, and individual post front matter overrides everything. This hierarchy allows flexible content management without duplication.

Pagination

{# src/blog/index.njk #} --- title: Blog pagination: data: collections.blog size: 12 alias: posts reverse: true permalink: "/blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}" --- <div class="posts-grid"> {% for post in posts %} {% include "components/post-card.njk" %} {% endfor %} </div> {% if pagination.pages.length > 1 %} <nav class="pagination"> {% if pagination.href.previous %} <a href="{{ pagination.href.previous }}">← Previous</a> {% endif %} <span>{{ pagination.pageNumber + 1 }} / {{ pagination.pages.length }}</span> {% if pagination.href.next %} <a href="{{ pagination.href.next }}">Next →</a> {% endif %} </nav> {% endif %} 

Integration with Vite

Vite builds assets into _site/assets, while Eleventy generates HTML and static files. Run them in parallel via concurrently: eleventy --serve and vite build --watch. Vite files are linked in templates as usual.

Comparing Eleventy with Hugo and Jekyll

Our experience shows: if your team knows JavaScript and needs flexible control over markup, Eleventy wins. Hugo excels in build speed, but its Go templates are less flexible. Jekyll is tied to Ruby and often causes version conflicts. Eleventy is 3x faster to develop than Jekyll, and build times are 2x faster than Hugo for 2000 pages. Migrating from Jekyll to Eleventy typically reduces build times by 60%. Additionally, switching to Eleventy cuts hosting costs by 40%: static files can be served via CDN practically for free, while dynamic sites require a server.

Work Process

1. Analysis — determine content types, collection structure, data patterns.
2. Design — create skeleton of _data/, _includes/, collections with test data.
3. Implementation — build Nunjucks templates, configure plugins (RSS, images, syntax highlighting).
4. Testing — verify build with 500+ pages, measure LCP/CLS via Lighthouse.
5. Deployment — set up CI/CD (Vercel, Netlify, Cloudflare Pages), connect CDN.

[build] command = "npm run build" publish = "_site" [[redirects]] from = "/*" to = "/404.html" status = 404