Создание технического блога на Hugo: от идеи до деплоя

Почему Hugo для технического блога?

После 10+ лет работы в информационной безопасности и Data Science накопилось много практического опыта, которым хочется делиться системно. Выбор пал на Hugo — статический генератор сайтов на Go — по нескольким причинам:

Преимущества Hugo:

Скорость: Генерация тысяч страниц за секунды
Простота: Один бинарный файл, без зависимостей
Гибкость: Шаблоны на Go Template, поддержка Markdown
Безопасность: Статические файлы = меньше векторов атаки
SEO-friendly: Чистый HTML, быстрая загрузка

Хороший технический блог — это не только контент, но и удобство чтения, навигации и поиска. — Мой опыт

Архитектура решения

Структура проекта

Создаем базовую структуру проекта Hugo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# Установка Hugo (Ubuntu/Debian)
sudo apt install hugo

# Создание нового сайта
hugo new site project_arekusei_blog

# Переход в директорию проекта
cd project_arekusei_blog

# Инициализация git
git init

Конфигурация Hugo

Основной конфигурационный файл hugo.toml:

      
      
      
    
hugo.tomltoml


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


baseURL = 'https://arekusei.tech/'
languageCode = "ru-ru"
title = "Security Specialist"
theme = "security-specialist"

enableRobotsTXT = true
timeZone = "Europe/Moscow"
defaultContentLanguage = "ru"

[pagination]
  pagerSize = 10

[markup]
  [markup.highlight]
    noClasses = false
    codeFences = true
    lineNos = true
    lineNumbersInTable = true

  [markup.tableOfContents]
    startLevel = 2
    endLevel = 3
    ordered = false

  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

Создание кастомной темы

Структура темы

Для технического блога создана тема “Security Specialist” с акцентом на читаемость и функциональность:

1
2
3


# Создание структуры темы
mkdir -p themes/security-specialist/{layouts,assets,static}
mkdir -p themes/security-specialist/layouts/{_default,partials,shortcodes}

Основные компоненты темы

      
      
      
    
layouts/_default/baseof.htmlhtml


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
    <meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">
    
    <!-- Security headers meta -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';">
    
    {{ $style := resources.Get "css/main.css" | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">
    
    {{ $js := resources.Get "js/main.js" | minify | fingerprint }}
    <script defer src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>
    
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<body>
    {{ partial "header.html" . }}
    
    <main class="container">
        {{ block "main" . }}{{ end }}
    </main>
    
    {{ partial "footer.html" . }}
</body>
</html>

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

Структура постов

Посты создаются в формате Markdown с фронтматером:

1
2
3
4
5


# Создание нового поста
hugo new posts/creating-technical-blog-with-hugo.md

# Редактирование поста
code content/posts/creating-technical-blog-with-hugo.md

Фронтматер поста

      
      
      
    
archetypes/default.mdyaml


 1
 2
 3
 4
 5
 6
 7
 8
 9
10


---
title: "{{ replace .File.ContentBaseName "-" " " | title }}"
date: {{ .Date }}
categories: []
tags: []
description: ""
summary: ""
image: "/images-posts/default.jpg"
draft: true
---

Пример поста с улучшенными блоками кода

Используем shortcode codeblock для блоков с заголовком и подсветкой синтаксиса:

      
deploy.shbash

1
2
3
4

#!/bin/bash

# Сборка сайта
hugo --minify

Оптимизация производительности

Безопасность и заголовки

      
      
      
    
nginx-security.confnginx


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


# Security headers
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:;" always;

# HSTS
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;

# Запрет индексации в не-production средах
if ($host != "arekusei.tech") {
    add_header X-Robots-Tag "noindex, nofollow" always;
}

Ключевые особенности реализации

Основные достижения:

Безопасность: A+ rating в Security Headers https://www.ssllabs.com/ssltest/analyze.html?d=arekusei.tech
Доступность: Полная поддержка screen readers
SEO: Оптимизированная структура и мета-теги
Мобильность: Адаптивный дизайн для всех устройств

Вызовы и решения:

Проблема: Интеграция кастомной темы с Hugo модулями
Решение: Использование Go Template с частичными шаблонами
Проблема: Оптимизация загрузки для медленных соединений
Решение: Ленивая загрузка изображений и минификация ресурсов
Проблема: Проблема публикации статей
Решение: Использование GitHub как доставщика статей и кода.

Заключение

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

Ключевые выводы:

Hugo идеально подходит для технических блогов благодаря скорости и простоте
Кастомная тема позволяет создать уникальный дизайн, ориентированный на читаемость
Автоматизация деплоя через GitHub экономит время и снижает ошибки
Безопасность статических сайтов значительно выше динамических аналогов
Технический блог — это не только контент, но и инфраструктура

Дальнейшее развитие:

Добавление системы комментариев (например, через GitHub Discussions)
Создание интерактивных примеров кода
Экспорт контента в PDF для офлайн-чтения

Ссылки и ресурсы

Архитектура технического блога на Hugo — Схема работы статического генератора Hugo: от Markdown-файлов до готового сайта

Статья написана на основе реального опыта создания блога arekusei.tech. Все примеры кода и конфигурации проверены на практике.