Генераторы статических сайтов и Markdown

Генератор статических сайтов — программа, которая при сборке превращает файлы Markdown, данные и общий шаблон в готовые HTML-файлы; на сервер кладут только их.

Другой путь: сайт как результат сборки

В предыдущих уроках страница собиралась при каждом запросе: сервер брал содержание из базы и вставлял в шаблон. Есть другой путь, знакомый вам по части 6 как «статика»: страницы собирают один раз заранее, а на сервер кладут готовые файлы. Программа, которая это делает, называется генератором статических сайтов. Когда в 2010-х сайты начали взламывать, замедлять и дорого обслуживать, этот подход вернулся, потому что у такого сайта нет базы, кода на сервере и, значит, почти нечего ломать.

Markdown: текст без HTML

Чтобы писать страницы, не набирая теги, придумали Markdown (Джон Грубер, 2004). Это несколько знаков, которые читаются глазами и превращаются в HTML:

# Заголовок первого уровня
## Заголовок второго уровня

Обычный абзац с **жирным** словом и [ссылкой](https://example.ru).

- пункт списка
- ещё пункт

Правила Грубера были описаны примерами, и разные программы понимали их по-разному. Поэтому позже появился строгий общий вариант, CommonMark. Файл Markdown это обычный текст: его откроет любой редактор, он хранится в Git, а его содержание не привязано к оформлению. Если завтра вы смените шаблон, тексты не пострадают.

Front matter: паспорт страницы

Над текстом страницы ставят небольшой блок настроек между строками из трёх дефисов. Он называется front matter:

---
title: Каталог
description: Что мы делаем и сколько это стоит
---
# Каталог

Это «паспорт» страницы: заголовок, описание для поисковика, дата, любые ваши поля. Шаблон берёт их оттуда (page.title), а коллекции по ним сортируются. Такой приём придумал Jekyll, и теперь он есть почти везде.

Что делает генератор

Подвигайте схему ниже. Слева Markdown со своим front matter, справа готовая страница. Услуги выводятся циклом по данным.

<!doctype html>
<html lang="ru">
<head><meta charset="utf-8"><title>Каталог | Мой сайт</title></head>
<body>
<header><strong>Мой сайт</strong>
<nav><a href="index.html">Главная</a> <a href="catalog.html">Каталог</a> </nav></header>
<main><h1>Каталог</h1>
<p>Все услуги выводятся из данных, а не набраны руками:</p>
<ul>
<li><strong>Первая услуга</strong>, от 3000 ₽</li>
<li><strong>Вторая услуга</strong>, от 5000 ₽</li>
<li><strong>Третья услуга</strong>, по смете</li>
</ul></main>
<footer>Мой сайт, все права защищены</footer>
</body>
</html>

{% for item in site.items %}
  <li>{{ item.title }}</li>
{% endfor %}

Работа генератора укладывается в пять шагов: прочитать файлы и данные; разобрать front matter; подставить данные в текст и превратить Markdown в HTML; вставить результат в общий шаблон; записать готовые файлы в папку. Эта работа называется сборкой (build) и идёт у вас на компьютере или на сервере сборки. Результат это обычная папка с HTML, CSS и картинками, которую можно положить куда угодно.

Три понятия, которые встречаются в любом генераторе:

• Шаблон (layout) задаёт общую рамку: шапка, меню, подвал. Он один, и телефон в шапке правится в одном месте.
• Данные и коллекции: набор однотипных записей (все услуги, все статьи). Шаблон проходит по ним циклом и выводит список. Новая услуга это новый файл, а не правка страницы.
• Фильтры и вставки: небольшие функции в шаблоне (экранирование, форматирование даты) и повторно используемые куски разметки.

Jekyll, Hugo, Eleventy, Astro, SvelteKit

Генераторов сотни, и принцип у них один. Различаются язык, скорость и привычки. Вот пять самых полезных для знакомства.

Курс, который вы читаете, устроен так же. Каждый урок это файл Markdown с метаданными (мы называем их front matter), компоненты Svelte для живых схем, а сайт собирается в папку готовых HTML-файлов и лежит на бесплатном хостинге. Это SvelteKit в режиме предсборки.

Как выбрать? Если нужен просто сайт со страницами и коллекциями, годится любой. Hugo берут за скорость на больших сайтах, Eleventy за простоту, Astro когда страницы почти не требуют скриптов, SvelteKit когда сайту нужны ещё и живые интерфейсы. Знакомство с одним из них поможет освоить остальные.

Что получаем и чем платим

Плюсы статического сайта: быстрый (отдаётся готовый файл), безопасный (на сервере нет кода и базы), дешёвый (хостинг для статики часто бесплатен), с историей (каждая правка в Git, откат одной командой), переносимый (папку можно положить куда угодно).

Минусы:

• нет привычной админки: редактор должен уметь править файлы и отправлять изменения в Git (позже мы увидим, как это упрощает «безголовая» CMS);
• динамики нет: формы, поиск, комментарии, оплата и личный кабинет подключаются как внешние сервисы или функции (урок 7);
• сборка растёт вместе с числом страниц: для тысяч страниц нужны быстрый генератор и умная выкладка.

Практика

Вы в эпохе 2019 года: «статика» вернулась в моду, и вы переносите свой сайт на генератор. В странице проект из четырёх видов файлов: настройки, общий шаблон, по странице Markdown на каждый раздел брифа и коллекция из ваших услуг. Допишите настройки и шаблон (язык, шапка с меню и подвал), заполните страницы и выведите услуги в каталоге циклом.

Заметьте одну особенность. Редактор курса сам подставляет значения вашего брифа в простые двойные скобки, поэтому в шаблонах задачи рядом с каждым значением стоит безобидный фильтр: {{ site.title | escape }}. В настоящем Jekyll вы писали бы просто {{ site.title }}.

Что было не так с 2019 годом

Генераторы 2019-го были замечательны для разработчиков и тяжелы для остальных. Установка Jekyll на Windows превращалась в испытание, сборка большого сайта длилась минутами, а редактору приходилось осваивать Git, чтобы поправить одну опечатку. Эти же проблемы решали следующие шаги: быстрые сборщики, визуальные редакторы поверх Git и «безголовые» CMS, о которых следующий урок.