Генератор сайтов: как создать и опубликовать сайт на VPS — инструкция для новичка

Что такое генератор сайтов и чем он отличается от конструктора

Запрос «генератор сайтов» понимают двояко. Первое значение — онлайн-конструктор: вы собираете страницы мышью в браузере, а сайт хранится на площадке сервиса. Второе — генератор статических сайтов: программа на вашем компьютере, которая собирает сайт из обычных файлов. В статье разбираем второй вариант. Конструкторы описаны в материалах блога: посмотрите обзор Nethouse и сравните площадки для создания сайта.

Принцип простой. Текст в формате Markdown (облегчённая текстовая разметка) и шаблоны оформления превращаются в готовые HTML-страницы (HyperText Markup Language, язык разметки веб-страниц). Вы запускаете одну команду, например hugo, и через несколько секунд получаете папку public с готовым сайтом. Известные генераторы: Hugo, Jekyll и Eleventy. Сами программы бесплатны, платить нужно только за домен и сервер.

От WordPress генератор отличается тем, что серверу не нужны ни PHP (язык серверных скриптов), ни база данных. Для небольшого сайта обычно хватает VPS (виртуального сервера) с 1 vCPU и 1 ГБ оперативной памяти.

Главные отличия от привычных вариантов:

• WordPress: страницы собираются при каждом запросе, а генератор готовит их заранее.
• Конструктор: сайт живёт у сервиса, а здесь он лежит в вашем каталоге, например mysite.
• Перенос: файлы копируются на другой хостинг без потерь и переделки.
• Бесплатный старт: варианты без затрат собраны в материале как создать сайт бесплатно.
• Домен и сервер: чем они различаются, объясняет статья про домен и хостинг.

Как работает генератор статических сайтов

Генератор статических сайтов работает как печатный станок: вы пишете тексты в Markdown, а программа собирает из них готовые страницы. Markdown — простой текстовый формат, где заголовок обозначается символом #. Каждая страница лежит в отдельном файле, например content/posts/first.md, а внешний вид задают шаблоны темы: шапка, меню, подвал.

Настройки хранятся в файле hugo.toml: адрес сайта в параметре baseURL и тема в параметре theme. Команда hugo соединяет контент, шаблоны и конфиг, а результат кладёт в папку public. Сборка небольшого сайта обычно занимает секунды. Команда hugo server запускает предпросмотр на порту 1313 и обновляет страницу в браузере сразу после сохранения файла.

Цепочка выглядит так:

• Markdown-файлы с текстом и картинками;
• шаблоны темы из каталога themes;
• конфиг hugo.toml;
• папка public с HTML, CSS и изображениями на выходе.

HTML — язык разметки, из которого состоят страницы, а CSS — таблицы стилей: цвета, шрифты, отступы. Серверу не нужны ни PHP, ни база данных, ни CMS (система управления сайтом с админ-панелью). Он просто отдаёт готовые файлы, поэтому страницы открываются быстро, а взламывать нечего: нет админки и запросов к базе. Для такого сайта обычно хватает VPS с 1 vCPU и 1 ГБ RAM, о выборе площадки читайте в материале как устроен хостинг.

Hugo поставляется одним исполняемым файлом, а вот Eleventy работает на Node.js, поэтому сначала установите Node.js на VPS или компьютер. Статичные страницы также удобно настроить для поисковой оптимизации.

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

Hugo — генератор статических сайтов: он превращает файлы Markdown и шаблоны в готовые HTML-страницы. Сборка небольшого сайта занимает секунды, а серверу не нужны ни PHP, ни база данных. Первый запуск по инструкции обычно занимает 30–60 минут.

Для публикации понадобятся VPS (виртуальный сервер) с Ubuntu или Debian, git и домен. Для статического сайта обычно хватает 1 vCPU и 1 ГБ RAM. Если сервера ещё нет, арендуйте виртуальный сервер, а подробности по тарифам и настройке смотрите в ответах на вопросы о VPS.

В примере используем каталог проекта mysite, домен example.ru и папку на сервере /var/www/mysite. Выполните шаги по порядку:

1. Скачайте Hugo версии extended с сайта gohugo.io, распакуйте и проверьте установку командой hugo version.
2. Создайте проект: hugo new site mysite, затем перейдите в каталог cd mysite.
3. Выполните git init и подключите тему как git-подмодуль в каталог themes. В файле hugo.toml впишите theme с именем темы и baseURL = "https://example.ru/".
4. Создайте страницу: hugo new content posts/first.md. Откройте файл и смените draft = true на draft = false, иначе страница не попадёт в сборку.
5. Запустите предпросмотр командой hugo server и откройте http://localhost:1313.
6. Выполните hugo. Готовый сайт появится в папке public.
7. Подключитесь к VPS по SSH (порт 22) через SSH-клиент или PuTTY. Установите веб-сервер: sudo apt install nginx, создайте каталог /var/www/mysite и укажите в конфигурации nginx директиву root /var/www/mysite;.
8. Загрузите файлы с локального компьютера: rsync -avz public/ user@IP:/var/www/mysite/, где IP — адрес сервера. Откройте этот адрес в браузере и убедитесь, что сайт отображается. Если удобнее графический клиент, загрузите папку через FileZilla по SFTP.

Когда сайт открывается по IP, привяжите домен: в панели регистратора создайте A-запись для example.ru с адресом сервера. Как это сделать, описано в материале про DNS-записи домена; обновление записей может занять от нескольких минут до суток. Затем получите бесплатный сертификат Let’s Encrypt для HTTPS (защищённого соединения) и убедитесь, что на сервере открыты порты 80 и 443. Продление сертификата обычно настраивается автоматически.

Сколько стоит сайт на генераторе и что нужно для запуска

Сама программа бесплатна: Hugo, Jekyll, Eleventy и MkDocs не требуют лицензии. Платить нужно только за домен и сервер. Цена домена зависит от зоны и регистратора, а оплата идёт раз в год. Перед покупкой проверьте домен на занятость.

Сервер — главная постоянная статья расходов. Ориентир для VPS (virtual private server, виртуальный частный сервер) — 200–600 ₽/мес в зависимости от тарифа. Для статики обычно хватает 1 vCPU (виртуальное ядро процессора) и 1 ГБ RAM (оперативной памяти). Присмотритесь к недорогим VPS или прочитайте ответы на частые вопросы о VPS.

Статику можно держать и на обычном хостинге: PHP и база данных не нужны, достаточно отдавать готовые HTML-файлы из папки public. На VPS вы настраиваете всё сами, зато получаете больше свободы. Подробнее о формате — в материале про VDS-сервер.

Для запуска понадобится следующее:

• домен, например example.ru;
• сервер с Linux или обычный хостинг;
• SSH-клиент (Secure Shell, защищённое подключение) для работы через порт 22 — он встроен в терминал macOS и Linux;
• SSL-сертификат: Let’s Encrypt бесплатный, продление обычно автоматическое, а о нём подробнее в статье про сертификат безопасности для сайта;
• открытые порты 80 (HTTP) и 443 (HTTPS), про которые рассказано в материале про порт HTTPS.

Частые ошибки при работе с генератором сайтов и как их исправить

Новички на Hugo чаще всего спотыкаются о пять проблем: страница не попала в сборку, сайт открылся без оформления, ссылки ведут на localhost, nginx отдаёт 403 или 404, сборка падает с ошибкой про extended-версию. Каждая решается за несколько минут.

Сначала запустите hugo server и откройте сайт на порту 1313: большинство проблем видно уже там. После правок выполните hugo и заново загрузите папку public.

Страница не появилась в сборке

Причина: в шапке файла стоит draft = true, а такие страницы Hugo по умолчанию пропускает. Поставьте draft = false или удалите строку, затем пересоберите сайт.

Сайт открылся без оформления

Причина: тема не подтянулась, каталог themes пуст. Выполните git submodule update --init и проверьте, что параметр theme в hugo.toml совпадает с именем каталога темы.

Ссылки и стили ведут на localhost

Причина: неверный baseURL. Впишите в hugo.toml строку baseURL = "https://example.ru/" и снова запустите hugo.

nginx отдаёт 403 или 404

Причина: директива root указывает не на /var/www/mysite либо у веб-сервера нет прав на чтение каталога. Проверьте конфиг командой sudo nginx -t, примените его через sudo systemctl reload nginx и убедитесь, что порты 80 и 443 открыты. Если вместо 403 вы видите таймаут, разберите как исправить ошибку 522 Connection Timed Out.

Ошибка про extended-версию Hugo

Причина: стили на Sass/SCSS собирает только Hugo extended. Установите extended-сборку и проверьте результат командой hugo version.

Почти все сбои связаны с конфигом или путями, а не с самим генератором. Перед крупными правками сделайте резервную копию сайта, а если команды на сервере ещё непривычны, начните с выбора и освоения Linux для сервера.

Hugo, Jekyll, Eleventy или MkDocs: какой генератор выбрать

Сравнивайте генераторы по четырём критериям: скорость сборки, язык, экосистема тем и документация. Hugo написан на Go и ставится одним исполняемым файлом, а небольшой сайт он обычно собирает за секунды. Остальным нужна среда: Ruby у Jekyll, Node.js у Eleventy, Python у MkDocs.

Язык важнее, чем кажется: шаблоны и настройки вы будете править сами. Если вы уже писали на Ruby или JavaScript, отладка пойдёт быстрее. Тем для блога и сайта-визитки больше у Hugo и Jekyll, а темы MkDocs рассчитаны на документацию.

У всех четырёх проектов есть официальная документация с разделом для быстрого старта. Начните с неё и запустите предпросмотр командой из таблицы.

Рекомендации по выбору:

• Блог или сайт-визитка: берите Hugo.
• Документация проекта: берите MkDocs.
• Вы знаете JavaScript: берите Eleventy.
• Вы работали с Ruby: берите Jekyll.

Готовую папку сборки выкладывают на VPS (виртуальный сервер). Если сервера ещё нет, сначала установите Debian на сервер, а при желании поставьте Docker на VPS. Для отдельного раздела сайта создайте поддомен, а защиту и кеш настройте по инструкции настройки Cloudflare.

Когда генератор сайтов не подходит

У генератора статических сайтов нет встроенной админки: тексты правят в файлах Markdown, а затем пересобирают сайт командой hugo. Формы заявок, комментарии и личные кабинеты без внешних сервисов не работают, потому что на сервере лежат только готовые HTML-страницы.

Если контент ведёт редактор без технических навыков, ему придётся осваивать Git и командную строку. Для интернет-магазина с корзиной и оплатой или сайта с регистрацией лучше взять CMS (систему управления содержимым) или конструктор.

Выбирайте в таком порядке: определите, кто правит сайт, затем решите, нужны ли данные посетителей, и только после этого подбирайте инструмент:

• сайт правит человек без технических навыков — CMS или конструктор;
• каталог с оплатой и заказами — CMS для магазинов;
• одна форма обратной связи — генератор плюс внешний сервис форм;
• документация, портфолио, блог — генератор подходит.

Статике хватает 1 vCPU и 1 ГБ RAM за 200–600 ₽/мес, а CMS обычно требует больше ресурсов. Прочитайте ответы на вопросы о VPS, сравните варианты в материале про VDS-хостинг и рейтинге VPS-хостингов. Для сайта с регистрацией заранее выполните проверку сайта на безопасность.