Разработка сайта на Hugo (Static Site Generator)

Разработка сайта на Hugo (Static Site Generator)

Hugo — генератор статических сайтов на Go. Основное преимущество над Jekyll и Eleventy — скорость сборки: 1000 страниц собираются за секунды, не минуты. Для больших сайтов (документация, новостные порталы, мультиязычные маркетинговые сайты) это критично. Деплой — статика в CDN, никакого сервера приложений.

Архитектура проекта

mysite/
├── archetypes/          # Шаблоны front matter для новых контент-файлов
├── assets/              # Файлы для Hugo Pipes (SCSS, JS, изображения)
├── config/              # Конфигурация (hugo.toml или config/_default/)
├── content/             # Markdown-контент
│   ├── blog/
│   ├── services/
│   └── _index.md
├── data/                # YAML/JSON/TOML данные (глобальные переменные)
├── i18n/                # Файлы переводов
├── layouts/             # Go-шаблоны
│   ├── _default/
│   │   ├── baseof.html  # Базовый шаблон
│   │   ├── list.html
│   │   └── single.html
│   ├── partials/
│   └── shortcodes/
├── static/              # Статические файлы (копируются as-is)
└── themes/              # Подключаемые темы (git submodule)

Конфигурация hugo.toml

baseURL = "https://example.com/"
languageCode = "ru"
defaultContentLanguage = "ru"
title = "Название сайта"
theme = "mytheme"

[params]
  description = "Описание сайта"
  author = "Компания"
  googleAnalytics = "G-XXXXXXXXXX"

[markup.goldmark.renderer]
  unsafe = true  # Разрешить HTML в Markdown

[markup.highlight]
  style = "monokai"
  lineNos = true

[minify]
  disableCSS = false
  disableHTML = false
  disableJS = false

[outputs]
  home = ["HTML", "RSS", "JSON"]
  page = ["HTML"]
  section = ["HTML", "RSS"]

Мультиязычность

Hugo имеет нативную поддержку i18n. Два подхода:

Подход 1: content по папкам

# hugo.toml
defaultContentLanguage = "ru"

[languages.ru]
  languageName = "Русский"
  weight = 1

[languages.en]
  languageName = "English"
  weight = 2
  contentDir = "content/en"

Подход 2: по суффиксу файла

content/
  blog/
    post.ru.md
    post.en.md

Строки интерфейса хранятся в i18n/ru.yaml:

readMore: "Читать далее"
publishedOn: "Опубликовано"
tags: "Теги"

В шаблоне: {{ i18n "readMore" }}

Hugo Pipes: сборка ассетов

Hugo Pipes заменяет Webpack/Vite для базовых задач:

{{/* layouts/partials/head.html */}}

{{ $scss := resources.Get "sass/main.scss" }}
{{ $style := $scss | resources.ToCSS | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">

{{ $js := resources.Get "js/main.js" }}
{{ $script := $js | resources.Minify | resources.Fingerprint }}
<script src="{{ $script.Permalink }}" defer></script>

Для сложной JS-сборки (ES-модули, npm-пакеты) Hugo Pipes интегрируется с ESBuild:

{{ $opts := dict "targetPath" "js/bundle.js" "minify" true "target" "es2020" }}
{{ $js := resources.Get "js/main.js" | js.Build $opts }}

Таксономии и контент-типы

Таксономии — встроенный механизм Hugo для тегов, категорий, авторов:

[taxonomies]
  tag = "tags"
  category = "categories"
  author = "authors"
  series = "series"

Front matter поста:

---
title: "Название статьи"
date: 2024-03-15
draft: false
tags: ["hugo", "jamstack"]
categories: ["Разработка"]
authors: ["ivan-petrov"]
series: ["Hugo Basics"]
featured_image: "images/cover.jpg"
description: "Краткое описание для SEO"
---

Страница тега /tags/hugo/ генерируется автоматически и рендерится через layouts/taxonomy/tag.html.

Работа с данными

Data файлы (data/*.yaml) доступны глобально в шаблонах:

# data/team.yaml
- name: "Иван Петров"
  role: "Технический директор"
  photo: "ivan.jpg"
  linkedin: "https://linkedin.com/in/ivanpetrov"

{{/* layouts/partials/team.html */}}
{{ range $.Site.Data.team }}
<div class="team-card">
  <img src="/images/team/{{ .photo }}" alt="{{ .name }}">
  <h3>{{ .name }}</h3>
  <p>{{ .role }}</p>
</div>
{{ end }}

Деплой и CI/CD

Netlify — самый простой вариант. Файл netlify.toml:

[build]
  command = "hugo --minify"
  publish = "public"

[build.environment]
  HUGO_VERSION = "0.121.0"
  HUGO_ENV = "production"

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    Cache-Control = "public, max-age=31536000, immutable"

GitHub Actions → S3 + CloudFront:

- name: Build Hugo
  run: hugo --minify --baseURL="https://example.com/"

- name: Deploy to S3
  run: aws s3 sync public/ s3://my-bucket --delete

- name: Invalidate CloudFront
  run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_DIST_ID }} --paths "/*"

Производительность

Статический Hugo-сайт при правильной настройке получает 95–100 баллов Lighthouse из коробки. Критичные настройки:

• resources.Fingerprint для кеш-бастинга ассетов
• loading="lazy" для изображений ниже fold
• Hugo Image Processing для генерации WebP и нужных размеров: {{ $img := .Resources.GetMatch "cover.*" | images.Resize "800x WebP" }}
• Preload для критических шрифтов

Сроки

Простой корпоративный сайт на готовой теме с кастомным контентом — 5–7 дней. Разработка с нуля: архитектура + шаблоны + мультиязычность + CI/CD — 2–4 недели. Крупный документационный портал или новостной сайт с сотнями страниц — 1–2 месяца.