Знакомство и применение генератора статических сайтов
Данная статья посвящена практическому опыту работы ООО «2А СОФТ» с генератором статических сайтов - Hugo
Генераторы статических сайтов известны в международном поле как Static Site Generators или кратко SSG. Это программы, которые берут исходные файлы, например, тексты в формате Markdown и автоматически превращают их в набор готовых HTML-страниц по предустановленным в генераторе шаблонам. В отличие от традиционных CMS (WordPress, Joomla, Drupal, 1С-Битрикс и другие), которые собирают страницу из базы данных каждый раз, когда на нее заходит пользователь, SSG делает всю работу один раз — в момент сборки сайта. Посетитель получает уже готовый, «сгенерированный» файл, что кардинально меняет скорость и безопасность веб-ресурса.
Как это работает?
- Контент отдельно: Вы пишете статьи или документацию в простых текстовых файлах (Markdown).
- Дизайн отдельно: Разработчик создает HTML/CSS-шаблоны сайта.
- Сборка (Build): Вы запускаете генератор. Он берет текст, вставляет его в шаблоны и на выходе выдает папку с готовыми статическими страницами, стилями и картинками.
- Деплой: Вы загружаете эту папку на любой хостинг или CDN (например, GitHub Pages, Netlify или Vercel).
Плюсы и минусы статического подхода
| Критерий | Преимущества (Плюсы) | Недостатки (Минусы) |
|---|---|---|
| ⚡ Скорость | Максимальная. Серверу не нужно делать запросы к БД — он мгновенно отдает готовый HTML. | Время сборки. На сайтах с тысячами страниц генерация изменений может занимать минуты. |
| 🔒 Безопасность | Высокая. На сервере нет базы данных SQL и бэкенда (PHP), которые можно взломать. | Сложность динамики. Формы или поиск нельзя сделать «из коробки» — нужны API или сторонние виджеты. |
| 💰 Стоимость и поддержка | Дешево/бесплатно. Не нужны мощные сервера. Большинство сайтов бесплатно размещаются на глобальных CDN. | Порог входа. Нет привычной админки. Контент часто приходится править через код или систему Git. |
Максимальная. Серверу не нужно делать запросы к БД — он мгновенно отдает готовый HTML.
Время сборки. На сайтах с тысячами страниц генерация изменений может занимать минуты.
Высокая. На сервере нет базы данных SQL и бэкенда (PHP), которые можно взломать.
Сложность динамики. Формы или поиск нельзя сделать «из коробки» — нужны API или сторонние виджеты.
Дешево/бесплатно. Не нужны мощные сервера. Большинство сайтов бесплатно размещаются на глобальных CDN.
Порог входа. Нет привычной админки. Контент часто приходится править через код или систему Git.
На текущий момент времени мир SSG уже не сводится к каким-то малоизвестным величинам. В данной области широко известны такие представители как:
- Jekyll — классический инструмент на Ruby
- Astro — современный фреймворк, ориентированный на контент
- Next.js / Nuxt — мощные фреймворки на базе React и Vue. Они могут работать как SSG, так и в гибридном режиме (совмещая статику с динамическим сервером), что подходит для крупных проектов интернет-магазинов и веб-приложений.
- Docusaurus / Sphinx — фреймворки, созданные специально для технической документации
Наш выбор был сделан в пользу Hugo. Этот генератор статических сайтов является один из самых быстрых генераторов в мире, написанный на языке Go. На нем реализованы блоги и контентные сайты с тысячами страниц. Основные задачи, которые перед нами стояли:
- «Всеядный» и недорогой хостинг. Мы внедряем учетные системы как на малых предприятиях, так и в группах компаний. Нам важно чтобы помимо установленной системы заказчик понимал экономическую целесообразность того или иного примененного нами решения на проекте. Для этого нам надо расширять свои компетенции современными ИТ инструментами и не забывать о достаточно важной вещи – это стоимости владения таким инструментом.
- Широкая возможность кастомизации внешнего вида полученных HTML страниц. Решение данной задачи не зависит непосредственно от HUGO. Конкретно в нашем случае за это отвечает Tailwindcss.
Применив технологию SSG мы получили хороший результат, который можем рекомендовать вам к применению на ваших ИТ проектах:
- страница сервисов 1С под управлением JavaScript отборов
- наша база знаний, которая начала расти и пока не выявила каких-то серьезных проблем
Однако, не обошлось без минусов. HUGO оказался не достаточно гибок в своих настройках таксономии (Taxonomy). Рекомендуем перед началом использования более детально изучить данные по возможностям таксономии и сопоставить их с требованиями собственной задачи. В генераторе сайтов Hugo таксономия предназначена для группировки, классификации контента (постов блога, карточек товаров и т.п.). В нашем примере блога это:
- Вендор. Владелец софта, о котором идет речь
- Владелец поста. Читатель, для которого предназначен данный пост блога
- Тэги. Уточняющие теги содержания поста.
Такую конструкцию пришлось самостоятельно доработать, т.к. в штатной таксономии HUGO такой возможности нет. Для решения этой задачи нами использовался родной для HUGO язык Go. К слову, это тоже причина выбора Hugo, т.к. для веб-сервисов мы часто используем Go или Python.
Помимо того, что вы можете прямо сейчас видеть на нашем сайте hugo базу знаний с модернизированной на Go таксономией, использование языка Go позволяет нам разбирать прайс-листы от поставщиков, содержащих в одном файле порядка 30 тысяч позиций, за время порядка ~1секунды на один такой файл.