Eleventy: статический сайт без лишнего

Eleventy, он же 11ty, — генератор статических сайтов, который превращает Markdown и шаблоны в обычный HTML. По умолчанию он не добавляет клиентский JavaScript, не навязывает фреймворк и отдаёт результат, который можно положить на любой веб-сервер. Это хороший выбор для документации, блога и небольшого сайта, где важны скорость и предсказуемость.

Почему Eleventy

Генератор работает с Nunjucks, Liquid, Handlebars, JavaScript-шаблонами и Markdown, а данные собирает из файлов _data, front matter и каскада каталогов. Коллекции позволяют строить списки записей без базы данных, пагинация — разбивать их на страницы, а плагины добавляют RSS, карту сайта и оптимизацию изображений.

В отличие от тяжёлых SSG, здесь нет обязательного бандлера и клиентского рантайма. Вы получаете контроль над разметкой и можете добавить ровно столько интерактивности, сколько нужно. Обратная сторона — часть вещей придётся собрать самому: например, подсветку кода или минификацию подключают отдельно.

Ещё один плюс — предсказуемый результат: один и тот же набор файлов даёт одинаковый HTML, поэтому diff в репозитории показывает только реальные изменения. Это упрощает ревью, откат и поиск опечаток. Сборка не зависит от состояния базы или внешнего API, если вы сами не добавили такие шаги.

Минимальный проект

Начнём с пустого каталога и локальной установки. Версию Node.js возьмите актуальную LTS, а зависимости зафиксируйте через package-lock.json.

mkdir site && cd site
npm init -y
npm install --save-dev @11ty/eleventy
npx @11ty/eleventy --version

Добавьте в package.json поле «type»: «module» и скрипты сборки. Конфигурация в формате ESM выглядит так:

export default function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src/assets");
  eleventyConfig.addFilter("year", () => new Date().getFullYear());
  return {
    dir: { input: "src", output: "_site", includes: "_includes" }
  };
}

Структура каталогов: src/index.md, src/posts/ для записей, src/_includes/base.njk для общего каркаса, src/assets для картинок и стилей. Файлы с подчёркиванием в начале имени не попадают в итоговую сборку — это удобно для служебных каталогов. Крупные исходники изображений держите вне src, иначе passthrough copy будет копировать лишнее в _site.

Шаблон и front matter

Базовый layout принимает заголовок и содержимое страницы. Не забывайте про язык документа и метатеги: они влияют на доступность и индексацию.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ title }}</title>
</head>
<body>
  <main>{{ content | safe }}</main>
  <footer>{{ "now" | year }}</footer>
</body>
</html>

Запись в Markdown начинается с front matter. Поле tags создаёт коллекцию, layout подключает шаблон, а permalink задаёт чистый URL без расширения.

---
layout: base.njk
title: Первая заметка
tags: posts
permalink: /posts/first-note/
---
Текст заметки в Markdown.

Для раздела можно задать общие значения в файле src/posts/posts.json — тогда layout и теги не придётся повторять в каждой записи. Данные сайта удобно хранить в src/_data/site.json и обращаться к ним как site.title. Черновики помечайте полем draft: true и фильтруйте коллекцию в шаблоне или отдельным плагином, чтобы не публиковать недописанное.

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

Коллекция posts автоматически содержит все материалы с соответствующим тегом. Список на главной строится циклом, а страницы архива — через pagination.

{% for post in collections.posts | reverse %}
  <a href="{{ post.url }}">{{ post.data.title }}</a>
{% endfor %}

Пагинация по коллекции с шагом пять записей создаёт /page/0/, /page/1/ и далее. Проверьте, что первая страница имеет канонический адрес, иначе поисковые системы увидят дубли.

---
pagination:
  data: collections.posts
  size: 5
  alias: posts
permalink: /page/{{ pagination.pageNumber }}/
---
{% for post in posts %}
  <h2>{{ post.data.title }}</h2>
{% endfor %}

Сборка, отладка и публикация

Режим serve пересобирает сайт при изменении файлов и поднимает локальный сервер. Для поиска проблем используйте диагностический вывод и пробную сборку без записи файлов.

npx @11ty/eleventy --serve
npx @11ty/eleventy
DEBUG=Eleventy* npx @11ty/eleventy --dryrun
npx @11ty/eleventy --incremental

Итоговые файлы лежат в _site. На сервере их раздаёт nginx с обычным try_files; для статики не нужен прокси к приложению.

server {
  listen 80;
  server_name example.org;
  root /var/www/site/_site;
  index index.html;
  location / { try_files $uri $uri/ =404; }
}

Деплой удобно делать rsync с флагом —delete, но сначала проверьте список удаляемых файлов через —dry-run. Кэширование статики настраивается заголовками Cache-Control, а сжатие — на уровне nginx. Если сайт отдаётся из собственной инфраструктуры, добавьте HTTPS и не храните на сервере лишние черновики.

Что подключить дальше

• @11ty/eleventy-plugin-rss для ленты и корректных абсолютных ссылок.
• @11ty/eleventy-img для генерации адаптивных изображений в нескольких размерах.
• Плагин подсветки кода, если в статьях много примеров.
• Проверку ссылок и HTML в CI, чтобы битые адреса не попадали в продакшен.

Не добавляйте плагины «на всякий случай»: каждый увеличивает время сборки и поверхность обновлений. Начните с RSS и изображений, остальное подключайте по реальной потребности.

Производительность и проверки

Статический сайт быстрый по определению, но его легко испортить тяжёлыми шрифтами и неоптимизированными картинками. Отдавайте WebP или AVIF через picture, задавайте width и height, чтобы не было сдвигов макета. CSS подключайте одним файлом, а сторонние скрипты — только если без них не обходится функциональность.

Проверяйте сборку в CI: команда eleventy должна завершаться с ненулевым кодом при ошибке шаблона, а проверка ссылок — ловить битые адреса. Для SEO достаточно корректного title, description, canonical и sitemap; не нужно генерировать сотни служебных страниц.

Перед публикацией пройдите чек-лист: у всех страниц уникальный title, изображения с alt, внешние ссылки проверены, 404 отдаёт нужную страницу, а директория _site не содержит черновиков. Деплой делайте из чистой ветки, а не из рабочего каталога с локальными файлами.

Итог

Eleventy даёт простую модель: контент в Markdown, общий layout, данные и коллекции, на выходе — статический HTML. Проект собирается несколькими командами, легко версионируется и разворачивается на любом сервере. Сначала сделайте минимальный сайт из трёх страниц, проверьте сборку и деплой, а затем добавляйте пагинацию, RSS и оптимизацию изображений.