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

Мне понравилось, что это означало, что сайт будет загружаться молниеносно без необходимости использования сервера приложений или базы данных. Мне также понравилось, что я мог опубликовать результаты практически в любом месте. И в довершение всего, я мог настроить сайт, используя свои передовые навыки работы с HTML/CSS 1999 года, вместо того, чтобы изучать все тонкости другой CMS.

Я нашел несколько полезных руководств, но ни в одном из них не был описан весь процесс от начала до конца.

Если у вас еще нет учетной записи GitHub, вам нужно создать ее. Если вы хотите использовать собственный домен, вам также понадобится поставщик DNS (например, Namecheap) для регистрации домена.

Наконец, обратите внимание, что некоторые из следующих инструкций относятся к Windows. Если вам нужно установить Hugo на другую ОС, то это хорошее место для начала.

Шаг 1: Загрузите Хьюго

Скачать Hugo можно здесь. Я рекомендую использовать расширенную версию, потому что она поддерживает SASS/SCSS, что требуется для некоторых тем. Вам не нужно ничего устанавливать. Вы можете просто извлечь архив и добавить каталог в свой путь.

После того, как вы обновили свой путь, откройте PowerShell и введите hugo version и git version. Если вы видите ‘hugo’ is not recognized as an internal or external command или ‘git’ is not recognized as an internal or external command, закройте PowerShell и убедитесь, что на вашем пути есть каталоги Hugo и git.

Шаг 2: Создайте репозиторий для своего сайта

Если вы еще этого не сделали, создайте новый репозиторий для своего сайта на GitHub и клонируйте его.

Шаг 3: Создайте свой сайт и примените тему

У Hugo есть множество тем, которые вы можете просмотреть здесь. Мы будем использовать hugo-fresh для этого урока.

Вернитесь в PowerShell и перейдите в каталог, в который вы клонировали свой репозиторий. Введите следующее (заменив my-site на название вашего сайта):
hugo new site my-site

Это создаст сайт Hugo в папке с именем my-site. Теперь, когда у нас есть сайт, нам нужно установить тему. Для этого скачайте https://github.com/StefMa/hugo-fresh/archive/master.zip и распакуйте его в каталог тем вашего нового сайта. После распаковки темы переименуйте папку Hugo-Fresh-Master в Hugo-Fresh.

Теперь вернитесь в PowerShell и введите следующее:
cd my-site
del config.toml
xcopy “themes\hugo-fresh\exampleSite\config.yaml” /e

Это удалит файл конфигурации по умолчанию и заменит его файлом конфигурации с примера сайта Hugo-fresh.

Шаг 4. Протестируйте свой сайт локально

Вернитесь в PowerShell и введите следующее:
hugo server
Это запустит сервер Hugo, который работает на http://localhost:1313. Теперь вы можете протестировать свой сайт, перейдя по адресу http://localhost:1313 в браузере. Это должно выглядеть примерно так:

Шаг 5: Опубликуйте свой сайт

По умолчанию hugo server будет обслуживать страницы из памяти, а не записывать их на диск. Нажмите Ctrl+C, чтобы остановить сервер, а затем введите hugo -d ../docs, чтобы опубликовать свой сайт в новом каталоге «docs» в корне репозитория. Зафиксируйте и отправьте изменения на GitHub после создания файлов.

Шаг 6. Используйте GitHub Pages для размещения своего сайта

Откройте раздел настроек вашего репозитория на github.com и прокрутите вниз до раздела GitHub Pages. Выберите главная ветка / папка документов в качестве исходной папки. Раздел GitHub Pages также включает ввод для вашего личного домена, но пока воздержитесь от этого. Вы должны увидеть ссылку ваш сайт опубликован по адресу «https://‹my-username›.github.io/‹my-site›». Нажмите на ссылку, чтобы просмотреть свой сайт в GitHub Pages.

Если вы откроете инструменты разработчика в своем браузере и просмотрите консоль, вы увидите несколько ответов 404 для изображений, а также пару ошибок смешанного содержимого для запроса http-ресурсов с использованием https-соединения. Давайте сейчас исправим эти ошибки.

Откройте каталог my-site с помощью вашего любимого редактора кода и выполните глобальный поиск/замену для “/images на “./images. Незакрытая цитата сделана намеренно. Это исключит изображения, у которых уже есть относительные пути.

Затем откройте config.yaml под моим сайтом и обновите baseURL и заголовок для вашего сайта. Чтобы увидеть полный список параметров настройки, вы можете выполнить поиск в Документации Hugo, а также в разделе Настройка вашей страницы в Hugo-Fresh README.

Теперь вы готовы обновить свой сайт GitHub Pages. Опубликуйте свои обновления в каталоге документов с помощью hugo -d ../docs и зафиксируйте/синхронизируйте свои изменения с GitHub. Когда вы перезагрузите свой сайт GitHub Pages, он должен выглядеть идентично локальному сайту, который мы просматривали ранее по адресу http://localhost:1313.

Шаг 7. Настройте свой личный домен, чтобы он указывал на страницы GitHub.

Обратите внимание, что обновление записей A для вашего домена может занять более суток, и после завершения ваш домен будет указывать на ваш сайт GitHub Pages. Если вы не готовы к этому, пропустите этот шаг. Кроме того, вы можете настроить запись CNAME для поддомена сейчас, а затем переключиться на домен верхнего уровня после того, как закончите обновление своего сайта.

Войдите в систему своего провайдера DNS и создайте A записей, которые указывают на ваш личный домен со следующими IP-адресами:
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Теперь вернитесь на GitHub Pages в разделе настроек вашего репозитория и добавьте свой собственный домен.

Если вы не можете получить доступ к своему сайту из своего личного домена, возможно, изменения DNS еще не завершились. Вы можете убедиться в этом, пропинговав свой субдомен. Он должен разрешаться в один из адресов 185.199.*.153, указанных выше.

Готово!

После распространения изменений DNS вы сможете просматривать свой сайт, используя свой личный домен.

Спасибо за чтение! Если вы нашли это полезным или у вас есть какие-либо вопросы, пожалуйста, свяжитесь со мной в комментариях.