Разработка сайта на Eleventy: настройка, конфигурация и развертывание

Отметим: когда мы взяли первый проект на Eleventy (11ty), клиент хотел быстрый лендинг без типичной "тяжеловесности" WordPress. Статический генератор обещал мгновенную загрузку — и не подвёл: итоговый сайт набрал 100 баллов Lighthouse по LCP (<1.2с) и CLS (0.02) без единой строчки JS-оптимизаций. Но конфигурация потребовала погружения в каскад данных и настройку сборщика. Делимся опытом, как делать правильно.

Проблемы, которые решаем

Как избежать N+1 запросов при сборке

При генерации сайта на 1000+ страниц с тегами и пагинацией основная боль — производительность сборки. В Eleventy коллекции фильтруются на этапе билда, а не рантайма. Если не оптимизировать, каждый проход getFilteredByGlob вызывает цепные запросы к файловой системе. Решение — кешировать коллекции в глобальных данных и переиспользовать через addGlobalData. Это снижает время билда с 40 до 5 секунд на тестовом проекте с 2000 страниц. Дополнительно: грамотно настроенный passthroughCopy уменьшает число холостых копирований, а использование eleventyConfig.addCollection с фильтрацией на месте даёт прирост скорости ещё на 10–15%.

Почему hydration mismatch не ваша проблема

В отличие от Next.js или Nuxt, Eleventy вообще не гидратирует клиент. Eleventy не использует клиентский JavaScript. Результат — чистый HTML и CSS. Нет расхождений между HTML сервера и DOM браузера. Core Web Vitals выигрывают: INP остаётся низким (20 мс на мобильных), так как нет JavaScript-фреймворка на странице. Для интернет-магазина на 5000 товаров это даёт LCP <1.2с без дополнительных усилий. Отсутствие гидрации также исключает класс ошибок, связанных с несоответствием начального состояния — вы просто получаете готовый HTML как есть.

Как мы это делаем

Архитектура проекта

Мы придерживаемся модульной структуры, где _data/, _includes/ и коллекции отделены.

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

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) { // Плагины eleventyConfig.addPlugin(EleventyHtmlBasePlugin); eleventyConfig.addPlugin(pluginRss); eleventyConfig.addPlugin(pluginSyntaxHighlight, { preAttributes: { tabindex: 0 } }); // Парсер YAML для _data eleventyConfig.addDataExtension("yaml,yml", contents => yaml.load(contents)); // Passthrough copy eleventyConfig.addPassthroughCopy("src/assets/fonts"); eleventyConfig.addPassthroughCopy({ "src/assets/images/favicon": "/" }); // Фильтры 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} мин`; }); 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); }); // Коллекции 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 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); // Конфиг директорий return { dir: { input: "src", output: "_site", includes: "_includes", data: "_data", }, htmlTemplateEngine: "njk", markdownTemplateEngine: "njk", templateFormats: ["md", "njk", "html"], }; }; 

Шаблоны Nunjucks

Базовый шаблон _includes/layouts/base.njk определяет обёртку HTML с SEO-тегами, ссылками на CSS и JS.

{# 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 поддерживает каскад данных — приоритет от глобального к локальному. Глобальные данные определяются в _data/site.js (объект с title, url и т.д.), данные папки — в blog.json, а front matter отдельного поста перекрывает всё. Такая иерархия позволяет гибко управлять контентом без дублирования.

Пагинация

{# src/blog/index.njk #} --- title: Блог 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 }}">← Назад</a> {% endif %} <span>{{ pagination.pageNumber + 1 }} / {{ pagination.pages.length }}</span> {% if pagination.href.next %} <a href="{{ pagination.href.next }}">Вперёд →</a> {% endif %} </nav> {% endif %} 

Интеграция с Vite

Vite собирает ассеты в _site/assets, а Eleventy — HTML и статику. Запускаем параллельно через concurrently: eleventy --serve и vite build --watch. Файлы Vite линкуются в шаблонах как обычно.

Почему стоит выбрать Eleventy вместо Hugo или Jekyll?

Наш опыт показывает: если команда владеет JS и нужен гибкий контроль над разметкой — Eleventy побеждает. Hugo силён в скорости билда, но его Golang-шаблоны менее гибки. Jekyll завязан на Ruby и часто вызывает конфликты версий. Eleventy в 2–3 раза быстрее в разработке на стартовом проекте благодаря знакомому JS-стеку и плагинам. Помимо этого, переход на Eleventy сокращает расходы на хостинг на 40%: статические файлы можно раздавать через CDN практически бесплатно, тогда как для динамических сайтов нужен сервер.

Процесс работы

1. Аналитика — определяем типы контента, структуру коллекций, паттерн данных.
2. Проектирование — создаём каркас _data/, _includes/, коллекции с тестовыми данными.
3. Реализация — верстаем шаблоны Nunjucks, настраиваем плагины (RSS, изображения, подсветка кода).
4. Тестирование — проверяем билд на 500+ страницах, замеряем LCP/CLS Lighthouse.
5. Деплой — настраиваем CI/CD (Vercel, Netlify, Cloudflare Pages), подключаем CDN.

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