Розробка сайту на 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/              # Статичні файли (копіюються як є)
└── themes/              # Підключаємі теми (git submodule)

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

baseURL = "https://example.com/"
languageCode = "uk"
defaultContentLanguage = "uk"
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: контент за папками

# hugo.toml
defaultContentLanguage = "uk"

[languages.uk]
  languageName = "Українська"
  weight = 1

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

Підхід 2: за суфіксом файлу

content/
  blog/
    post.uk.md
    post.en.md

Рядки інтерфейсу зберігаються у i18n/uk.toml:

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"]
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 місяці.