Hugo

Hugo — это быстрый генератор статических сайтов (Static Site Generator), написанный на Go. Он превращает контент (Markdown) и шаблоны в готовые HTML-страницы без использования базы данных и серверной логики, что делает сайты очень быстрыми, безопасными и удобными для хостинга.

• Выбор генератора статического сайта: Hugo vs Astro vs Eleventy
• Хостинг для HTML сайта и Static HTML: ТОП вариантов (бесплатно и VPS)

Hugo читает data‑файлы из каталога data/ в форматах YAML, JSON и TOML, после чего они доступны в шаблонах. Формат данных никак не влияет на конечный HTML: это просто разные способы сериализации ключ‑значение и массивов.

• Если планируешь в основном редактировать данные руками (каталоги тарифов, списки провайдеров, таблицы), бери YAML в data/ и YAML‑front matter в контенте (метаданные страницы).
• Если данные будут почти всегда генерироваться внешними скриптами или подтягиваться из API, можно хранить их как JSON, чтобы не добавлять лишний шаг конвертации.

Технически можно без проблем комбинировать: глобальные справочники в YAML, «сырые» выгрузки из API в JSON — Hugo спокойно обработает оба варианта.

У меня сейчас под рукой Ubuntu 24.04.3 LTS, поэтому протестирую инструкцию на этой ОС. Проще установить Hugo версии из репозитория Ubuntu.

sudo apt update
sudo apt install hugo
 
$ hugo version
hugo v0.123.7+extended linux/amd64 BuildDate=2025-07-18T03:41:49Z VendorInfo=ubuntu:0.123.7-1ubuntu0.3

Если нужна самая свежая версия, можно скачать .deb с GitHub и поставить через dpkg, но для старта достаточно пакета из дистрибутива.

Скачиваем .deb Hugo Extended нужной версии и устанавливаем через dpkg. Версии hugo смотрим здесь https://github.com/gohugoio/hugo/releases В консоли Linux вводим команды, в переменной HUGO_VER задаем нужную версию hugo.

cd /tmp
HUGO_VER=0.152.0  # или другая актуальная
 
wget https://github.com/gohugoio/hugo/releases/download/v${HUGO_VER}/hugo_extended_${HUGO_VER}_Linux-amd64.tar.gz
tar -xzf hugo_extended_${HUGO_VER}_Linux-amd64.tar.gz
 
# В архиве один бинарник hugo
sudo mv hugo /usr/local/bin/hugo

Установленный бинарник окажется в /usr/local/bin/hugo, я для простоты использования затер системный бинарник установленный из репозитория.

cp /usr/local/bin/hugo /usr/bin/hugo

Перейди в каталог, где хочешь держать проект (мой проект называется vs_engine). Эта команда создаст структуру каталогов (content/, layouts/, static/, config и т.д.).

hugo new site vs_engine
cd vs_engine

Инициализируй Git (желательно сразу), что упростит дальнейшую работу, деплой и откат изменений.

git init
git add .
git commit -m "init"

• Выбери тему на https://themes.gohugo.io для примера возьмем тему Ananke Gohugo Theme.​
• Подключи её как submodule, то есть как внешний репозиторий и зафиксировать его как зависимость. Будет создана папка themes/doks, но это не обычная папка, а вложенный Git-репозиторий (там свой .git и своя история). Также в корне проекта появится файл .gitmodules, который говорит Git где лежит подмодуль и из какого репозитория он берётся.

cd /home/darkfire/vs_engine
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

• В корне проекта в hugo.toml (или hugo.yaml) пропиши тему, которую Hugo будет использовать при сборке:

echo "theme = 'ananke'" >> hugo.toml

Создай первый пост:

hugo new posts/first-post.md

Hugo создаст файл с front matter и draft: true; отредактируй его и поставь draft: false, чтобы пост был виден.

Запусти dev‑сервер. По умолчанию сайт откроется на http://localhost:1313, пересборка идет автоматически при изменении файлов. Ключ D позволяет показывать также черновики ваших постов.

hugo server -D

Для продакшен‑сборки запусти просто hugo. Готовый статический сайт окажется в каталоге public/, его уже можно заливать на VPS, Nginx, GitHub Pages и т.п.

Содержимое public/ можно спокойно удалять, это просто результат сборки, а не исходники. Обычно public/ не коммитят в Git (добавляют в .gitignore), а используют только как артефакт для деплоя.

В Hugo все статические файлы должны лежать в папке static.

Когда ты создаешь обычный пост, ты пишешь текст внутри файла (после —). У этого поста нет параметра layout.

Hugo действует так:

1. Видит пост в папке posts.
2. Ищет специальный шаблон. Не находит.
3. Берет стандартный шаблон темы (themes/ananke/layouts/_default/single.html).
4. Этот шаблон делает простую вещь: берет текст твоего поста и выводит его на экран.

Если же мы генерируем файлы, то там не будет текста. Если мы применим к ним стандартный шаблон (как для обычных постов), то Hugo просто выведет Заголовок и… пустую страницу. Именно поэтому в Python-скрипте мы добавили строчку: layout: "compare". Эта строчка говорит Hugo: "Не используй стандартный шаблон! Ищи специальный файл с именем compare.html".

Куда положить этот compare.html?

Hugo ищет шаблоны в строгом порядке. Если твой контент лежит в content/posts, то Hugo ищет шаблон в такой последовательности:

1. layouts/posts/compare.html
2. layouts/_default/compare.html (Запасной вариант).

Обычные посты (без layout: "compare") будут по-прежнему открываться через стандартный шаблон темы.