spi4ka@gorbunovalexey.ru ~ $

Hugo tutorial: создание блога с нуля за 30 минут

Hugo tutorial: создание блога с нуля за 30 минут

Hugo tutorial на русском: пошаговое создание блога с нуля. Установка Hugo, выбор темы, настройка, деплой. Полное руководство для начинающих за 30 минут.

теги
#Hugo #Блог #Статичный Сайт #Tutorial #Markdown
категории
Tools
опубликовано

Когда я решил завести блог, первым делом полез смотреть конструкторы. Craftum, Tilda, Wix — всё это красиво, но для блога разработчика это как забивать гвозди микроскопом. Потом попробовал WordPress — и чуть не поседел от количества плагинов и уязвимостей. В итоге нашёл Hugo, и это было лучшее решение.

В этом туториале покажу, как создать блог на Hugo с нуля за 30 минут. Без воды, только практика.

Почему Hugo, а не WordPress или конструкторы

Прежде чем ставить что-то, давай разберёмся, почему именно Hugo.

Скорость сборки — Hugo собирает сайт быстрее всех. Серьёзно, тысячи страниц за секунды. Jekyll, Gatsby, Next.js и близко не стоят.

Нет базы данных — весь контент в Markdown-файлах. Нет MySQL, нет уязвимостей SQL-инъекций, нет бэкапов базы. Всё в Git.

Markdown — пишешь статьи в любимом редакторе (Obsidian, VS Code, да хоть в vim). Никаких WYSIWYG-редакторов в браузере.

Хостинг почти бесплатный — статичный сайт можно захостить на GitHub Pages, Netlify, Vercel. Бесплатно и быстро.

Полный контроль — хочешь поменять что-то в теме? Просто редактируй файлы. Никаких “доступно только в Pro-версии”.

Кстати, почему я ушёл с конструктора на Hugo, подробно писал в статье Hugo vs Craftum . Там про боль работы с конструкторами для блога.

Установка Hugo

macOS

# Через Homebrew (рекомендую)
brew install hugo

# Проверяем
hugo version

Linux (Ubuntu/Debian)

# Snap — самый простой способ
sudo snap install hugo --channel=extended

# Или через apt (может быть старая версия)
sudo apt install hugo

# Проверяем
hugo version

Windows

# Через Chocolatey
choco install hugo-extended

# Или через Scoop
scoop install hugo-extended

# Проверяем
hugo version

Важно: ставь именно hugo-extended, а не просто hugo. Extended-версия поддерживает SCSS и другие фичи, которые нужны большинству тем.

Создаём новый сайт

# Создаём проект
hugo new site my-blog

# Переходим в папку
cd my-blog

# Инициализируем Git (обязательно для тем)
git init

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

my-blog/
├── archetypes/     # Шаблоны для новых статей
├── assets/         # SCSS, JS (обрабатываются Hugo)
├── content/        # Твой контент (статьи, страницы)
├── data/           # Данные в JSON/YAML/TOML
├── i18n/           # Переводы
├── layouts/        # Кастомные шаблоны
├── static/         # Статика (картинки, CSS, JS)
├── themes/         # Темы
└── hugo.toml       # Главный конфиг

Выбираем и устанавливаем тему

Темы — это 90% внешнего вида блога. Идём на themes.gohugo.io и выбираем.

Мои рекомендации для блога разработчика:

  • PaperMod — минималистичная, быстрая, популярная
  • Congo — современная, с тёмной темой
  • Blowfish — красивая, много настроек
  • Nightfall — то, что использую я

Устанавливаем тему как git submodule:

# PaperMod
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

# Или Congo
git submodule add https://github.com/jpanther/congo.git themes/congo

# Или Nightfall (моя тема)
git submodule add https://github.com/LordMathis/hugo-theme-nightfall.git themes/nightfall

Настраиваем конфиг

Открываем hugo.toml и настраиваем:

baseURL = 'https://yourdomain.com/'
languageCode = 'ru'
title = 'Мой блог'
theme = 'PaperMod'  # Имя папки темы

[params]
  author = "Твоё имя"
  description = "Блог о программировании и технологиях"
  
  # Для PaperMod
  showReadingTime = true
  showShareButtons = true
  showPostNavLinks = true
  
[menu]
  [[menu.main]]
    name = "Блог"
    url = "/posts/"
    weight = 1
  [[menu.main]]
    name = "О блоге"
    url = "/about/"
    weight = 2

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

Каждая тема имеет свои параметры — смотри документацию темы.

Пишем первую статью

# Создаём статью
hugo new posts/my-first-post/index.md

Hugo создаст файл с базовым frontmatter. Редактируем:

---
title: "Моя первая статья"
date: 2025-01-31
description: "Описание статьи для SEO, 150-160 символов"
tags:
  - hugo
  - блог
---

Привет, мир! Это моя первая статья на Hugo.

## Заголовок второго уровня

Текст статьи. Поддерживается весь **Markdown**:
- списки
- *курсив*
- `код`

### Код с подсветкой

```go
package main

import "fmt"

func main() {
    fmt.Println("Hello, Hugo!")
}

Изображения

Положи картинку в папку статьи и вставь:

Описание картинки


### Структура статьи (Page Bundles)

Hugo поддерживает два способа организации статей:

**1. Отдельные файлы:**

content/posts/ ├── my-first-post.md ├── second-post.md


**2. Page Bundles (рекомендую):**

content/posts/ ├── my-first-post/ │ ├── index.md │ └── image.webp ├── second-post/ │ ├── index.md │ └── screenshot.png


Page Bundles удобнее — картинки лежат рядом со статьёй, а не в общей папке `static/`.

## Локальный сервер

```bash
# Запускаем сервер разработки
hugo server -D

# -D показывает черновики (draft: true)

Открываем http://localhost:1313 и видим блог. Сервер автоматически перезагружает страницу при изменениях — очень удобно.

Сборка для продакшена

# Собираем сайт
hugo

# Или с минификацией
hugo --minify

Готовый сайт появится в папке public/. Это статичные HTML/CSS/JS файлы, которые можно захостить где угодно.

Деплой на GitHub Pages

Самый простой способ захостить блог бесплатно.

1. Создаём репозиторий

Создай репозиторий username.github.io на GitHub.

2. Пушим код

git add .
git commit -m "Initial commit"
git remote add origin git@github.com:username/username.github.io.git
git push -u origin main

3. Настраиваем GitHub Actions

Создаём .github/workflows/hugo.yml:

name: Deploy Hugo site

on:
  push:
    branches: [main]

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true  # Для тем как submodule
          
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true
          
      - name: Build
        run: hugo --minify
        
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

4. Включаем Pages

В настройках репозитория: Settings → Pages → Source: gh-pages branch.

Через пару минут блог будет доступен на https://username.github.io.

Деплой на свой сервер

Если хочешь полный контроль — деплой на VPS. Я использую GitLab CI/CD:

# .gitlab-ci.yml
stages:
  - build
  - deploy

build:
  stage: build
  image: registry.gitlab.com/pages/hugo:latest
  script:
    - hugo --minify
  artifacts:
    paths:
      - public

deploy:
  stage: deploy
  script:
    - rsync -avz public/ user@server:/var/www/blog/
  only:
    - main

Подробнее про автоматизацию и CI/CD для разработчиков писал в статье про Cursor AI — там про то, как автоматизировать рутину.

Полезные команды Hugo

# Создать новую статью
hugo new posts/article-name/index.md

# Локальный сервер с черновиками
hugo server -D

# Сборка
hugo --minify

# Сборка с будущими постами
hugo --minify --buildFuture

# Показать все статьи
hugo list all

# Проверить конфиг
hugo config

SEO-оптимизация

Hugo из коробки генерирует:

  • sitemap.xml — карта сайта
  • RSS-ленту
  • Правильную структуру URL

Для полной SEO-оптимизации добавь в шаблоны:

  • Open Graph теги
  • Twitter Cards
  • Schema.org разметку
  • Canonical URLs

Если интересно, как я оптимизировал этот блог для SEO — могу написать отдельную статью.

Частые проблемы

Тема не применяется

# Проверь, что тема указана в конфиге
cat hugo.toml | grep theme

# Проверь, что папка темы существует
ls themes/

Картинки не отображаются

Используй Page Bundles и относительные пути:

![alt](image.webp)  # Если картинка в папке статьи

Сервер не видит изменения

# Перезапусти сервер
hugo server -D --disableFastRender

Ошибка “TOCSS: failed to transform”

Нужна extended-версия Hugo:

hugo version  # Должно быть "extended"

Заключение

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

Что делать дальше:

  1. Установи Hugo и создай первый пост
  2. Выбери тему под свой стиль
  3. Настрой деплой через GitHub Actions или GitLab CI
  4. Пиши контент и не парься о технических деталях

Если хочешь узнать про продуктивность при написании статей — почитай про тайм-менеджмент для разработчиков .

Есть вопросы по Hugo? Пиши в комментарии или в Telegram — помогу разобраться.

Похожие статьи