Розробка на 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%. Також варто використовувати eleventyConfig.addWatchTarget для інкрементальних збірок, що дозволяє перегенерувати лише змінені файли. Обчислювані дані через eleventyComputed у front matter дозволяють динамічно визначати значення залежно від контексту, що зменшує дублювання коду.

Чому 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("uk-UA").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 генерує білд у 2.5 рази швидше, ніж Jekyll на Ruby. Крім того, перехід на Eleventy скорочує витрати на хостинг на 40%: статичні файли можна роздавати через CDN практично безкоштовно, тоді як для динамічних сайтів потрібен сервер. Наприклад, економія на хостингу становить до $50 на місяць для сайту з 10 000 відвідувачів.

Процес роботи

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