EliseeAlex.me

Шаг 2.2

Прототип на Hugo

Как создать собственный блог с помощью Hugo? Как настроить среду для разработки тем?

Я продолжаю создание платформы для презентации проектов по методологии Lean. Из шага 2, вы знаете, что я уже понял, что мне не нужна CMS, тем не менее, на шаге 2.1 я рассказываю про то, как я поднимал Ghost, то есть, про самую первую версию сайта.

Я очень хотел простоты, и я нашёл Hugo. Это даже не платформа, а просто генератор статических сайтов. И, дойдя до него, я познал дзен. Я хотел слишком многого от блога, на самом деле, мне нужна просто утилитка, которая сгенерит мне статический сайтик. А всё, что я хочу, вроде аналитики, платформы для написания статей и прочих плюшек — может быть реализовано в виде внешних сервисов.

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

Настройка среды для создания сайтов

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

Создание темы для Hugo

Когда я получил версию, которая мне понравилась, я решил перенести её в новую тему Hugo.

Я не буду писать о том, как просто создать новый сайт на Hugo, об этом замечательно написано в Quick Guide в официальной документации. Я даже не буду писать подробно о командах, которые нужно применить, чтобы сгенерировать базовый шаблон для темы, это тоже отлично описано в официальной документации. Я расскажу о своём опыте и своих впечатлениях. Я скачал парочку тем: hugo-cactus-theme и hugo-uno, чтобы было, откуда черпать вдохновение.

Предположим, что теперь всё готово, мы установили Hugo, скачали парочку тем, создали шаблон и хотим создать нашу новую тему. Всё очень просто, для этого нужно изменить шаблон главной страницы, то есть файл layouts/index.html, (мой) и шаблон для статьи, файл layouts/_default/single.html, (мой). Если вы посмотрите мои файлы, то увидите, как я использовал грязный хак и вручную прописал все ссылки до статей. Я считаю, что на первом этапе — в этом нет ничего плохого. Тем не менее, я решил сделать страницы слегка динамичнее и применить некоторые стандартные переменные Hugo, если что, он берёт их из config.toml основного сайта мой конфиг.

Настройка среды для создания сайтов с помощью Hugo

К этому моменту я понял, что в Hugo мне тоже нужен автоматический постпроцессинг SASS и перезагрузка страницы после изменений. У него есть своя автоматическая перезагрузка страницы по изменению файлов, поэтому мне пришлось немножко поразбираться со скриптом Gulp для статического сайта и адаптировать его для Hugo.

Оказывается, что всё, что делает Gulp — это следит за изменением файлов в указанных файлах, запускает постпроцессинг Sass и минификацию Css и Jss и сохраняет эти файлы в указанные в скрипте папки. Также после любых изменений он даёт команду перезагрузки браузеру, и страница обновляется. Всё очень просто. Вторая часть скрипта уже реализована в виде Live Reload в Hugo, так что я её просто выкинул. Остались только препроцессинг Sass и минификация (мой скрипт).

Деплой приложения

До этого я деплоил приложения через Apache Server в предустановленных образах систем. Но, тем не менее, из-за того, что мне приходилось каждый раз в конфигах прописывать вручную SSL-сертификаты, я разобрался, как настраивается Http-сервер.

Я поднял ещё одну виртуалку на DigitalOcean, установил hugo и git, залил локальную версию Hugo-сайта в гит, склонировал репозиторий на виртуалку, включил сервер hugo, и всё заработало ^^ Кайф. И всё благодаря одному гайду.

Оставалось только добавить SSL. Но оказалось, что встроенный сервер Hugo его не поддерживает и вообще должен использоваться только для разработки. На случай продакшена Hugo просто генерит все файлы статически, и их можно раздавать с помощью любого веб-сервера. На этот раз я решил использовать NginX, коллеги мне сказали, что он значительно быстрее Apache. Я посмотрел Benchmark’и и согласился. Всё оказалось очень просто.

Для установки NginX я использовал эти гайды:

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

Дальше, я расскажу вам про дизайн главной страницы.