Используем eleventy в 2025

Jem

Jul 25, 2025 • 3 min read

Почему удобно использовать Eleventy для разработки лендингов и статических сайтов

Eleventy (или 11ty) — это легковесный генератор статических сайтов, идеально подходящий для проектов, где нужно быстро и гибко собрать сайт на чистом HTML, CSS и JavaScript. В моём информационном пузыре он давно не на слуху, потому что давно хайпуют NextJs и RemixJs. Но для того чтобы делать лендинги или простые статические страницы вам не нужен React или другие фреймворки. Если вам нужно наклепать пачку однотипных (или не очень) лендингов, главное, что вам нужно - это шаблонизатор. Основная фишка 11ty это как раз шаблоны, которые удобно наполнять, например, через Markdown файлы.

Здесь сохраню основные фишки, которые немного упростят разработку на Eleventy.

1. Использование шаблонов Nunjucks (njk) и Markdown

Одно из главных преимуществ Eleventy — поддержка шаблонов и Markdown «из коробки». Вы можете легко разделить структуру HTML и данные. Я использую Nunjucks для шаблонов и Markdown для хранения данных, которые будут наполнять шаблон:

`src/urlpath/project.md`

--- 
title: Мой проект 
layout: layout.njk 
--- 

header: Hello

## Описание проекта 
Этот сайт создан с помощью Eleventy.

`src/_includes/layout.njk`

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

Такой подход позволяет быстро наполнять сайт контентом, не повторяя разметку вручную (фильтр safe означает, что вы вставляете здесь не просто строку, а html код и его не нужно подвергать санитизации - очистке от вредоносного кода)

2. Поддержка `--pathprefix` для настройки префикса статики

Если вы размещаете сайт в подкаталоге (например, https://pdf-convert.ru/welcome), Eleventy позволяет указать префикс для всех относительных ссылок. Установите плагин HTMLBasePlugin и добавьте его в свой конфиг:

eleventy.config.js


const { HtmlBasePlugin } = await import("@11ty/eleventy");

// остальной конфиг для 11ty (пример моего полного конфига будет далее)
eleventyConfig.addPlugin(HtmlBasePlugin);

И запускайте сборку с помощью скрипта eleventy --pathprefix nextlevelpath, где nextlevelpath относительный путь.

Теперь вы можете прописывать пути к статике в вашем шаблоне так:

<link rel="stylesheet" href="/styles/base.css" />

А Eleventy автоматически добавит нужный префикс (/nextlevelpath/styles/base.css).

3. Минификация скриптов с помощью esbuild

Выпускать ваш сайт в продакшн не сжав js - нехорошо. 11ty не имеет встроенного минификатора, поэтому мы прикрутим его сами. Для этого после сборки проекта можно минифицировать JS-файлы при помощи esbuild (здесь полный конфиг для моей сборки):

eleventy.config.js

const esbuild = require("esbuild");
const fs = require("fs");
const path = require("path");

module.exports = async function (eleventyConfig) {
  const { HtmlBasePlugin } = await import("@11ty/eleventy");
  eleventyConfig.addPlugin(HtmlBasePlugin);
  // копируем статику при билде (скрипты, стили, картинки и тп)
  eleventyConfig.addPassthroughCopy("src/styles");
  eleventyConfig.addPassthroughCopy("src/fonts");
  eleventyConfig.addPassthroughCopy("src/img");
  eleventyConfig.addPassthroughCopy("src/scripts");
  eleventyConfig.addPassthroughCopy("src/video");

  // минифицируем скрипты
  eleventyConfig.on("afterBuild", () => {
    const scriptDir = "src/scripts";
    const files = fs
      .readdirSync(scriptDir)
      .filter((file) => file.endsWith(".js"))
      .map((file) => path.join(scriptDir, file));

    return esbuild.build({
      entryPoints: files,
      outdir: "_site/scripts",
      minify: process.env.ELEVENTY_ENV === "production",
      sourcemap: process.env.ELEVENTY_ENV !== "production",
    });
  });

  eleventyConfig.addWatchTarget("src/scripts/");
   
  // сборка будет сохраняться в папку _site
  return {
    dir: {
      input: "src",
      output: "_site",
    },
  };
};

Теперь ваши скрипты будут автоматически минифицированы при продакшен-сборке.

4. Создание и использование глобальных переменных

Вы можете определить переменные один раз — и использовать их в любом шаблоне. Это удобно, если какая то переменная нужна для всего проекта в разных местах, либо она не зависит от шаблона. Например избражение для метатега должно быть прописано абсолютным путем.

`eleventy.config.js`

const isProd = process.env.ELEVENTY_ENV === "production"; 

module.exports = { 
    baseUrl: isProd ? "https://pdf-convert.ru/welcome" : "", 
}

Использование в шаблоне:

<meta property="og:image" content="{{ site.baseUrl }}{{ metaImage }}" />

Это удобно для ссылок, изображений, CDN и мета-данных.

5. Автоматическое добавление глобальных данных через `addGlobalData`

По факту это немного другой способ сделать то же самое, что и в предыдущем пункте. Чтобы не создавать вручную 11tydata.js, можно задать переменные в конфиге:

const isProd = process.env.ELEVENTY_ENV === "production";

module.exports = function(eleventyConfig) {
    eleventyConfig.addGlobalData("isProd", isProd); 
	return { 
			dir: { input: "src", output: "_site", }, 
			pathPrefix: isProd ? "/welcome" : "/", 
    	}; 
};

Теперь isProd доступна в любом шаблоне:

{% if isProd %} <script>/* production analytics */</script> {% endif %}

6. Использование переменных в css файлах

Например, для указания импорта шрифтов мне нужно было указать префикс. К сожалению pathPrefix не работает для css, а только для шаблонов. Для того чтобы можно было использовать переменные, можно превратить css файлы в шаблонный, поменяв расширение на css.njk. Обязательно в шаблонном файле нужно прописать имя которое должно быть присвоено файлу после генерации css из этого темплейта и параметр отвечающий за то, чтобы из этого темплейта не создавался html файл.

base.css.njk

---
permalink: /styles/base.css
eleventyExcludeFromCollections: true
---
# Теперь можно использовать переменные в шаблоне

@font-face {  
	font-family: "Manrope";  
    font-style: normal;  
    font-weight: 400;  
    src: url("{{ site.baseUrl }}/fonts/Manrope-Regular.ttf") format("truetype");
 }

Можно глянуть примеры лендигов сделанных по одному шаблону:

PDF to PNG Chrome extension
Combine PDF Chrome extension
Compress PDF Chrome extension

Теперь после билда можно закинуть вашу сгенерированную статику на сервер, чтобы ее раздавал nginx и все готово!

В общем, Eleventy — мощный и простой инструмент для сборки статических сайтов. Он идеально подойдёт как для лендингов, так и для документированных сайтов, блогов и расширений — особенно если вы хотите сохранить контроль над HTML, CSS и JS, не используя тяжёлые фреймворки.

Подписывайтесь на мой канал SleeplessTech

Почему удобно использовать Eleventy для разработки лендингов и статических сайтов

1. Использование шаблонов Nunjucks (njk) и Markdown

src/urlpath/project.md

src/_includes/layout.njk

2. Поддержка --pathprefix для настройки префикса статики