/ Как добавлять и редактировать статьи в Hugo: подробное руководство

Created Sat, 04 Oct 2025 10:00:00 +0000
760 Words
Hugo Блог Веб-разработка Статический сайт Markdown Руководство

Введение в Hugo

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

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

Перед тем как начать работу со статьями, важно понимать базовую структуру проекта Hugo:

blog/
├── archetypes/          # Шаблоны для новых статей
├── content/            # Папка с контентом
│   └── posts/          # Статьи блога
├── data/               # Данные в формате YAML/JSON
├── layouts/            # HTML шаблоны
├── static/             # Статические файлы (CSS, JS, изображения)
├── themes/             # Темы оформления
└── hugo.toml          # Конфигурационный файл

Создание новой статьи

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

Самый простой способ создать новую статью — использовать команду Hugo:

hugo new posts/название-статьи.md

Эта команда создаст новый файл в папке content/posts/ с базовыми метаданными.

Ручное создание

Вы также можете создать файл вручную в папке content/posts/. Каждая статья должна начинаться с front matter — блока метаданных в формате YAML:

---
title: "Заголовок статьи"
date: 2025-01-09T10:00:00Z
draft: false
author: "Ваше имя"
description: "Краткое описание статьи"
tags: ["тег1", "тег2", "тег3"]
categories: ["категория1", "категория2"]
---

Основные элементы front matter

Обязательные поля

  • title: Заголовок статьи
  • date: Дата публикации в формате ISO 8601
  • draft: true для черновиков, false для опубликованных статей

Дополнительные поля

  • author: Автор статьи
  • description: Описание для SEO и превью
  • tags: Теги статьи (массив строк)
  • categories: Категории статьи
  • image: Превью изображение
  • slug: Кастомный URL статьи

Написание контента

Markdown синтаксис

Hugo использует расширенный Markdown для форматирования текста:

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

**Жирный текст** и *курсив*

- Маркированный список
- Второй элемент
  - Вложенный элемент

1. Нумерованный список
2. Второй элемент

[Ссылка на сайт](https://example.com)

![Альт-текст изображения](path/to/image.jpg)

Блоки кода

Для вставки кода используйте тройные обратные кавычки:

```python
def hello_world():
    print("Hello, Hugo!")
```

Цитаты

> Это блок цитаты
> Может занимать несколько строк

Таблицы

| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|-------------|-------------|-------------|
| Ячейка 1    | Ячейка 2    | Ячейка 3    |
| Строка 2    | Данные      | Значение    |

Работа с изображениями

Размещение изображений

Изображения можно разместить в папке static/images/ или использовать Page Bundles:

content/
└── posts/
    └── my-article/
        ├── index.md
        ├── image1.jpg
        └── image2.png

Вставка изображений

![Описание изображения](images/my-image.jpg)
# или для Page Bundle:
![Описание изображения](image1.jpg)

Математические формулы

Если в конфигурации включена поддержка MathJax или KaTeX, можно использовать LaTeX:

Инлайн формула: $E = mc^2$

Блочная формула:
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

Управление черновиками

Работа с черновиками

Установите draft: true в front matter для создания черновика:

---
title: "Черновик статьи"
draft: true
---

Просмотр черновиков

Для просмотра черновиков при разработке используйте флаг -D:

hugo server -D

Организация контента

Использование категорий и тегов

---
categories: ["Веб-разработка", "Туториалы"]
tags: ["Hugo", "Markdown", "Блог", "Статический сайт"]
---

Структурирование по папкам

content/
├── posts/
│   ├── 2024/
│   │   └── my-article.md
│   └── 2025/
│       └── new-article.md
└── tutorials/
    └── hugo-tutorial.md

Шорткоды Hugo

Hugo предоставляет шорткоды для расширения функциональности:

Примечание: Некоторые шорткоды (например, x для Twitter и gist) могут быть недоступны или устаревшими в зависимости от версии Hugo и настроек темы.

Создание пользовательских шорткодов

Можно создать собственные шорткоды в папке layouts/shortcodes/:

<!-- layouts/shortcodes/note.html -->
<div class="note">
    <strong>Примечание:</strong> {{ .Inner }}
</div>

Использование:

Это важное примечание!

Автоматизация рабочего процесса

Скрипты для создания статей

Создайте скрипт для автоматизации создания статей:

#!/bin/bash
# new-post.sh

if [ -z "$1" ]; then
    echo "Использование: ./new-post.sh название-статьи"
    exit 1
fi

hugo new "posts/$1.md"
echo "Создана новая статья: posts/$1.md"

Git hooks

Настройте автоматическое развертывание через Git hooks:

#!/bin/bash
# deploy.sh

echo "Сборка сайта..."
hugo

echo "Развертывание..."
# Ваши команды для развертывания

Локальная разработка

Запуск сервера разработки

# Запуск с автообновлением
hugo server

# С черновиками и будущими статьями
hugo server -D -F

# На определенном порту
hugo server -p 8080

Просмотр изменений

Hugo автоматически перезагружает страницы при изменении файлов. Это значительно упрощает процесс редактирования.

Сборка и развертывание

Создание статического сайта

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

# Очистка и сборка
hugo --gc --minify

Проверка перед публикацией

# Проверка ссылок
hugo server --navigateToChanged

# Генерация отчета
hugo --templateMetrics

Полезные советы

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

  1. Используйте описательные заголовки
  2. Добавляйте метаданные description
  3. Используйте семантические теги
  4. Оптимизируйте изображения

Производительность

  1. Минифицируйте CSS/JS при сборке
  2. Используйте WebP для изображений
  3. Настройте кеширование
  4. Проверяйте размер сгенерированных файлов

Резервное копирование

Регулярно делайте резервные копии:

  • Используйте Git для версионности
  • Сохраняйте базу данных (если используется)
  • Резервируйте статические файлы

Заключение

Hugo предоставляет мощные инструменты для создания и управления статическими сайтами. Основные преимущества:

  • Скорость: Очень быстрая генерация сайтов
  • Безопасность: Отсутствие базы данных
  • Простота: Markdown для контента
  • Гибкость: Настраиваемые темы и шаблоны

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