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

Почему Hugo?

  • Скорость: Генерирует тысячи страниц за секунды
  • Простота: Markdown + YAML frontmatter
  • Гибкость: Мощная система тем и шаблонов
  • SEO-friendly: Автоматическая оптимизация
  • Бесплатный хостинг: GitHub Pages, Netlify, Vercel

Установка и настройка

1. Установка Hugo

macOS:

brew install hugo

Ubuntu/Debian:

sudo apt-get install hugo

Windows:

choco install hugo
# или скачать с GitHub releases

2. Создание сайта

# Создаём новый сайт
hugo new site my-blog
cd my-blog

# Инициализируем Git
git init

3. Установка темы PaperMod

# Добавляем тему как submodule
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/papermod

# Создаём файл конфигурации
cat > hugo.yaml << 'EOF'
baseURL: 'https://your-domain.com'
languageCode: 'ru-ru'
title: 'Мой DevOps блог'
theme: 'papermod'

params:
  env: production
  title: "DevOps блог"
  description: "Заметки о DevOps, инфраструктуре и автоматизации"
  keywords: [devops, kubernetes, docker, ci-cd]
  author: "Ваше имя"
  
  ShowReadingTime: true
  ShowShareButtons: true
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: true
  ShowWordCount: true
  ShowRssButtonInSectionTermList: true
  
  homeInfoParams:
    Title: "Добро пожаловать на мой блог"
    Content: "Делюсь опытом в области DevOps, облачных технологий и автоматизации"

  socialIcons:
    - name: github
      url: "https://github.com/yourusername"
    - name: telegram
      url: "https://t.me/yourusername"
    - name: rss
      url: "/index.xml"

menu:
  main:
    - identifier: posts
      name: Статьи
      url: /posts/
      weight: 10
    - identifier: tags
      name: Теги
      url: /tags/
      weight: 20
    - identifier: about
      name: О блоге
      url: /about/
      weight: 30

markup:
  highlight:
    style: github-dark
    lineNos: true
    codeFences: true
    guessSyntax: true

outputs:
  home:
    - HTML
    - RSS
    - JSON
EOF

4. Создание структуры контента

# Создаём директории
mkdir -p content/posts
mkdir -p content/about

# Создаём страницу "О блоге"
cat > content/about/index.md << 'EOF'
+++
title = "О блоге"
date = "2025-01-01"
+++

Этот блог посвящён DevOps практикам, облачным технологиям и автоматизации. 
Здесь я делюсь опытом, туториалами и размышлениями о современной разработке.

## Темы блога

- DevOps практики и инструменты
- Kubernetes и контейнеризация  
- CI/CD и автоматизация
- Облачные платформы
- Мониторинг и observability
EOF

# Создаём первый пост
hugo new posts/welcome.md

5. Первый пост

cat > content/posts/welcome.md << 'EOF'
+++
title = "Добро пожаловать в мой DevOps блог!"
date = "2025-01-27"
draft = false
tags = ["welcome", "devops", "blog"]
+++

Привет! Это мой первый пост в новом блоге, созданном с помощью Hugo.

## Что будет в блоге?

- Практические руководства по DevOps
- Обзоры инструментов и технологий
- Решения реальных проблем
- Автоматизация рутинных задач

Оставайтесь на связи!
EOF

Бонус: Автоматизация с Claude Code

Теперь самое интересное — как настроить автоматизацию блога с помощью Claude Code для максимальной эффективности.

Создание CLAUDE.md

Создайте файл CLAUDE.md в корне проекта:

# CLAUDE.md

## Обзор проекта
Технический блог на Hugo, посвящённый DevOps темам.

## Основные команды

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

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

# Создание нового поста
hugo new posts/post-name.md

Деплой

# Деплой в продакшен
make deploy

Правила контента

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

  • Использовать русский язык для контента
  • Добавлять релевантные теги
  • Устанавливать draft = false при готовности к публикации
  • Следовать существующему формату постов

Шаблон Front Matter

+++
title = "Заголовок статьи"
date = "2025-01-27"
draft = false
tags = ["tag1", "tag2"]
+++

Типичные задачи для Claude

  1. Создание новых постов: Использовать hugo new posts/filename.md
  2. Редактирование контента: Редактировать markdown файлы в content/posts/
  3. Публикация: Изменить draft = false
  4. Сборка сайта: Запустить команду hugo

### Настройка автоматического деплоя

Создайте `Makefile`:

```makefile
.PHONY: build deploy server

# Build site
build:
	hugo

# Start development server
server:
	hugo server -D --bind 0.0.0.0

# Deploy to production
deploy: build
	rsync -avz --delete public/ user@server:/var/www/blog/
	
# Clean build directory
clean:
	rm -rf public/

GitHub Actions для автодеплоя

Создайте .github/workflows/deploy.yml:

name: Deploy Hugo site

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v4
      with:
        submodules: true
        
    - name: Setup Hugo
      uses: peaceiris/actions-hugo@v2
      with:
        hugo-version: 'latest'
        
    - name: Build
      run: hugo --minify
      
    - name: Deploy to GitHub Pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./public

Продвинутые возможности с Claude

1. Автоматическое создание контента

Попросите Claude:

Создай новый пост о Kubernetes networking с примерами кода и диаграммами

Claude автоматически:

  • Создаст файл с правильным именем
  • Добавит корректный front matter
  • Сгенерирует структурированный контент
  • Установит подходящие теги

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

Оптимизируй SEO для поста о Docker, добавь мета-теги и улучши структуру

3. Массовое редактирование

Обнови все посты: добавь reading time и исправь форматирование кода

4. Аналитика контента

Проанализируй все посты и предложи темы для новых статей

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

# Создание поста с архетипом
hugo new posts/my-post.md

# Запуск с draft постами
hugo server -D

# Сборка с минификацией
hugo --minify

# Генерация sitemap
hugo --enableGitInfo

# Проверка broken links
hugo server --disableFastRender

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

1. Сжатие изображений

# В hugo.yaml
imaging:
  resampleFilter: "lanczos"
  quality: 75
  anchor: "smart"

2. Минификация

minify:
  tdewolff:
    html:
      keepWhitespace: false
    css:
      keepCSS2: true
    js:
      keepVarNames: false

3. Кэширование

caches:
  getjson:
    maxAge: "10m"
  getcsv:
    maxAge: "10m"
  images:
    maxAge: "1y"

Мониторинг и аналитика

Google Analytics 4

# В hugo.yaml
googleAnalytics: "G-XXXXXXXXXX"

params:
  analytics:
    google:
      SiteVerificationTag: "XYZ"

Yandex.Metrica

params:
  analytics:
    yandex:
      id: "12345678"

Заключение

Hugo + Claude Code = мощная связка для ведения технического блога. Вы получаете:

  • Быстрый сайт благодаря статической генерации
  • Простоту ведения через Markdown
  • Автоматизацию рутины с помощью Claude
  • Профессиональный дизайн с темой PaperMod

Начните с базовой настройки, добавьте CLAUDE.md для автоматизации, и наслаждайтесь эффективным ведением блога!

Следующие шаги:

  1. Настройте домен и SSL
  2. Добавьте комментарии (Disqus/Giscus)
  3. Создайте RSS-подписку
  4. Оптимизируйте под мобильные устройства

Удачного блогинга! 🚀