Что есть Jekyll или собственный сайт

После того, как cloud.ru объявил о своем free tier с бесплатной виртуалкой, то хостить веб-сайт на домашнем роутере перестало иметь смысл. В любом случае 2 Ядра/ 4 Гига + возможность подключить такой же халявный S3 сильно лучше крошек памяти на домашнем роутере. Надежность облачного решения будет повыше, а за белый ip так и так платить. Встал вопрос, какой движок для сайта выбрать. Требования были следующие:

• Решение должны быть бесплатным
• Относительно распространенным, со своим комьюнити
• Не тяжелым, т.к ресурсы виртуалки ограничены

Проконсультировавшись с ChatGPT, я быстро отмел Wordpress, как старое и тяжелое решение. Немного посмотрел в сторону Ghost, не понял где там бесплатность. Больше похоже на веб-платформу по подписке, где в UI собираешь страницы. Третьим в шорт-листе был Jekyll. Что понравилось:

• Markdown по умолчанию. Весь контент готовится в формате md-разметки, а jekyll сам преобразует в html.
• Как следствие, полностью статический сайт, никакого php, mysql и прочих node.js
• Поддерживается гитхабом, точнее Github Pages. Можно сделать зеркало основного сайта в 2 клика.
• Нет UI, конфиги в формате yaml, для написания статьей сойдет и vim (ну или VS Code)

Минусы вытекают из плюсов:

• Кому-то может не хватить возможностей Markdown для оформления страниц
• На статике интернет-магазин не сверстаешь
• Нет UI, настройки в формате yaml, кому-то будет сложно работать только в консоли

В общем, для небольшого, изредка пополняемого сборника статей, отличное решение, не требовательное к ресурсам и довольно простое. Сам движок Jekyll написан на Ruby, для тех, кто знаком с этим языком программирования, это будет дополнительным плюсом. Я знаком не был, но сложностей с установкой не возникло. Установку делал на wsl2, чтобы не замусоривать основную ОС.

Далее, коротко опишу моменты, с которыми не сразу разобрался, возможно, кому-то будет в полезно.

Темы

Из коробки, даже для неприхотливых, шаблон Jekyll представляет довольно печальное зрелище, поэтому вопрос выбора темы стоит остро. В интеренете их много - платных, бесплатных. Мне понравилась minimal-mistakes. Автор уже 10 лет занимается разработкой своего проекта и накопил солидный запас фишек, способный вывести простой сайт на уровень серьезной разработки. Архивы постов, различные группировки по категориям и тегам, seo, несколько поддерживаемых платформ аналитики (есть Яндекс), комментарии, поиск. В общем рекомендую. Стуктура каталогов для новичка не сразу очевидна, поэтому советую полностью клонировать репо по ссылке выше, а затем постепенно настраивать его под себя, удаляя то, что не планируете использовать.

Структура

Здесь в интернете довольно много информации, лучше обратиться к первоисточнику - официальной документации проекта или шаблона. Коротко упомяну основные:
  _config.yml - основной конфигурационный файл, начинать с него.
  _posts/ - папка с постами, в имени файла сначала идет дата (YYYY-MM-DD), затем краткий заголовок. Внутри поста через тэг title название переопределяется.
  _data/ - в принципе что угодно, у меня файл со структурой навигационного меню.
  _pages/ - прочие страницы, которые не посты, в т.ч. index.html
  _layout/ - шаблоны верстки страниц, которые задаются на самих страницах тегом, внезапно, layout.
  assets/ - лежит основной шаблон css и прочие “активы”, например картинки.

CSS стили

Находятся в _sass\minimal-mistakes. Логические блоки разбиты по различным файлам. Можно в дополнение к скину настроить шрифты, цвета, внешний вид меню и т.п. С фронтендом я не знаком, поэтому действовал в основном методом тыка реверс-инжиниринга в консоли веб-разработчика Chrome, находя нужный элемент и просматривая, откуда он настраивается.

Я немного изменил шрифты в _base.css:

body {
  margin: 0;
  padding: 0;
  color: $text-color;
  font-family: $global-font-family;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.55;
}

И поиграл с внешним видом меню в _navigation.scss

Разработка и деплой

Процесс разработки довольно прост. В принципе, необязательно знать, что такое Gemfile, bunndler и прочие особенности Ruby. Достаточно открыть соседнее окно, перейти в каталог с проектом и выполнить команду:

bundle exec jekyll server -w

После этого по адресу http://localhost:4000/ будет поднят локальный веб-сервер с вашим сайтом. Любые изменения в файлах проекта отслеживаются и в realtime применяются (кроме правок _config.yml, для него необходимо перезапускать jekyll server).

Процесс деплоя еще проще, т.к. это статика. Результат “сборки” сохраняется в каталоге _site проекта. Надо только перенести каталог на боевой сервер. Это можно сделать руками, scp, rsync или любой другой доступной вам автоматизацией DevOps Pipeline.

Полезные ссылки

Продублирую ссылки из текста статьи.

• Официальная документация Jekyll - https://jekyllrb.com/
• Гитхаб проекта с темой minimal-mistakes https://github.com/mmistakes/minimal-mistakes
• Спасибо Сберу за https://cloud.ru