В начале октября 2024 года состоялся релиз Eleventy v3, и это отличный повод, чтобы рассказать об этом инструменте.
Eleventy is a simpler static site generator
Eleventy — это простой генератор статических сайтов (SSG) с открытым исходным кодом. Его основная задача — преобразовать папку с шаблонами и данными в статический сайт в виде HTML-файлов. Такие сайты быстрые, безопасные, простые в разработке и поддержке, размещаются на любом хостинге статических файлов или CDN.
Подход со статикой хорошо подходит для разработки контентно-ориентированных сайтов: лендингов, блогов, документации, сайтов компаний, афиш, онлайн-журналов, новостных порталов, каталогов, вики, портфолио, персональных сайтов и так далее.
Eleventy работает с любой структурой папок. Начиная с корня проекта он ищет шаблоны в формате Markdown, Liquid, Nunjucks и JS, затем преобразовывает их в HTML. Дополнительно можно настроить шаблоны на TS, JSX и MDX. Есть официальные плагины для шаблонов Handlebars, Mustache, EJS, Haml и Pug, которые до третьей версии были в составе ядра, но теперь вынесены отдельно. Также существуют плагины от сообщества, например Twig. Выбор на любой вкус, цвет и проект.
Отдельно стоит отметить плагин WebC с набором возможностей для шаблонов в HTML-стиле и серверного рендеринга веб-компонентов в статический HTML или декларативный Shadow DOM для инициализации на клиенте.
Маршрутизация в Eleventy построена на файловой структуре. В результате статической генерации получается набор папок и HTML-файлов, который работает по стандартной для большинства серверов модели. Итоговое расположение файлов можно переопределять. Также страницы можно генерировать на основе данных. В новой версии появились виртуальные шаблоны.
В качестве данных Eleventy предлагает концепцию под названием Data Cascade. Это система из данных в шаблонах (frontmatter), JS и JSON файлах. Все данные каскадируются и объединяются в один объект, который доступен в шаблонах. Можно подключить плагины для поддержки данных в формате YAML или TOML. В JS можно обращаться к внешним API через
fetch и преобразовывать данные.Eleventy предлагает механизм коллекций для организации контента. Элементы коллекций можно получить на любой странице и использовать для генерации контента. По коллекции можно делать пагинацию и генерировать навигационные ссылки.
У Eleventy богатый API. С его помощью можно прикрутить практически что угодно: новые типы шаблонов и данных, препроцессоры CSS, сборщики, валидаторы, обработчики изображений, произвольные функции и фильтры и так далее. Есть официальные и пользовательские плагины для решения разнообразных задач.
Eleventy можно сравнить с набирающим популярность Astro, который тоже задуман для контентных сайтов. По сравнению с ним, Eleventy меньше умеет из коробки, но за счёт плагинов и API более гибкий. Eleventy выделяется высокой скоростью установки и сборки по сравнению с другими решениями. Это актуально, потому что многие CI/CD сервисы тарифицируют время работы.
Я использую Eleventy для разработки контентно-ориентированных проектов, которые ложатся в архитектуру Jamstack. Советую присмотреться к этому инструменту для подобных задач.
#tools