Гайд 02 · сквозной пример
Первый сайт
Сквозной пример: от пустой папки до собранного сайта на двух языках — английский основной, русский второй. У каждого шага есть команда, которую можно скопировать.
Нужен Docker. Без него поставьте HERON через pip install git+https://github.com/FMSTM/HERON.git@prod и пишите heron везде, где на этой странице стоит $H.
Простыми словами
Ещё нет Docker? Сначала поставьте его: Docker на macOS, Windows и Linux — это минут десять, и в конце есть проверка, что всё работает. Потом возвращайтесь сюда.
Эта страница — рецепт. Вы запускаете несколько команд по очереди, меняете несколько строк текста, и в конце у вас на компьютере настоящий сайт на двух языках, который открывается в браузере.
Что вы сделаете, коротко: создадите папку командой new, напишете HERON название и домен в site.yaml, напишете главную, добавите ещё одну страницу копированием файла, посмотрите результат на localhost:8000 и сделаете итоговую сборку. На каждом шаге есть точная команда: скопируйте, нажмите Enter, посмотрите, что изменилось.
В примере два языка. У вашего сайта может быть один — тогда пропустите шаги про второй язык. Этот гайд показывает и полный диалог heron new в терминале; короткий путь на странице С чего начать — heron new my-site -y, а затем конфигуратор, который спрашивает то же и больше.
Эта страница нужна, когда вы делаете сайт впервые. Пропустите её, если только правите тексты на сайте, который уже кто-то сделал: вам в Страницы и контент.
Перед началом
Все команды ниже запускают HERON из стабильного образа через одну короткую переменную:
H="docker run --rm -it -v $PWD:/site -w /site --user $(id -u):$(id -g) ghcr.io/fmstm/heron:prod"
-v $PWD:/site— HERON видит только текущую папку. Поэтому путь к сайту в командах — относительно неё:мой-сайт, или., если вы уже в папке сайта. Путь вида~/SOURCE/…внутри контейнера не существует — HERON так и скажет;-it— чтобыnewмог задать вопросы. Без него он молча возьмёт значения по умолчанию;--user— иначе файлы окажутся во владении root, и править их вы не сможете.
1. Создать сайт
$H new мой-сайт # новая папка рядом
$H new . # или в текущей — например, в только что склонированном git-репозитории
Папка может быть под git: .git, .gitignore, README и прочее служебное не мешают и не перезаписываются. Любой другой файл — отказ с перечнем того, что мешает.
new задаст несколько вопросов; Enter принимает значение в скобках:
Notes and messages language / Язык пояснений и сообщений
› (en, ru) [en] ru
Название сайта — как сайт называется для людей: в шапке, в заголовке окна, в разметке
› [мой-сайт] Workshop
Домен — без https:// и слешей, например example.com. Не знаете — Enter, останется заглушка
› [workshop.example] workshop.com
Языки сайта — коды через запятую: en или en, ru. Каждый язык — папка content/КОД/
› [en] en, ru
Основной язык — отдаётся из корня (/about/), остальные — с префиксом (/ru/about/)
› [en] en
- Язык пояснений — на нём будут комментарии во всех файлах, которые положит HERON, и сообщения на экране. Запоминается в
site.yaml(build.notes). Задать заранее:--notes ruили-e HERON_NOTES=ru; - Без вопросов — флагами:
$H new мой-сайт --notes ru --name Workshop --domain workshop.com --lang en,ru -y. Так работают ИИ-агенты и CI.
В конце new печатает, что создал, и блок «Что дальше» с готовыми командами. Что появилось:
мой-сайт/
├── site.yaml настройки с комментарием к каждому ключу
├── heron-readme.md записка: что это за папка — такая есть в каждой папке
├── content/en/index.md главная с полным SEO-блоком
├── content/en/404.md страница «не найдено»
├── content/ru/… то же для каждого языка из ответа
├── media/ data/ static/ plugins/
└── theme/ стартовая тема: theme.yaml, base.html, шаблоны, модули, стили
Сайт уже собирается, и без единого предупреждения — можно проверить сразу: $H build мой-сайт.
2. Описать сайт в site.yaml
site.yaml — единственная точка правды о сайте. Ответы на вопросы уже там; откройте его и допишите остальное — название на втором языке, суффикс заголовка, меню:
site:
domain: example.com
name: Workshop
name_ru: Мастерская # название для русских страниц
theme: main
default_lang: en # отдаётся из корня: /about/
languages: [en, ru] # второй язык — под /ru/
seo:
title_suffix: " — Workshop"
title_suffix_ru: " — Мастерская"
nav:
main: ["/", about] # ключи страниц: главная и about — на каждом языке свой адрес
Все ключи с пояснениями — site.yaml в спецификации и образец docs/agents/templates/site.yaml.
3. Поменяли языки — догнать структуру
$H init мой-сайт
init читает site.yaml и дописывает недостающее: добавили в languages язык de — появятся content/de/index.md, content/de/404.md и theme/i18n/de.yaml. Существующие файлы он не трогает (перезаписать — --force). Если сайт создан с нужными языками сразу, этот шаг не нужен.
init в папке без site.yaml — например, с готовым контентом из другого места — задаёт те же вопросы, что и new, и предлагает языки по папкам, которые уже лежат в content/.
4. Написать главную
Откройте content/en/index.md. Наверху — SEO-блок: поменяйте title (для выдачи), h1 (для того, кто уже на странице), description (сниппет). Комментарии не удаляйте — они подсказка тому, кто будет править файл после вас.
Ниже — вступление и секции:
We repair roofs since 2010.
We come to measure on the day you call.
## What we do {#about}
- **Roof repair.** Patching and re-covering.
- **Gutters.** Installation and cleaning.
Русская главная — content/ru/index.md: тот же якорь {#about}, свой текст. Якорь — имя секции для темы, он одинаков во всех языках; заголовок переводится.
Какие секции и в каком виде рисует главная, решает тема. Стартовая выводит вступление и все секции подряд; на своей теме у каждой секции будет своё место и свой модуль — Тема и дизайн.
5. Добавить страницу
Два способа, результат одинаковый:
cp мой-сайт/content/en/index.md мой-сайт/content/en/about.md # и поправить значения
$H page page about мой-сайт # тип page, файл content/en/about.md
heron page ТИП ИМЯ кладёт файл с полным SEO-блоком и заготовками всех секций, которые тема ждёт у этого типа. Страница сама появится в карте сайта и llms.txt, а в меню — потому что её ключ about записан в nav.main.
Перевод — файл с тем же именем в content/ru/ ($H page page about мой-сайт --lang ru). Адрес у перевода может быть свой — slug: o-nas в его SEO-блоке:
content/en/about.md → /about/
content/ru/about.md → /ru/o-nas/ slug: o-nas
Обе версии получат hreflang друг на друга, а пункт меню about на русских страницах сам поведёт на /ru/o-nas/.
6. Собрать и посмотреть
$H build мой-сайт && docker run --rm -p 8080:8080 -v "$PWD/мой-сайт/dist:/usr/share/nginx/html:ro" nginxinc/nginx-unprivileged:1.27-alpine
Откройте localhost:8080. После сборки HERON печатает отчёт: сколько страниц по языкам, предупреждения по группам (картинки, связи, ссылки, переводы…) и сводку незаполненных секций. Ошибки останавливают сборку и называют файл и строку.
$H check мой-сайт — тот же отчёт без сборки.
7. Боевая сборка
$H build мой-сайт --env prod --strict
--env prod открывает индексацию и включает счётчики из analytics. --strict превращает предупреждения в ошибки: в прод не уедет сайт с битой ссылкой или картинкой без alt. Готовая папка dist/ кладётся на любой хостинг; как собрать образ nginx с сайтом — Сборка и выкладка.
Источник
Эта страница повторяет docs/guide/02-first-site.md из ветки prod. Репозиторий обновляется первым, поэтому там всегда самая свежая версия.
Следующий гайд: Страницы и контент.