Как сделать блог в 2021‑м году (3)

Как сделать личный блог — не самый актуальный вопрос для 2021-го года. Возможно поэтому и ответ на него покажется далеко не тривиальным для тех, кто живет в парадигме “There’s an app for that”.

В этой заметке я попытаюсь рассказать, как сделан этот архив (который по определению блог) и почему он сделан именно так. Будет немного технических оговорок и ссылок на показавшиеся мне полезными ресурсы и инструменты. А вот инструкций не будет, их можно легко найти самому в документациях инструментов.

Требования

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

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

• адекватным современным технологиям
• я могу запустить и поддерживать его сам, без чужой помощи
• его легко наполнять контентом
• я могу контролировать плюс-минус весь функционал
• и с аккуратным дизайном

В идеале я хотел бы работать со всеми текстами блога на Markdown (синтаксис, созданный для работы с текстами под веб), потому что на нем я их и пишу. Весь мой набор инструментов построен вокруг того, чтобы хранить все результаты работы у себя в каком-то универсальном формате, не привязанном к производителю того или иного софта или облачному сервису. В таком процессе у Markdown фактически нет альтернатив в отношении текстов (особенно для веба). Если до этого вы работали с текстами только в Word или Google Docs, то вот тут можно узнать, что такое Markdown и в чем его преимущества.

Мои собственные релевантные знания ограничивались основами HTML и CSS, и пониманием того, как устроены веб-приложения. Уверенное знание Python мне для этой задачи явно не могло помочь.

Технологии

Первое, с чего бы я начал 10 лет назад — это исследование блоговых платформ (бесплатных или по подписке): Wordpress.com, Blogger, Medium, write.as, может даже Яндекс.Дзен. Однако сейчас, после не самого удачного опыта с Wordpress.com и Medium у меня не было никаких надежд на то, что эти сервисы мне подойдут. Во-первых, большинство из них либо платные, либо условно бесплатные: то есть используют рекламные или freemium модели монетизации. Я похоронил уже не один личный блог, поэтому хотелось найти решение ни к чему не обязывающее в долгосрочной перспективе (кроме собственно оплаты домена) и без рекламы. Во-вторых, самые современные из них почти невозможно тонко контролировать и речь не только о дизайне: например, в Medium было нельзя отключить форматирование текста по правилам английской типографики (привет, тире, не отбитое пробелами) или настроить «красивые» URL для статей. Ну а в-третьих, поддержка Markdown есть далеко не всех сервисах.

Примерно в этот же момент я отмёл и CMS (content management system) родом из 2000-х: Wordpress.org, Drupal и остальную поляну решений на PHP. Вообще CMS, их еще называют «движками» сайтов — технически это такие же веб-приложения, как блоговые платформы, однако вы настраиваете и хостите их самостоятельно. За это вы получаете максимальную гибкость: возможность настройки собственных шаблонов страниц, полный контроль над поведением сайта, его админкой, базой данных, правда для этого уже придется стать разработчиком. Собственно через админку и происходит создание и редактирование контента конечным пользователем (тот самый content management). Как пишут в интернете, с помощью CMS сделано большинство сайтов в этом мире.

Так вот, все популярные CMS мне казались слишком тяжеловесными для моих целей. Контент хранится в базе данных, приложение из десятков тысяч строк кода при каждом запросе динамически генерирует код страницы по шаблону. Использовать CMS для простого блога — тоже самое, что ехать на такси за кофе в соседний подъезд. Было еще два более осязаемых недостатка: при работе над контентом я был бы вынужден коротать часы в страшненькой админке, а еще я совершенно не представлял, сколько времени займет у меня приведение блога к нужному мне внешнему виду.

Единственная CMS, которая показалась мне все еще интересной сегодня — это Эгея Ильи Бирмана. Она выглядела довольно нейтральной и понятной. Я долго смотрел в ее сторону, но в конце концов понял, что не хочу тратить полдня на то, чтобы развернуть Эгею на каком-нибудь хостинге.

Как сделать сайт, не используя CMS и блоговые платформы? На ум приходят только генераторы статических сайтов (static site generators, SSG), типа Jekyll, Hugo или Gatsby. Для тех, кто не никогда не работал с этими решениями я поясню: SSG — это просто программы (правда на Терминал, то есть без графического интерфейса), которые собирают готовые HTML-странички из контента, после чего их остается просто перенести со своего компьютера на хостинг. Никаких динамических веб-приложений, никакой магии PHP, только HTML, CSS и, возможно, JavaScript. Контент в этом случае создается не через «админку», а обычным редактированием текстовых файлов (как правило Markdown) у себя на компьютере и раскладыванием их вместе с изображениями по выделенным программой папкам. Таким образом, для того, чтобы собрать полноценный блог, мне нужны лишь продвинутый текстовый редактор (где я могу работать и со структурой папок и файлов) и окно Терминала (командной строки). Я конечно же тяготел именно к этому варианту, потому что он отвечал всем моим требованиям. На нем я и остановился.

Дизайн

Это часть оказалась самой сложной. Как правило, у каждого генератора сайтов есть довольно обширная библиотека тем. Однако, само по себе решение оформить свое место в интернете готовой пусть даже красивой темой для меня не выглядит органичным. Мое размытое представление о том, каким я вижу личный сайт, едва ли совпадет с готовой темой. Поэтому я хотел найти максимально нейтральную и аккуратную тему (некий минимум моих ожиданий от дизайна) и, если будет настроение, допилить ее под себя. Как я и догадывался, темы для популярных генераторов сайтов в большинстве своем довольно посредственные, причем как платные, так и бесплатные.

Из сотен тем, что можно найти в библиотеке Jamstack Themes, я зацепился только за несколько вариантов:

• Almace Scaffolding (на Jekyll)
• Lumen (на Gatsby)
• Hugo ʕ•ᴥ•ʔ Bear Blog (на Hugo)

Последняя из тем просто переносит на Hugo «отсутствующий» дизайн маргинальной платформы для блоггинга Bear Blog. Собственно через Bear Blog я и набрел на нее и решил попробовать Hugo, тем более, что после беглого обзора мне показалось, что этот фреймворк похож по замысловатости на Jekyll и значительно проще, чем Gatsby. Hugo — довольно зрелый генератор статических сайтов на языке Go. Как и другие SSG, это open-source проект.

Процесс

Собрать пробный сайт на Hugo и запустить его на бесплатном аккаунте в Netlify у меня получилось за полчаса (👏🏻 браво документации Hugo). Выбор Netlify для хостинга (вместо, например, GitHub Pages) был довольно спонтанным, но удачным решением.

Чтобы разобраться в шаблонах конкретной темы на Hugo и поправить их под свои нужны понадобился еще час. А дальше я не смог отказать себе в желании внести небольшие правки в CSS и в итоге под конец дня получилась первая версия архива, которая меня устраивала (и вторая по счету, потому что первую попытку редизайна я отбросил).

Итог: я пишу эту заметку в любимом текстовом редакторе Atom¹ на чистом Markdown и при нажатии Cmd+S получаю готовую версию странички в соседнем окне Google Chrome (Hugo говорит обновление занимает 11 мс, что даже быстрее чем перезагрузить страницу). Затем коммит и пуш на GitHub, и Netlify делает мой сайт доступным всему интернету через минуту.