MAATRIX / Блог / Как установить и настроить Eleventy (11ty) на VPS

Как установить и настроить Eleventy (11ty) на VPS

MAATRIX

Если Hugo кажется избыточно быстрым, а Jekyll тянет за собой Ruby со всеми его граблями, Eleventy (11ty) — золотая середина: чистый JavaScript, ноль встроенной магии, шаблоны на любой вкус — от Nunjucks до чистого HTML. Ниже — как поставить его на свежий VPS, собрать статику и отдать её через Nginx с HTTPS, без танцев с бубном.

Содержание

  1. Почему Eleventy, а не Hugo или Jekyll
  2. Подготовка сервера и установка Node.js
  3. Установка Eleventy и структура проекта
  4. package.json и npm-скрипты
  5. Отдача статики через Nginx
  6. HTTPS через Let's Encrypt
  7. Автоматизация деплоя из Git

Обсудить статью, задать вопрос или начать новую тему

Есть вопрос по этой статье, идея для обсуждения или просто хотите поделиться опытом? Сообщество MAATRIX ждёт. Для общения, пожалуйста, зарегистрируйтесь в нашем личном кабинете.

Перейти в сообщество →

Почему Eleventy, а не Hugo или Jekyll

Eleventy не диктует структуру проекта и не требует изучать собственный язык шаблонов — можно писать на чистом HTML, добавляя .11tydata.js файлы для данных, или взять Nunjucks, Liquid, Handlebars, EJS, Pug — что удобнее команде. Сборка идёт на Node.js, зависимостей у самого 11ty минимум, а конфиг — это обычный .eleventy.js файл с JS-функциями, а не YAML с ограниченным набором опций.

По скорости сборки Hugo (написан на Go) обычно быстрее на больших сайтах — это ожидаемо, компилируемый язык против интерпретируемого. Но для блогов, документации и лендингов на несколько сотен страниц разница на практике не критична, а гибкость JS-экосистемы часто перевешивает. Если сайт уже растёт за тысячи страниц и сборка ощутимо тормозит — тогда стоит смотреть в сторону Hugo.

Минус у Eleventy один — он тянет за собой Node.js и npm-зависимости, а значит на сервере должно быть окружение для сборки (или вы собираете локально и заливаете только готовый _site). Ниже рассмотрим оба варианта.

Подготовка сервера и установка Node.js

Возьмите чистый VPS на Ubuntu 24.04 или Debian 12 — 1 vCPU и 1-2 ГБ RAM хватает с запасом, Eleventy не требователен к ресурсам даже во время сборки. Первым делом ставим Node.js через NodeSource — версия из репозитория дистрибутива обычно устаревшая:

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
node -v
npm -v

На момент написания статьи (август 2026) LTS-ветка Node.js — 20.x, но проверьте актуальную версию на nodesource.com/node на момент установки — линейки LTS меняются, а 11ty обычно требует Node не ниже 18.

Создаём отдельного пользователя для сайта, чтобы не собирать всё под root:

sudo adduser --disabled-password --gecos "" eleventy
sudo su - eleventy

Нужен сервер под эту задачу?

Разверните VPS MAATRIX за пару минут: NVMe, AMD EPYC, root-доступ, локации UK, США, Франция и РФ. Оплата картой РФ и по СБП.

Арендовать сервер

Установка Eleventy и структура проекта

Внутри домашней директории пользователя eleventy создаём проект:

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

Минимальная структура для старта:

site/
├── src/
│   ├── index.md
│   └── posts/
│       └── first-post.md
├── .eleventy.js
└── package.json

Файл src/index.md:

---
title: Главная
layout: base.njk
---
# Привет с Eleventy

Это статическая страница, собранная генератором 11ty.

Базовый layout src/_includes/base.njk:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>{{ title }}</title>
</head>
<body>
  {{ content | safe }}
</body>
</html>

Конфиг .eleventy.js в корне проекта — здесь задаём папки ввода/вывода и подключаем плагины:

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src/assets");

  return {
    dir: {
      input: "src",
      output: "_site",
      includes: "_includes"
    }
  };
};

Локальная (или на сервере) сборка:

npx @11ty/eleventy

Результат появится в _site/ — это уже готовые статические HTML-файлы, которые нужно только отдать веб-сервером.

package.json и npm-скрипты

Чтобы не набирать длинные команды, добавьте в package.json секцию scripts:

{
  "scripts": {
    "build": "eleventy",
    "serve": "eleventy --serve",
    "watch": "eleventy --watch"
  }
}

Теперь сборка — это npm run build, а локальная разработка с автообновлением — npm run serve (поднимает dev-сервер на порту 8080 с live reload). На проде dev-сервер не нужен — он только для разработки, финальный сайт отдаём статикой через Nginx.

Отдача статики через Nginx

Собранные файлы из _site/ копируем в директорию, которую будет обслуживать Nginx:

sudo mkdir -p /var/www/eleventy-site
sudo cp -r ~/site/_site/* /var/www/eleventy-site/
sudo chown -R www-data:www-data /var/www/eleventy-site

Ставим Nginx, если ещё не установлен:

sudo apt install -y nginx

Конфиг /etc/nginx/sites-available/eleventy-site:

server {
    listen 80;
    server_name example.com www.example.com;
    root /var/www/eleventy-site;
    index index.html;

    location / {
        try_files $uri $uri/ $uri.html =404;
    }

    error_page 404 /404.html;

    location ~* \.(css|js|svg|png|jpg|jpeg|webp|woff2?)$ {
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }
}

Директива try_files $uri $uri/ $uri.html важна: Eleventy по умолчанию генерирует "красивые" URL вида /posts/first-post/index.html, и такая директива корректно резолвит и папки с index.html, и одиночные .html-файлы, если вы используете альтернативный формат вывода.

Активируем сайт и проверяем конфиг:

sudo ln -s /etc/nginx/sites-available/eleventy-site /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx

Если сайт вообще не открывается по домену, но открывается по IP — проверьте, что DNS-запись A уже указывает на сервер и успела обновиться; разбор таких случаев есть в статье про то, когда сайт открывается по IP, но не по домену.

HTTPS через Let's Encrypt

Без HTTPS в 2026 году сайт — плохая идея, браузеры честно предупреждают об этом пользователей. Ставим certbot и получаем сертификат:

sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d example.com -d www.example.com

Certbot сам допишет в конфиг Nginx нужные директивы для 443-порта и настроит автоматический редирект с HTTP на HTTPS. Обновление сертификата идёт через systemd-таймер, который ставится вместе с пакетом — проверить его можно командой sudo systemctl status certbot.timer. Более подробный разбор процесса и частых проблем — в статье про установку Let's Encrypt SSL на VPS.

Если предпочитаете автоматизацию сертификатов без ручного вызова certbot, посмотрите в сторону Caddy с авто-SSL — он получает и продлевает сертификаты сам, без отдельного шага настройки.

Автоматизация деплоя из Git

Собирать сайт руками и копировать файлы каждый раз — неудобно. Практичная схема: держите исходники в Git-репозитории (свой Gitea или GitHub), а на сервере настройте post-receive хук или простой скрипт, который дёргается по вебхуку и делает:

#!/bin/bash
cd /home/eleventy/site
git pull origin main
npm ci
npx @11ty/eleventy
sudo rsync -a --delete _site/ /var/www/eleventy-site/
sudo systemctl reload nginx

npm ci вместо npm install — важный момент: он ставит зависимости строго по package-lock.json, без риска, что на сервере окажется другая минорная версия пакета, чем у вас локально. Полная схема автодеплоя, включая варианты через GitHub Actions и systemd-таймеры, разобрана в статье автодеплой из Git на VPS.

Для CI/CD посерьёзнее, где сборка идёт в изолированном раннере, а не на проде — стоит посмотреть GitLab CI/CD на VPS или связку с собственным Gitea-инстансом.

Нужен сервер под эту задачу?

Разверните VPS MAATRIX за пару минут: NVMe, AMD EPYC, root-доступ, локации UK, США, Франция и РФ. Оплата картой РФ и по СБП.

Арендовать сервер

Нужны сами нейросети для контента?

Генерируйте изображения, видео и озвучку нейросетями на falapi.io — десятки моделей в одном окне. Оплата картой РФ и по СБП.

Изображения и ВидеоАудио и звукИИ MAAT — Собеседник

Частые вопросы

Нужен ли Node.js на самом продакшн-сервере?

Нет, если вы собираете сайт локально или в CI и заливаете только содержимое _site/. Node.js на проде нужен только если сборка происходит прямо на сервере — как в примере с автодеплоем выше.

Eleventy работает медленнее, чем Hugo?

На больших объёмах страниц — обычно да, Hugo компилируется в бинарник и генерирует статику быстрее. На типичных блогах и лендингах разница чаще всего некритична, но точных цифр по вашему проекту без замера дать нельзя — слишком много зависит от количества страниц и сложности шаблонов.

Можно ли использовать React или Vue-компоненты в Eleventy?

Да, через официальные и community-плагины (например, @11ty/eleventy-plugin-vue или собственные шаблонизаторы), но это уже выход за рамки "чистой статики" — усложняет сборку и добавляет зависимости.

Что делать, если после git pull сборка падает с ошибкой зависимостей?

Проверьте, что package-lock.json закоммичен и используется npm ci, а не npm install — это исключает расхождение версий пакетов между локальной машиной и сервером.

Как добавить RSS-ленту или sitemap?

Через официальные плагины @11ty/eleventy-plugin-rss и аналогичные для sitemap — подключаются в .eleventy.js парой строк, не требуют написания генератора вручную.

Читайте также

Обсудить статью, задать вопрос или начать новую тему

Есть вопрос по этой статье, идея для обсуждения или просто хотите поделиться опытом? Сообщество MAATRIX ждёт. Для общения, пожалуйста, зарегистрируйтесь в нашем личном кабинете.

Перейти в сообщество →