Eleventy — генератор статических сайтов¶

Eleventy (также известный как 11ty) — это генератор статических сайтов с открытым исходным кодом, написанный на языке программирования JavaScript и работающий в среде Node.js. Инструмент предназначен для создания веб-сайтов путём преобразования шаблонов и контента (например, Markdown-файлов) в набор готовых HTML-страниц без использования серверной логики. Eleventy позиционируется как «более простая» альтернатива таким популярным генераторам, как Jekyll, Hugo и Gatsby, благодаря гибкости в выборе шаблонизаторов и отсутствию строгих архитектурных ограничений.

¶История и разработка

Проект был создан американским разработчиком Заком Лезерманом (Zach Leatherman) в 2018 году. Первая публичная версия Eleventy 0.1.0 вышла 9 января 2018 года. Разработчик, известный своей работой над веб-компонентами и производительностью фронтенда, задумывал инструмент как ответ на усложнение экосистемы генераторов статических сайтов. В отличие от Gatsby, который требовал GraphQL и React, Eleventy предлагал простой подход: пользователь выбирает шаблонизатор, создаёт файлы, а Eleventy собирает их в статический сайт.

Проект распространяется под лицензией MIT, что позволяет свободно использовать и модифицировать его в коммерческих и личных целях. Разработка ведётся в публичном репозитории на GitHub, где сообщество активно участвует в улучшении кода и документации. По состоянию на середину 2020-х годов Eleventy является одним из наиболее быстрорастущих генераторов статических сайтов, занимая заметное место в ежегодных опросах разработчиков (например, в State of JS).

¶Ключевые особенности

¶Мультишаблонность

Главная отличительная черта Eleventy — поддержка множества шаблонизаторов «из коробки». Инструмент позволяет использовать Nunjucks, Liquid, Handlebars, Mustache, EJS, Pug (ранее Jade) и JavaScript-шаблоны. Более того, в рамках одного проекта можно комбинировать разные шаблонизаторы: например, главную страницу писать на Nunjucks, а блог-посты — на Liquid или в Markdown. Это даёт разработчикам свободу выбора без необходимости изучать новый синтаксис.

¶Отсутствие клиентского JavaScript по умолчанию

Eleventy генерирует чистый HTML и CSS. В отличие от фреймворков типа Next.js или Nuxt, он не внедряет автоматически скрипты для гидрации или маршрутизации на стороне клиента. Это делает сайты на Eleventy чрезвычайно лёгкими и быстрыми, что положительно сказывается на показателях Core Web Vitals и SEO.

¶Работа с данными

Контент в Eleventy организуется через файлы Markdown, HTML или JSON, которые сопровождаются так называемыми «данными» (front matter). Front matter — это блок метаданных в начале файла, заключённый между двумя тройными дефисами (---), в котором задаются заголовок, дата, теги и любые произвольные поля. Eleventy также поддерживает глобальные файлы данных (_data), позволяющие хранить структурированную информацию (например, список товаров или навигацию) в форматах JSON, JavaScript и CSV.

¶Коллекции и пагинация

Инструмент автоматически создаёт коллекции на основе тегов, указанных в front matter. Это позволяет легко группировать записи блога по категориям и выводить их списком на отдельной странице. Встроенная поддержка пагинации даёт возможность разбивать большие коллекции на несколько страниц (например, по 10 постов на страницу) с автоматической генерацией ссылок «вперёд» и «назад».

¶Архитектура и принцип работы

Процесс сборки сайта в Eleventy выглядит следующим образом: пользователь создаёт каталог с исходными файлами (контентом и шаблонами), конфигурационный файл .eleventy.js (опционально) и запускает команду eleventy в терминале. Инструмент сканирует входной каталог, обрабатывает каждый файл в соответствии с выбранным шаблонизатором, применяет данные и записывает результат в выходной каталог (по умолчанию _site).

Конфигурационный файл позволяет настраивать пути, добавлять собственные фильтры (функции для обработки данных, например, форматирование даты), коллекции и плагины. В отличие от Hugo, который использует собственный язык шаблонов Go, в Eleventy для настройки используется обычный JavaScript, что снижает порог входа для веб-разработчиков.

¶Экосистема и применение

Eleventy не имеет официального «плагинного» магазина, аналогичного npm, однако благодаря тому, что инструмент построен на Node.js, разработчики используют обычные npm-пакеты для расширения функциональности. Существуют сторонние стартовые шаблоны (например, Eleventy Excellent, Hylia), которые позволяют быстро развернуть блог или портфолио с предустановленной стилизацией и оптимизацией.

Инструмент активно используется для создания документационных сайтов, персональных блогов, портфолио и корпоративных лендингов. Его часто выбирают разработчики, которым нужна высокая производительность и простота развёртывания на любом хостинге (Netlify, Vercel, GitHub Pages). Eleventy также популярен в сообществе разработчиков, выступающих за «веб без излишеств» (англ. web minimalist movement), благодаря отсутствию зависимости от тяжёлых фронтенд-фреймворков.

¶Сравнение с аналогами

По сравнению с Jekyll (Ruby) и Hugo (Go), Eleventy предлагает более привычный для JavaScript-разработчиков синтаксис и возможность писать собственные плагины на JS. В отличие от Gatsby, он не требует изучения GraphQL и не создаёт одно-страничное приложение (SPA), что упрощает индексацию и делает сайт более устойчивым к ошибкам выполнения скриптов. Однако, в отличие от Hugo, который славится сверхвысокой скоростью сборки при тысячах страниц, Eleventy обрабатывает большие сайты медленнее, хотя для большинства проектов (до нескольких сотен страниц) эта разница не критична.

¶Критика и ограничения

Основные нарекания сообщества касаются отсутствия встроенного инструмента для управления изображениями и их оптимизации (эта задача перекладывается на сторонние плагины) и относительной молодости экосистемы по сравнению с Jekyll или Hugo. Также некоторые разработчики отмечают, что документация, хотя и подробная, местами фрагментирована, что затрудняет поиск ответов на специфические вопросы.

¶Источники

• Официальная документация Eleventy (11ty.dev)
• Репозиторий проекта на GitHub (github.com/11ty/eleventy)
• Zach Leatherman, «Eleventy: A simpler static site generator» (персональный блог, 2018)
• Материалы ежегодного опроса State of JS (2019–2023)