На картинке — я и мой компик в процессе переноса сайта с Notion на Hugo.

Содержание:

[1] Выбор нового движка

Драма с уходом Notion

В начале славных дел статьи в этом блоге выходили на Notion, но:

• В сентябре 2024 Notion объявил о своём уходе из России
• Notion работает только онлайн, поэтому он в любой момент мог рипнуться вместе с файлами пользователей (что он и сделал лол)
• Ссылки на статьи, которые генерировал Notion, выглядели нечитабельно (типа: notion.so/yourblog/819fa63eb79b4a53b5…)

Поэтому вопрос переезда блога созревал уже давно.

Выбор движка

Раньше я уже работал с популярными CMS-системами (Wordpress, Joomla и т.п.), но работать в них мне не нравилось:

• Работа над сайтом происходит через веб-интерфейс провайдера сайта (неудобно)
• Сайт хранится у провайдера, а не у меня локально
• Зависимость от сторонних плагинов; а реально нужные функции плагинов — обычно платные
• Можно выбрать готовую визуальную тему, но в мелочах докручивать все отступы и рамочки приходится окружными путями
• Мало прямого контроля над структурой сайта

Затем был обнаружена такая вещь, как генераторы статических сайтов. Грубо, «статический сайт» означает «простой сайт с текстом и картинками» (чего для личного блога вполне достаточно). Hugo — просто самый популярный из таких генераторов.

У Hugo (как и других у генераторов статических сайтов) есть ярко-выраженные особенности:

1. Весь сайт хранится у пользователя на диске полностью оффлайн (ну или в git)
2. Полный прямой доступ к структуре и стилю сайта, большой простор для кастомизации
3. Основной минус: очень высокий порог входа по сравнению с Notion

С уходом Notion стало ясно, что лучше уж потратить силы на то, чтобы разобраться с Hugo, чем делать сайт на движках, которые могут отъехать в любой момент со всем твоим содержимым 😑

[2] Дизайнерские решения сайта RAVRLab

У Hugo есть много предустановленных тем. Я так и не смог найти ту, которая бы мне подошла, поэтому я просто выбрал пустую тему (hugo-starter-theme) и начал на её базе делать свою, одновременно разбираясь как работает движок.

Тема Hugo назначает сайту не только внешний вид (стиль CSS), но ещё и его структуру (каталоги, подкаталоги, категории страниц и т.п.).

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

Списки и отступы

Я в шоке от того, на каком количестве сайтов значок «•» пункта располагается не пойми где относительно текста. Поэтому у себя здесь выставил всё ровно, насколько смог (моноширинный шрифт тоже с этим помогает):

• Пункт 1
  • Вложенный пункт 1
    1. Kurwa
    2. Bober
  • Вложенный пункт 2
• Пункт 2

Явно обозначенные заголовки

Каждый заголовок сопровождается значком параграфа «§», чтобы было явно видно, какого уровня это заголовок.

Оформление изображений

• Изображения очерчиваются рамками
• Кликабельные изображения отличаются от некликабельных

Цитаты

Цитата

Вложенная цитата отрисовывается на более тёмном фоне, чем «внешняя» цитата

Вложенные сворачивания

Граница сворачиваний (в т.ч. внутри других сворачиваний) явно обозначена визуально.

Сворачивание

Скобка слева явно очерчивает границу сворачивания

Вложенное сворачивание 1

Вложенное сворачивание явно визуально выделено

Вложенное сворачивание 2

Callout-элементы

Стиль т.н. Callout-элемента (другие названия: alert box, notification box) полностью угнан из Notion:

[3] Функционал

Помимо описанных выше стилей, для полноценной работы сайта надо было руками прикрутить следующие фишечки.

База

• Просмотр встроенных PDF файлов
• Видеоплеер Youtube
• Видеоплеер локальных файлов (в силу известных особенностей работы Youtube в РФ, большинство видео на сайте сделаны локальными)
• Верхняя менюшка сайта, работающая для компов и мобилок

Прогерство

Выделение кода x=3 внутри текста.

1
2
3
4

# Многострочный код

bober = 2
kurva = 1

Рендер математических формул (KaTeX): $ \frac{1+\sin x}{1-\cos x} = \frac{2\sin^2\frac{x}{2}}{2\cos^2\frac{x}{2}} = \tan^2\frac{x}{2} $

Навигация

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

[4] Техническая сторона работы в Hugo

Внутренняя механика работы Hugo примерно такая:

• Контент сайта хранится в Markdown файлах
• Изображения/видео хранятся просто как отдельные файлы
• Разметка YAML используется для сборки отдельных Markdown файлов в цельный сайт
• В YAML также хранятся общие настройки сайта
• Стилизация сайта прописывается, ожидаемо, в CSS
• Пользователь настраивает шаблоны, по которым Markdown файлы будут генерироваться в HTML страницы. Сами шаблоны пишутся на HTML и Go. Если требуется, можно подключать JavaScript (например, на этом сайте через JavaScript работает рендер матемамических формул KaTeX)

Вживую написание статьи выглядит так:

• Слева — текст пишется в любой текстовый редактор (с разметкой Markdown)
• Справа — итоговая страница отображается прямо в браузере

Поскольку все шаблоны я настраивал с нуля, то вышла довольно объёмная система, описание которой было сделано в виде MindMap:

[5] Общие впечатления от работы в Hugo

С одной стороны, мой вход в Hugo был очень долгим, т.к.:

• До этого я не очень много работал с web-технологиями (CSS, HTML, JS и т.п.)
• Я создавал свою тему Hugo (стиль и структуру) с нуля

С другой стороны, полученный полный контроль над сайтом для меня сейчас полностью оправдывает сложности с долгим входом:

• У меня полный контроль над стилем и структурой сайта
• Работать в Markdown-файлах сильно более комфортно, чем в веб-интерфейсе CMS, хотя и не так user-friendly как это было в Notion
• Сайт хранится полностью локально, я могу загружать его в интернет куда и когда захочу

Notion RIP.