Hugo: генератор статических сайтов с открытым исходным кодом на Go 108

Что такое Hugo?

Hugo — это генератор статических сайтов, разработанный на языке Go, отличающийся высокой скоростью и гибкостью. Благодаря системе шаблонов и быстрому конвейеру обработки ресурсов, Hugo способен отрендерить полноценный сайт за считанные секунды. Hugo позволяет создавать самые разные типы сайтов: корпоративные, государственные, некоммерческие, образовательные, новостные, сайты мероприятий и проектов, документацию, портфолио с работами, посадочные страницы, коммерческие, профессиональные и личные блоги, резюме и многое другое.

Основные возможности Hugo

Быстрый конвейер обработки ресурсов

• Обработка изображений: позволяет выполнять преобразования, изменение размера, обрезку, поворот, корректировку цветов, применение фильтров, наложение текста и изображений, а также извлечение данных EXIF.

• Сборка JavaScript: транспиляция TypeScript и JSX в JavaScript, сборка, tree-shaking, минификация, создание source maps и вычисление SRI-хешей.

• Обработка Sass: транспиляция Sass в CSS, сборка, tree-shaking, минификация, создание source maps, вычисление SRI-хешей и интеграция с PostCSS.

• Обработка Tailwind CSS: компиляция утилитарных классов Tailwind CSS в стандартный CSS, сборка, tree-shaking, оптимизация, минификация, вычисление SRI-хешей и интеграция с PostCSS.

Гибкая структура

• Hugo обладает многоязыковой поддержкой и мощной системой таксономии, широко используется для создания сайтов документации, посадочных страниц, корпоративных, государственных, некоммерческих, образовательных, новостных сайтов, а также сайтов мероприятий и проектов.

Встроенный веб-сервер

• Встроенный веб-сервер Hugo позволяет в процессе разработки мгновенно видеть изменения в содержимом, структуре, поведении и оформлении.

Модули Hugo

• Позволяют делиться контентом, ресурсами, данными, переводами, темами, шаблонами и конфигурациями с другими проектами через публичные или приватные Git-репозитории.

Версии Hugo

Hugo выпускается в трёх версиях: стандартной, расширенной и расширенной с поддержкой деплоя. Расширенная версия и расширенная версия с поддержкой деплоя предоставляют ряд дополнительных возможностей, таких как кодирование изображений в формат WebP, транспиляция Sass в CSS с помощью встроенного LibSass и другие. Расширенная версия с поддержкой деплоя также позволяет напрямую развёртывать сайт в бакеты Google Cloud Storage, бакеты AWS S3 или контейнеры Azure Storage.

Как пользоваться Hugo?

1. Создание нового сайта

Откройте терминал и выполните следующую команду, чтобы создать новый сайт Hugo:

hugo new site mynewsite
cd mynewsite

2. Добавление темы

Вы можете выбрать тему из каталога тем Hugo и добавить её на свой сайт. В качестве примера возьмём тему hyde и импортируем её с помощью системы модулей Hugo:

# Инициализация системы модулей Hugo
hugo mod init github.com/<your_user>/<your_project>
# Импорт темы в конфигурационном файле Hugo
# Отредактируйте файл hugo.toml или hugo.yaml, добавив следующее содержимое
[module]
[[module.imports]]
path = "github.com/spf13/hyde"

3. Создание контента

Используйте следующую команду для создания новой статьи:

hugo new posts/my-first-post.md

Затем отредактируйте созданный Markdown-файл content/posts/my-first-post.md, добавив в него содержимое статьи.

4. Разработка и предпросмотр

В процессе разработки вы можете использовать встроенный веб-сервер Hugo, чтобы в реальном времени наблюдать изменения в содержимом, структуре, поведении и оформлении. Запустите сервер следующей командой:

hugo server -D

Опция -D означает, что черновики статей также будут включены. Откройте браузер и перейдите по адресу http://localhost:1313 — там вы увидите свой сайт.

GitHub: https://github.com/gohugoio/hugo