Как создать сайт на Hugo и выложить его на сервер

Содержание

Материал будет полезен тем, кто размещает сайты в сети Интернет. Рассказываем, как установить и настроить Hugo, создать проект и разместить его на сервере.

Если вы ищете способ быстро и просто создать статический сайт, Hugo — отличный выбор. Он позволяет генерировать сайты с молниеносной скоростью, не требуя базы данных или сложной настройки. Hugo позволяет сосредоточиться на наполнении сайта, не отвлекаясь на инфраструктуру и сложные настройки. Объяснили, как установить Hugo, создать новый проект и развернуть его на shared-хостинге, выделенном сервере или VPS.

Аренда VPS/VDS от 219 руб/месяц

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

✓ Бесплатное администрирование

✓ Только быстрые NVMe-диски

✓ Защита от DDoS-атак

✓ Быстрая техподдержка

Аренда VPS/VDS виртуального сервера от AdminVPS — это прозрачная и честная услуга с доступной ценой

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

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

Установка на Windows

Проще всего использовать Chocolatey. Откройте консоль от имени администратора и выполните:

choco install hugo-extended

Убедитесь, что установка прошла успешно:

hugo version

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

Распакуйте архив и перенесите файл hugo.exe в любую удобную папку, например, C:\Hugo. Затем откройте свойства системы, перейдите в раздел «Дополнительные параметры системы», нажмите «Переменные среды» и в переменной Path добавьте путь к папке, где находится hugo.exe. После этого откройте новый терминал и проверьте, установлен ли Hugo:

hugo version

Установка на macOS

На macOS Hugo удобно ставить через Homebrew. Откройте терминал и выполните команду:

brew install hugo

Проверьте результат:

hugo version

Если не используете Homebrew, можно поставить Hugo вручную. Для этого скачайте нужную версию архива с официального сайта. Затем распакуйте файл:

tar -xzf hugo_extended_*.tar.gz

Переместите бинарник в системную папку:

sudo mv hugo /usr/local/bin/
sudo chmod +x /usr/local/bin/hugo

Убедитесь, что всё работает:

hugo version

Установка на Linux

Если у вас Linux, воспользуйтесь пакетным менеджером своего дистрибутива.

Для Ubuntu или Debian:

sudo apt update
sudo apt install hugo

Для Fedora:

sudo dnf install hugo

Для Arch Linux:

sudo pacman -S hugo

После установки проверьте версию Hugo:

hugo version

Если вы хотите установить Hugo вручную, загрузите архив с официального сайта и следуйте инструкции для своей операционной системы.

Распакуйте архив:

tar -xzf hugo_extended_*.tar.gz

Переместите исполняемый файл:

sudo mv hugo /usr/local/bin/
sudo chmod +x /usr/local/bin/hugo

Убедитесь, что Hugo доступен из любого каталога:

hugo version

Работа с темами и контентом

Прежде чем наполнять сайт материалами, нужно выбрать внешний вид: подключить тему и настроить базовые параметры проекта. Только после этого имеет смысл создавать страницы и посты.

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

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

Допустим, вы выбрали тему ananke. Чтобы установить её, выполните в корне проекта:

git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

После этого подключите тему в конфигурационном файле. Если используется формат TOML, строка будет выглядеть так:

theme = "ananke"

Советуем добавлять тему в виде подмодуля Git, чтобы потом можно было легко обновить её при необходимости.

Настройка конфигурации сайта

Файл конфигурации — это сердце проекта. Именно тут задаётся название сайта, язык, базовый URL, структура меню и параметры отображения. Обычно используется файл config.toml, но допустимы также YAML или JSON.

Пример базовой конфигурации в формате TOML:

baseURL = "https://example.com/"
languageCode = "ru"
title = "Мой первый сайт на Hugo"
theme = "ananke"

Позже сюда можно добавить параметры SEO, данные автора, скрипты аналитики и многое другое. Важно понимать, что разные темы поддерживают разные опции. Смотрите документацию выбранной темы.

Добавление контента

Контент в Hugo создаётся с помощью Markdown-файлов. Чтобы добавить новый пост или страницу, используется команда:

hugo new posts/pervyj-post.md

Эта команда создаст файл в папке content/posts. Внутри уже будет заготовка с мета-данными, так называемый front matter. Там указываются заголовок, дата, черновик или нет, и другие параметры.

Пример front matter в формате TOML:

+++
title = "Первый пост"
date = 2025-05-18T12:00:00Z
draft = true
+++

Если draft = true, пост не попадёт в итоговую сборку, пока вы не переведёте его в боевой режим. Это удобно, когда вы работаете над материалом и не хотите публиковать его сразу.

Сборка и локальный просмотр

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

Локальная сборка сайта

Сайт в Hugo собирается в папку public. Это делается командой hugo.

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

Для этого используйте команду:

hugo server

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

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

Если вы работаете над постом и ещё не готовы его публиковать, скорее всего он отмечен как draft = true. Такие материалы не появляются на сайте по умолчанию.

Чтобы увидеть их в режиме предпросмотра, запустите сервер с дополнительным флагом:

hugo server -D

Теперь в списке появятся все черновики. Это удобно, если вы готовите серию статей или обновлений и хотите проверить, как они будут выглядеть вместе.

Развёртывание на сервере

Когда сайт готов и выглядит как надо, остаётся последний шаг — разместить его на сервере, чтобы им могли пользоваться другие. Hugo генерирует обычные HTML-файлы, поэтому для публикации нужен любой хостинг, который умеет отдавать статику. Можно использовать любой сервер — локальный, shared-хостинг или VPS. У AdminVPS всё уже настроено для Hugo: доступ по SSH, работа с ключами и быстрая реакция на сборку.

Сначала нужно собрать проект. Для этого в корне Hugo-сайта выполните команду hugo.

После этого в папке public появится финальная версия сайта. Именно её нужно скопировать на сервер. Убедитесь, что в конфигурации сайта указан правильный baseURL, иначе пути к ресурсам могут сломаться.

Если есть доступ по SSH, можно использовать rsync. Этот способ хорошо подходит для быстрого и аккуратного переноса файлов:

rsync -avz --delete ./public/ user@server_ip:/var/www/html

Замените user на имя пользователя, а server_ip — на адрес вашего сервера. Путь /var/www/html — это стандартная директория для сайтов в Nginx, но она может отличаться в вашей конфигурации.

Если работаете с FTP-хостингом, можно воспользоваться любым клиентом, например, FileZilla. Просто загрузите содержимое public в нужную директорию на сервере.

Обычно на сервере уже установлен Nginx или Apache. Если используете Nginx, минимальный конфиг для раздачи статики может выглядеть так:

server {
    listen 80;
    server_name example.com;
    root /var/www/html;
    index index.html;
    location / {
        try_files $uri $uri/ =404;
    }
}

После изменения конфигурации перезапустите сервер:

sudo systemctl reload nginx

Теперь ваш сайт должен открываться по адресу, указанному в server_name.

Заключение

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

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

Читайте в блоге:

Руководство по созданию статического сайта на Hugo и его размещению на сервере