Eleventy (його ще пишуть як 11ty) – простий і водночас дуже гнучкий генератор статичних сайтів. Я свого часу перепробував чимало схожих інструментів і зупинився саме на ньому: він безкоштовний, з відкритим кодом, не нав'язує жодного фреймворку і не додає на сторінки зайвого JavaScript. Ти пишеш тексти в Markdown чи HTML, а Eleventy збирає з них готові HTML-сторінки, які можна викласти на будь-який хостинг.

Нижче покажу, як створити статичний сайт на Eleventy з нуля: встановлення, перша сторінка, шаблон, копіювання картинок і стилів, основні налаштування і підсвітка коду.

Чим Eleventy кращий за інші генератори

  • Легкий старт. Щоб отримати першу сторінку, не потрібно ні файлу налаштувань, ні готової теми – досить одного файлу Markdown.
  • Будь-які шаблони. Markdown, HTML, Nunjucks, Liquid, JavaScript – можна змішувати як завгодно навіть в одному проєкті.
  • Чистий результат. На виході звичайні HTML-файли без прихованих скриптів, тому сайт відкривається миттєво й добре індексується пошуковиками.
  • Швидкість. Навіть сайт на сотні сторінок збирається за лічені секунди.

Встановлення Eleventy

Eleventy працює на Node.js, тож спершу постав його (у Linux – з репозиторію свого дистрибутиву, у Windows і macOS – з офіційного сайту). Далі створи теку для майбутнього сайту і встанови Eleventy прямо в неї:

mkdir my-site
cd my-site
npm init -y
npm pkg set type=module
npm install @11ty/eleventy

Команда npm pkg set type=module дозволяє писати файл налаштувань у сучасному синтаксисі JavaScript з import і export. А встановлювати Eleventy глобально, як колись радили, вже не потрібно: у кожному проєкті своя копія, і оновлення одного сайту не зламає інший.

Перша сторінка

Створи в теці файл index.md з одним рядком:

# Привіт, світе!

І запусти збирання сайту:

npx @11ty/eleventy

Поряд з'явиться тека _site – це і є готовий сайт. У ній лежатиме файл index.html із вмістом:

<h1>Привіт, світе!</h1>

Під час роботи зручніше запускати Eleventy з вбудованим сервером:

npx @11ty/eleventy --serve

Сайт відкриється за адресою http://localhost:8080 і сам оновлюватиметься в браузері щоразу, коли ти зберігаєш файл.

Як Eleventy формує адреси сторінок

Структура тек автоматично перетворюється на адреси. Наприклад, файл blog/first-post.md збереться в _site/blog/first-post/index.html, а на сайті відкриватиметься за гарною адресою /blog/first-post/. Ніяких налаштувань маршрутів, як у динамічних сайтах, не потрібно.

Шаблон сторінки

Поки що наша сторінка – просто заголовок без <head>, стилів і меню. Щоб усі сторінки мали спільну обгортку, створи теку _includes, а в ній файл base.njk:

<!doctype html>
<html lang="uk">
<head>
  <meta charset="utf-8">
  <title>{{ title }}</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  {{ content | safe }}
</body>
</html>

Тепер на початку index.md вкажи, який шаблон використати і яку назву показати у вкладці браузера:

---
layout: base.njk
title: Мій перший сайт на Eleventy
---
# Привіт, світе!

Блок між рисками називається front matter – через нього кожній сторінці можна передати будь-які власні дані.

Файл налаштувань і копіювання файлів

Картинки, стилі та скрипти Eleventy сам не переносить у готовий сайт – йому треба про це сказати. Для цього створи в корені проєкту файл eleventy.config.js:

export default function (eleventyConfig) {
  // скопіювати теку зі стилями цілком
  eleventyConfig.addPassthroughCopy("css");
  // скопіювати всі картинки з теки blog і її підтек
  eleventyConfig.addPassthroughCopy("blog/**/*.{jpg,png,webp}");
}

Картинка, що лежить поряд зі статтею, наприклад blog/first-post/photo.webp, опиниться в готовому сайті за тим самим шляхом – зручно тримати зображення поруч із текстом.

У тому ж файлі можна змінити теки проєкту. Скажімо, щоб вихідні файли лежали окремо в src, а не змішувалися з package.json і node_modules:

export default function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src/css");

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

Тоді вже всі сторінки, шаблони (src/_includes) і стилі переїжджають у src, а готовий сайт, як і раніше, з'являється в _site.

Підсвітка синтаксису коду

Якщо ти, як і я, викладаєш у статтях шматки коду, підсвітка потрібна обов'язково. В Eleventy для цього є офіційний плагін:

npm install @11ty/eleventy-plugin-syntaxhighlight --save-dev

Підключи його у файлі налаштувань:

import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";

export default function (eleventyConfig) {
  eleventyConfig.addPlugin(syntaxHighlight);
  eleventyConfig.addPassthroughCopy("css");
}

Плагін розфарбовує код ще під час збирання сайту, тож у браузер не потрапляє жодного зайвого скрипту. Залишається лише додати в <head> шаблону стилі однієї з тем Prism, наприклад темної Okaidia:

<link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism-okaidia.css">

Тепер код у Markdown достатньо обгорнути в потрійні зворотні лапки й вказати мову:

```js
console.log("Привіт від Eleventy!");
```

Що далі

Готовий сайт із теки _site можна залити на будь-який хостинг – навіть найдешевший, бо жодного PHP чи бази даних йому не потрібно. А для зручної роботи з файлами проєкту знадобиться хороший редактор, наприклад VS Code, налаштований для веб-розробки.

Коли базовий сайт запрацює, можна додати автоматичне меню, власні шорткоди та категорії статей. Усі матеріали про цей генератор – за позначкою Eleventy, а про інші підходи – за позначкою Статичні сайти.

А ти вже пробував/ла робити статичні сайти? На чому зупинився/лась? Пиши в коментарях 🙂