Розробка кастомного шаблону Hugo (Go Templates)
Припустимо, вам потрібно додати нестандартний сайдбар з динамічною навігацією на основі таксономій. Готова тема Hugo цього не вміє: доведеться переписувати парціали, а після оновлення теми зміни з'їдуться. Або потрібен мультимовний блог з hreflang та Schema.org Article — стандартні шаблони не дають такої гнучкості. Ми створюємо кастомні шаблони на Go Templates, де кожен тег від <html> до фінального скрипта під вашим контролем. На рахунку — понад 30 проєктів на Hugo, деякі з нульовою затримкою на генерацію.
Чому Go Templates, а не Twig чи Liquid?
Go Templates — це вбудований рушій шаблонів Hugo, що працює на компільованому Go. На відміну від Twig (PHP), Liquid (Ruby) або Jinja2 (Python), він не потребує додаткових інтерпретаторів і генерує сторінки в десятки разів швидше. Сувора типізація та чітка ієрархія lookup order виключають «магічні» помилки. Докладніше про синтаксис можна прочитати в специфікації Go Templates.
| Параметр |
Go Templates |
Twig |
Liquid |
Jinja2 |
| Швидкість генерації |
0.5–1 мс на сторінку |
5–15 мс |
3–10 мс |
4–12 мс |
| Типізація |
Сувора |
Динамічна |
Динамічна |
Динамічна |
| Кешування парціалів |
partialCached (вбудовано) |
Немає |
Немає |
Немає |
| Інтеграція з Hugo data |
Повна |
Через плагіни |
Через плагіни |
Через плагіни |
| Learning curve |
Середня (своя логіка) |
Низька |
Низька |
Низька |
Згідно з документацією Hugo, lookup order визначає, який шаблон буде використано для кожного типу сторінок. Ми налаштовуємо цей порядок так, щоб уникнути конфліктів і досягти максимальної продуктивності.
Які можливості дає кастомний шаблон Hugo?
Повний контроль над розміткою без огляду на готову тему. SEO-шаблони з OG, Twitter Cards, Schema.org, canonical та hreflang налаштовуються один раз і працюють на всіх сторінках. Продуктивність: кешування partialCached, webp-зображення через resources, мініфікація — Core Web Vitals під контролем. Документація та навчання команди (2–3 години воркшопу). Гарантія 30 днів на безкоштовні правки.
Як створюються кастомні шаблони Hugo з нуля?
Розробка йде по етапах:
- Аналіз контентної моделі: типи контенту, таксономії, зв'язки.
- Проектування lookup order: які шаблони для яких сторінок. Hugo шукає шаблон у порядку: layouts/<тип>/<вид>.html, layouts/<тип>/single.html, layouts/<розділ>/single.html, layouts/_default/single.html. Правильне налаштування цієї ієрархії дозволяє перевикористовувати загальні шаблони та перевизначати лише потрібні.
- Верстка лейаутів, парціалів та шорткодів.
- Тестування на всіх типах сторінок (single, list, section, homepage).
- Деплой та фінальна оптимізація.
В результаті ви отримуєте повний комплект: baseof.html, шаблони для кожного типу контенту, перевикористовувані парціали, кастомні шорткоди та документацію.
Базова структура через baseof.html задає скелет сайту, а дочірні шаблони перевизначають блоки:
{{/* layouts/_default/baseof.html */}}
<!DOCTYPE html>
<html lang="{{ .Site.Language.Lang }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
{{ block "head" . }}{{ end }}
{{ partial "head/styles.html" . }}
</head>
<body class="{{ block "body-class" . }}{{ end }}">
{{ partial "header.html" . }}
<main>
{{ block "main" . }}{{ end }}
</main>
{{ partial "footer.html" . }}
{{ partial "head/scripts.html" . }}
</body>
</html>
Дочірній шаблон для окремого посту:
{{/* layouts/blog/single.html */}}
{{ define "title" }}{{ .Title }} | {{ .Site.Title }}{{ end }}
{{ define "body-class" }}page-post{{ end }}
{{ define "main" }}
<article class="post">
<header class="post__header">
<h1>{{ .Title }}</h1>
<time datetime="{{ .Date.Format "2006-01-02" }}">
{{ .Date.Format "2 January 2006" }}
</time>
{{ with .Params.authors }}
<div class="post__authors">
{{ range . }}
{{ $author := index $.Site.Data.authors . }}
<span>{{ $author.name }}</span>
{{ end }}
</div>
{{ end }}
</header>
{{ if .Params.featured_image }}
<figure class="post__cover">
{{ $img := resources.Get .Params.featured_image }}
{{ if $img }}
{{ $webp := $img | images.Resize "1200x630 WebP" }}
{{ $fallback := $img | images.Resize "1200x630" }}
<picture>
<source srcset="{{ $webp.Permalink }}" type="image/webp">
<img src="{{ $fallback.Permalink }}" alt="{{ .Title }}" loading="eager">
</picture>
{{ end }}
</figure>
{{ end }}
<div class="post__body">{{ .Content }}</div>
{{ partial "blog/related-posts.html" . }}
</article>
{{ end }}
Які проблеми вирішуємо в шаблонах Hugo
Складне групування даних. Наприклад, сторінка команди з сортуванням по відділах. Go Templates легко групують сторінки через groupByParam та слайси. Продуктивність парціалів. Важкі компоненти (сайдбар, навігація) кешуються через partialCached за унікальним ключем — генерація прискорюється до 50%. Мультимовність. Використовуємо вбудовані .Site.Home.Translations та кастомні relLangURL.
Кешування парціалів:
{{/* Кешировать по slug страницы */}}
{{ partialCached "components/sidebar.html" . .Page.Slug }}
{{/* Кешировать глобально (один раз для всего сайта) */}}
{{ partialCached "components/footer-nav.html" . }}
Більше про partialCached — в офіційній документації.
Що входить у розробку кастомного шаблону?
| Компонент |
Опис |
| Лейаути |
baseof.html та шаблони для всіх типів сторінок (single, list, section, homepage) |
| Парціали |
Перевикористовувані блоки: header, footer, sidebar, навігація, SEO-вставки |
| Шорткоди |
Кастомні вставки для контенту (таблиці, галереї, кнопки) |
| SEO-шаблони |
OG, Twitter Cards, Schema.org, canonical, hreflang |
| Оптимізація |
Кешування partialCached, webp-зображення, мініфікація |
| Документація |
Опис структури, інструкція з додавання контенту |
| Навчання |
Воркшоп для команди (2–3 години) |
| Гарантія |
30 днів на безкоштовні правки |
Терміни та як почати
| Тип проєкту |
Терміни |
| Типовий сайт (5–15 сторінок, блог, базова SEO) |
1–2 тижні |
| Складний проєкт (мультимовність, кастомні таксономії, інтеграції) |
3–5 тижнів |
| Корпоративний портал з інтеграціями |
4–6 тижнів |
Оцінимо ваш проєкт безкоштовно: напишіть нам — надішлемо терміни та бюджет.
Зв'яжіться для консультації — ми створюємо кастомні шаблони Hugo під ключ. Замовте розробку та отримайте повністю керований шаблон, який не підведе в продакшені.
Типи сайтів: технічне завдання, а не маркетинг
Ми бачимо, як команди витрачають бюджет на невідповідний стек. Лендинг на Next.js зі статичною генерацією та корпоративний сайт з CMS — принципово різні інфраструктури, навіть якщо зовні схожі. Помилка на старті веде до переплати за хостинг у 5–10 разів і низької швидкості завантаження. Core Web Vitals (LCP, INP, TTFB) для кожного типу сайту мають свої пріоритети: для лендингу критичний LCP, для корпоративного — TTFB через динамічний контент.
За нашими даними, до 40% проєктів переплачують на хостингу через неправильний вибір технології. Статичний сайт на CDN обходиться в 5 разів дешевше за WordPress на VPS за тих самих навантажень. Нижче розберемо чотири типи сайтів, їхні типові технічні помилки та рішення, які ми застосовуємо на практиці. Маємо 8 років досвіду та понад 120 успішних проєктів у різних нішах.
Як обрати правильний тип сайту?
Вибір визначає стек, інфраструктуру та бюджет на підтримку. Покрокова інструкція:
- Визначте мету: продаж (лендинг), інформування (корпоративний) чи швидкий контакт (візитка).
- Оцініть частоту оновлення контенту: щодня — потрібна CMS, раз на місяць — вистачить Markdown у Git.
- Виберіть стек за продуктивністю: статика для візиток, Next.js з ISR для корпоративних, GSAP для промо.
Як не помилитися з вибором CMS?
Якщо редактори нетехнічні — WordPress з Gutenberg або ACF Pro закриває потреби. Для складних структур — headless CMS (Strapi, Directus) з фронтендом на Next.js. Якщо оновлення рідкі — Markdown в Git з Astro або Next.js, деплой по push в main. Ми використовуємо Repository pattern для уникнення N+1 запитів при роботі з ORM.
Сайт-візитка
Найкомпактніший формат: 1–5 сторінок, мінімум динаміки. Основне завдання — контактна інформація та перше враження. Технічно просто, але є типові помилки.
Занадто важкий стек. WordPress з 15 плагінами для 5 сторінок дає TTFB 800ms на shared хостингу. Ми пропонуємо статику: HTML/CSS/JS або Next.js з output: 'export', задеплоєне на Vercel або Cloudflare Pages. Жодного PHP, жодної бази даних — тільки CDN. TTFB < 50ms гарантовано. Економія на хостингу — до 70% на місяць.
Немає контактної форми з backend-валідацією. Форма лише з JS-валідацією — це декорація. Ми додаємо серверлесс endpoint (Netlify Functions або AWS Lambda) з rate-limiter та сповіщеннями.
Відсутність Schema.org розмітки. Google Knowledge Panel будується на LocalBusiness або Organization. Ми вбудовуємо розмітку в шаблон: адреса, телефон, години роботи.
Термін розробки: 2–3 тижні з дизайном.
Чому швидкість лендингу безпосередньо впливає на конверсію?
Лендинг — сторінка з однією метою: конверсія. Core Web Vitals критичні, оскільки платний трафік і Google використовує CWV у Quality Score.
Конкретний кейс: лендинг з hero-відео 8MB autoplay без preload="none" і три сторонні скрипти аналітики синхронно в <head>. LCP 9.4s, INP 780ms. Ми замінили відео на poster image з відкладеним завантаженням, скрипти перевели на async/defer і частково в Web Workers через Partytown. LCP став 1.8s, INP 140ms. Конверсія зросла на 23% тільки за рахунок швидкості.
A/B тестування — стандартна практика. Після закриття Google Optimize використовуємо open-source Growthbook або PostHog. Для Next.js застосовуємо edge middleware для розподілу трафіку на CDN без додаткового JS.
Термін: 2–4 тижні.
Корпоративний сайт
Корпоративний — CMS, багато сторінок, мультимовність, інтеграція з CRM. Ключове питання: хто редагує контент і як часто.
Якщо редактори нетехнічні — WordPress з Gutenberg або ACF Pro. Для складних структур — headless CMS (Strapi, Directus) з фронтендом на Next.js. Якщо оновлення рідкі — Markdown в Git з Astro або Next.js, деплой по push в main.
Продуктивність: сторінка "Про компанію" з 40 фото в оригіналі — LCP 12 секунд на мобільному. <Image> компонент Next.js з WebP і srcset вирішує без ручної роботи, знижуючи LCP до 2 секунд.
Багатомовність: Astrotomic Translatable на Laravel або next-intl. Структура URL — /uk/about, /en/about з hreflang.
Термін: 6–12 тижнів залежно від обсягу.
Промо-сайт
Промо — тимчасовий або постійний сайт під кампанію. Нестандартний дизайн, анімації. Стек: GSAP, Framer Motion, Three.js, Lottie.
Головна пастка — гальмівні анімації на мобільних. GPU-анімації через transform і opacity — нормально. box-shadow в анімації, filter: blur() на кожному кадрі, анімація width/height — 20fps на iPhone 12. will-change: transform допомагає точково.
prefers-reduced-motion — обов’язковий для accessibility.
Термін: 3–6 тижнів.
Як ми оптимізуємо продуктивність?
Для кожного проєкту проводимо аудит початкового стеку: аналізуємо TTFB, LCP, CLS, INP через Lighthouse та WebPageTest. Використовуємо tree-shake та bundle splitting для зменшення JS-бандла, для Next.js — React Server Components і Suspense для стрімінгу. Серверлесс функції дозволяють уникнути постійної вартості сервера — платите тільки за запити. Наприклад, корпоративний сайт на Next.js + Strapi дає TTFB <200ms, що у 5 разів менше ніж аналог на WordPress.
Автоматично конвертуємо зображення в WebP/AVIF, генеруємо srcset для всіх роздільних здатностей, використовуємо lazy loading з Intersection Observer. Для фонових зображень — техніка progressive loading.
Порівняльна таблиця
| Параметр |
Візитка |
Корпоративний |
Лендинг |
Промо |
| Сторінок |
1–5 |
10–50+ |
1–3 |
1–10 |
| CMS |
Не потрібна |
Потрібна |
Не потрібна |
Рідко |
| SEO-пріоритет |
Середній |
Високий |
Високий |
Низький |
| Анімації |
Мінімум |
Помірно |
Помірно |
Інтенсивно |
| Термін (з дизайном) |
2–3 тиж |
6–12 тиж |
2–4 тиж |
3–6 тиж |
Вартість у кожному випадку розраховується індивідуально після вивчення технічного завдання. — Google рекомендує TTFB під 0.8s, у нас <0.2s.
Що входить в роботу
- Аналітика та прототипування (структура, користувацькі сценарії)
- Дизайн-концепція (адаптивний, mobile-first)
- Верстка з оптимізацією LCP, CLS, INP
- Вибір та налаштування CMS (якщо потрібна)
- Інтеграція з CRM/маркетинговими інструментами
- Тестування (кросбраузерне, load-testing)
- Документація та передача доступів
- Навчання редакторів (відео + письмово)
-
гарантія 3 місяці (безкоштовні правки)
Друга таблиця: порівняння підходів за продуктивністю
| Підхід |
TTFB (мс) |
Складність підтримки |
Вартість розробки |
| Static HTML/CSS |
<50 |
Низька |
Низька |
| Next.js + headless CMS |
<200 |
Середня |
Середня |
| WordPress + плагіни |
500–1500 |
Висока |
Висока |
Статичний сайт швидший за WordPress у 10 разів за TTFB. Для консультації щодо вибору типу сайту та стеку зв'яжіться з нашими інженерами. Замовте розробку під ключ — ми оцінимо терміни та бюджет за 1 день. Напишіть нам, щоб отримати безкоштовний технічний аудит вашого проекту. Отримайте індивідуальну пропозицію з гарантією якості.
