Как я приготовил этот блог?

Рассказываю про причины создания блога, выбор движка/платформы и с чем я столкнулся.

Почему я пишу?

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

Когда я только-только начинал вести канал в телеге, я как-то вообще не задумывался об этом, просто постил рандомный контент, который мне нравится. Осознание, зачем я всё это делаю и чего я хочу, пришло потом.

Бложик - это рупор

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

Можно написать про интересную для себя тему, взять попкорн и наблюдать (и участвовать) за срачем дискуссией в комментах. Темы могут быть разные, для себя часто выделяю следующие категории: холиварные (жаба против гадюки, жс против питона), новостные (что думаете об этом событии?), информационные (смотрите чё нашел!).

Имея свой бложик, появляется возможность доносить свои идеи и быть услышанным. Например, не нравится как устроен текущий веб? Заводи бложик и рассказывай всем, как надо. А то эти макаки с браузерами до сих пор не могут договориться о единых стандартах.

Кроме идей появляется возможность доносить свой опыт. Например, одно время я пользовался Postman, но он мне не понравился запутанностью своего интерфейса (на первый взгляд). В итоге я по сей день использую Insomnia, тот-же Postman, но удобнее. И об этом у меня даже есть пост.

А ещё это возможность делать свою жизнь осмысленной. Я в один момент пришел к тому, что мне нравится помогать и делиться чем-то бесплатным. Делать этот мир хоть чуточку лучше, делая хотя бы немного полезные вещи.

Так проще качать скиллы

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

Иначе будешь как этот кот

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

Научиться объяснять

TODO: объяснить как же сложно объяснять

Это вытекает из второго пункта. Объяснять что-то другим нереально сложно по нескольким причинам.

Любое твое слово проходит через “призму” опыта человека, которому ты что-то объясняешь. Для него одни понятия могут ассоциировать с совершенно разными вещами. Поэтому слово “дженерик” для программистов - это параметризированный тип, а для врача - это копия какого-то лекарства с другим названием, но с таким же содержанием лечащего вещества.

Ещё есть такой термин, как “проклятие знания” - это когнитивное искажение, когда будучи синьером 300кк наносек ты думаешь, что все вокруг точно такие же умницы, и начинаешь вчерашним студентам затирать про солиды, паттерны или ещё чего похуже. Вроде бы вещь для тебя понятная, а для начинающих разработчиков - совсем нет, да и слишком много кода писать нужно. Из-за этого у нашего сеньера 300кк наносек может сложиться впечатление, что все тупые. А на самом-то деле он просто не понимает, что нужно объяснять с основ.

Решением этих двух проблем являются… Попытки объяснять что-то другим. Пробуешь разные модели, смотришь, как заходит и делаешь выводы на будущее.

Личный опыт Привык начинающим (прям совсем) разработчикам объяснять смысл переменных на “коробочках”, пока ещё никто не жаловался.

Бложики для меня - отличное место, чтобы учиться объяснять сложные концепции простыми вещами.

Подписчики - базовая аудитория для новых проектов

Для меня как-то не сразу дошло, что подписчиков (привет) можно использовать для тестирования гипотез и проектов.

Например, через пару месяцев после запуска UniCheck мне захотелось узнать, сколько подписчиков из моего канала хотя бы раз пользовались им, и результат меня удивил - около 35% всех пользователей на тот момент были подписчиками моего канала. Причем, когда я его делал, я понимал, что это инструмент не для всех. Да и делал я его для себя и нескольких людей.

А выводы вот такие:

  1. 35% моих подписчиков - технари, которым надо было узнать статус приложения, проверить, открыт ли порт, что-то пингануть и т.д.
  2. Таким образом, можно собрать первый фидбек перед выходом на другие площадки и получить начальную аудиторию.
Осторожно Само собой, если ты занимаешься программированием и начнешь рекламить расклады карт Таро - тебя как минимум не поймут.

Хочется писать больше

Заметил, как этот пост уже вышел за рамки обычного поста в Телеге?

Тут тебе и форматирование, и картинки внутри текста и самое главное - буков много. В телеге после достижения лимита пост разобьется на несколько и его будет уже не так удобно читать.

Самое страшное, что если кто-то вдруг захочет его переслать, ему надо будет перекинуть несколько ссылок с текстом или перекинуть первый пост и сказать: “вот первый пост, там ещё дальше идет, зайди на канал и листай кароч”. Это, кстати, не работает. Я пробовал. Люди либо не читают, либо забрасывают на половине.

Лонгрид должен выглядеть цельным, монолитным. Рассказывать какую-то историю. Посты в Telegram больше подходят для небольших заметок.

Поэтому надо писать туда, где позволяет это делать формат. Теперь надо бы выбрать куда писать, да?

А куда писать?

Ох, я не думал, что это будет какой-то проблемой. Казалось бы, платформ много на вкус и цвет, выбирай или делай своё, но всё получилось как обычно - везде свои плюсы, минусы, подводные камни.

А вот готов ли я с ними мириться и принимать их?

Платформы для блоггинга: Medium, Дзен, Хабр, VC/DTF и т.д.

Их я сразу отсёк, по ряду причин:

Нет кастомизации

Пока делал этот блог, у меня всё время появлялись идеи, какие можно блоки добавить или как можно сделать пост интерактивным (например, вставить в него опросы, кнопки).
Зачастую платформы кроме редактирования текста и вставки картинок больше ничего не дают. А мне хотелось бы смотреть в будущее.

А твоя платформа так может?
0

Ты не владеешь своими постами

Помните мемы из 2000х годов про “Зомби Ферму” во ВКонтакте? Мол, будешь дедом/бабкой, оставишь своим внукам наследство в виде прокачанного огорода в игре. Не оставишь. Её закрыли.

Вот так получается, что не всё уж и такое вечное.
Самая банальная вещь, которую нужно осознать, когда ты пишешь на платформе - своими постами ты не владеешь. В любой момент платформа может закрыться (привет TJ!), твой аккаунт могут забанить, а тебя отменить и прощай аудитория - был такой Вася Пупкин, да пропал.

Правила

Нет, правила - это НЕ плохо. Правила - хорошо. Правила помогают поддерживать атмосферу и сводить всё к определенной тематике. Когда все твои подписчики на хабре, а ты хочешь рассказать как круто ты съездил в отпуск или какие у тебя впечатления об аниме - модераторы и большая часть аудитории тебя не поймёт. У нас тут айти.

Со своим блогом просто - ты постишь то, что ты хочешь. Ведь ты сам себе царь, и значит, сам решаешь, чем подписоту кормить. Ну и ответственность по бану неадекватов и щитпостеров тоже на тебе, да.

Поэтому, ждите здесь обзоры на аниме и игры в стиме.

Но и плюсы тоже есть.

Возможность получить аудиторию

На платформах можно подняться в начале. Тот же Хабр с его “хабраэффектом” может принести в проект немало людей, часть из которых обязательно останется.

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

В качестве примера вспомнил еще vc.ru - годом ранее здешняя аудитория открыла для себя ботов и каждый день можно было видеть пост вида “меня задолбало X и я сделал бота в ТЕЛЕГРАМЕ”. Поначалу всем заходило, пара человек даже на этом бизнес построили, но потом полилось совсем низкокачественное говно и посты перестали заходить.

Хайптреин уехал.

А для меня плюсы на этом кончились.

Итоги

Так как платформам я сказал своё решительное нет (но не навсегда, всё-таки аудиторию приводить надо), я начал смотреть в сторону готовых движков для блоггинга. Но и с ними не сложилось.

Селфхост платформы для блогов

Раз с площадками мне не по пути, наверное стоит попробовать что-то готовое, что можно захостить. Здесь проблема начинается на уровне выбора движка: их так много, что глаза разбегаются.

Самое неприятное, что не все тебе подойдут: где-то редактор окажется говном, где-то роутинг нормально настроить нельзя. Где-то всё ок, но обязательно найдется тот самый фатальный недостаток, который перечеркнёт все плюсы.

Я как-то даже спросил у себя в канале, мол, где можно круто готовить блог, посоветуйте CMS-ку, вот мои требования.

И мне прислали…

Wordpress

В комментарии под пост пришел админ популярного ресурса про системное администрирование и убедил меня в том, что вордпресс использует треть Интернета. Убедившись его речами, первой мыслью у меня было то, что он может составить конкуренцию Java. И всё-таки я решил дать шанс.

СРИ БИЛИОН ДИВАЙСЕС

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

Плагины

Самая неприятная проблема - это плагины.

Если я спрошу у админа бложика на WP “как мне сделать X”, скорее всего он посоветует установить плагин. Казалось бы, есть проблема - вот таблетка! Но как и с таблетками, некоторые плагины могут быть несовместимы, а иногда для решения несовместимости двух плагинов надо поставить третий. А всё потому что архитектура у WP - говно, и некоторые решения тянутся со старта проекта. С каждом годом лучше, но всё же…

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

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

Редактор

Раньше у WP был классический редактор с минимальным количеством фич для ведения постов. И в какой-то мере он мне нравился.

Чуть позже сделали Gutenberg. Это блочный редактор, который позволяет полностью верстать контент для поста. В нём можно сделать, как мне кажется, абсолютно ВСЁ - чуваки угорнули по FSE, он же Full Site Edting, когда ты из блоков строишь себе всё что хочешь.

Мне он показался излишне переусложнённым - хоть это и блочный редактор, я всё же ожидал простоты как в Notion. Для меня он просто неудобный.

Можно даже хтмл вставлять. Максимальная гибкость.

И, внимание, редактор расширяется при помощи плагинов, а некоторые плагины работают только для старого редактора. Занавес.

Кому подходит?

По большей части он подходит как фастфуд решение, которое надо здесь и сейчас, а потребности в будущем можно закрыть плагинами. Только если вы эксперт по вордпрессу и точно умеете его готовить.

Из вордпресса делают форумы и магазины, чего уж говорить. За максимальной расширяемостью и быстрым стартом - сюда.

Мне не понравился редактор и проблемы с плагинами.

НИАСИЛИЛ ВОРДПРЕСС
0

Ghost

После Вордпресса я решил попробовать ближайшего расхайпленного конкурента.

Редактор

Редактор поддерживает как Markdown, так и визуальное редактирование. Ну и HTML можно вставлять!

Пример с HTML

Вот эти хтмлки и прочие блоки можно сохранять в сниппеты, которые позже можно будет вызывать через написание символа “/” в редакторе.

Дефолтных блоков тоже полно - тут даже есть КНОПКА, которая мне была нужна!

Блоков много, там ещё крутить и крутить

И это самый годный, минималистичный и простой редактор, который я видел в принципе.

Плагины и интеграции

Как-то всё круто начинается, правда?

За простотой редактора скрывается простота движка. Видимо, Ghost решил не повторять судьбу Wordpress и сделал вместо плагинов интеграции - легковесные расширения, которые не меняют код самого ядра, а лишь частично меняют фронтенд и умеют подписываться на события.
В итоге имеем, что фичи, например комменты, надо вклеивать через iframe или через измнение кода темы - пример с disqus.
Некоторые интеграции уже включены в сам движок и вызываются через /, прямо как в Notion. Пример с Unsplash.

Для более сложных интеграций можно использовать:

  • Zapier (он мне не нравится), подходит для базовых сценариев где не хочется писать код
  • Admin API, если хочется управлять сайтом.
  • Content API, если хочется посмотреть контент или написать кастомный фронтенд/клиент.
  • Вебхуки, если надо обрабатывать события.

Либо вклеивай хтмлки прямо в пост, ёпт!

Кому подходит

Бери, если нужен удобный минималистичный движок и ты хочешь просто писать текст.

У меня с ним не сложилось просто потому что я в какой-то момент забил на саму идею - в то время активно искал работку, как-то не до бложиков было :D

Личная рекомендация

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

Здесь нет переусложнённого редактора, есть сниппеты и API которые позволяют делать многое - и всё это без модификации движка. Поэтому, если хотите блог - ставьте Ghost в докере, заказывайте/делайте шаблон и пишите посты.

А может написать свою CMS?

Вариант-безысходность, потому что лучший код тот, который не написан. Своё надо ещё накодить.

В принципе, этот вариант нормальный, если ты понимаешь, что ты хочешь. Я написал половину движка на Django, прикинул, сколько всего мне еще надо сделать и в какой-то момент остановился. Лень.

Писать хороший и удобный движок для блога - та ещё задача. Когда ты пишешь сам, ты не готов мириться с компромиссами. Работа над SEO и оптимизацией, нормальная вёрстка, фичи - всё это достаточно трудозатратно. А в жизни есть еще много вещей, которые можно сделать. Я вот ниасилил, мне стало тупо лень. Он подойдет в качестве классного пет-проекта, но такого вида пет-проект меня почему-то не заинтересовал.

Итоги

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

Я же люблю себе усложнять задачи, поэтому этот вариант был не для меня - меня всегда что-то не устраивало. Но желание писать в один момент преодолело желание продолжать пердолиться.

В какой-то момент я осознал, что вот эти “удобные редакторы” в CMSках вообще не для меня. Зачастую нет ничего лучше старого доброго Markdown, а остальное можно и руками сделать.

Генераторы статических сайтов

Я всё ещё продолжал искать вариант, который бы имел золотую середину между пердолингом движка и удобством использования. В какой-то момент я решил посмотреть, на чем нынешние программисты делают бложики и открыл для себя генераторы статистических сайтов (далее SSG).

Я посмотрел, попробовал и понял - это то, что я искал.

Как это работает?

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

SSG же предлагает другой подход - ты просто пишешь текст в определённом формате (зачастую это markdown), запускаешь утилиту для сборки сайта, и генератор отдает тебе готовую папку с HTMLками. Остается просто закинуть эту папку на веб-сервер и вуаля - блог готов!

В таком случае, пользователь отравляет запрос на получение поста и сразу получает страничку.

Такие сайты имеют ряд преимуществ:

  • Скорость. По своей природе.
  • Возможность работы без JS, если его конечно не добавлять на страницы.
  • Безопасны. Нечего взламывать, кроме сервера, но это уже другой вопрос.

Редактор

А тебе тут он и не нужен. Точнее, люди которые пишут контент для таких сайтов делятся на 3 типа:

  1. Пишут пост прямо в Sublime/VSCode при помощи Markdown (или что там поддерживается) пост.
  2. Пишут пост в специальных WYSIWYG редакторах, которые умеют конвертировать весь пост в Markdown (например, в Notion)
  3. Пишут пост в Notion/Word, а окончательной редактурой и расстановкой блоков занимаются в редакторе перед публикацией (это я).

Кастомайзинг

Здесь он практически максимальный - почти каждый генератор поддерживает либо плагины, либо шорткоды.

Плагины могут менять функционал самого генератора, что позволяет его бесконечно расширять.
Не нравится, что генерировать сайт приходится из файликов? Подцепи базу данных или API и генерируй сайт с них!

Шорткоды - это блоки, которые можно использовать прямо в посте, расширяющие функционал генератора. В момент сборки сайта генератор пройдет по ним и вместо них вставит кастомный HTML/JS код, который соотвествует шорткоду. Они не такие мощные как плагины, но большинство кейсов по кастомизации покрывают.

Пример шорткода

Пример использования шорткода

Как хранятся данные

Все данные - это просто папки с контентом и шаблоны, по которым будет генерироваться сайт.

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

Зачастую данные в для таких сайтов хранят в системах контроля версии (git), а деплоится оно при помощи скриптов.

А что с фичами?

Тут всё примерно как в Ghost - просто вставляем код с в фичей в шаблон или шорткод.

Больше всего мне всё таки нравится подход с шорткодами здесь, ибо шаблонизатор позволяет добавлять кастомную логику.

Итог

Максимально годный вариант если:

  1. Ты адепт минимализма и папочек с файлами
  2. Не хочется тащить движки
  3. Не хочется сидеть на платформах
  4. Нужно иметь возможность кастомизироваться без проблем
  5. Тебе не нужен редактор и тебе норм писать посты в блокноте

Для меня все эти пункты - ОК, поэтому на этом сайте я использую Hugo.

С чем я столнкулся пока делал блог

Выбрав вариант с генератором, я понял, что поработать придётся знатно. И вот с чем я столкнулся.

Почему Hugo?

Он мне больше всего понравился по ряду причин:

  • Он написан на Go, а я немного умею в Go. Если что-то понадобится - форкну и допишу.
  • У Hugo очень удобная структура, его очень просто расширять.
  • Исчёрпывающая документация с видеопримерами и живой форум, большинство проблем с которыми я столкнулся уже были решены.
  • Есть i18n из под коробки, если я захочу версию сайта на английском языке - с этим проблем не будет.
  • Возможность задавать конкретные шаблоны в постах и категориях. Как пример, страница “Обо мне”, которая настраивается через конфиг.

Ещё рассматривал Jekyll, Hyde, Pelican, но в итоге остановился на Hugo.

Фичи

Не забываем, что Hugo - это просто генератор HTML’ок. Поэтому комментарии и покраску текста надо изобретать самому. Ниже расскажу, что я сделал сам, что скоммуниздил, что повзаимствовал.

Комментарии

Так как готовые платформы мне не нравились, но всё же хотелось чет своё, я ушел гуглить селфхостед платформы и встретил remark42 - это готовый движок для комментов, который довольно гибко настраивается.

В нём есть всё, что мне нужно - вход через социалочки, админка, вебхуки для нотификаций, и запускается это всё в докер-контейнере. Красота!

Установка проста - встраиваем ифреим с сервисом комментариев и радуемся.

А если я хочу платформу? Юзай Disqus - его используют очень много блогов.

Кнопочки?

А это уже моя разработка)00))))

Честно, я очень долго искал такой сервис, но ничего дельного тупо не нашёл - пришлось писать своё.

Если когда-то сделаю фронтенд, авторизацию через гитхаб - то тут появится ссылка на сервис.

Мне нужен такой сервис, пили!
0

Цитаты, цветные блоки, спойлеры и другие шорткоды

Всё это я делал сам, вдохновляясь другими блогами. Делал только то, что мне сейчас точно понадобится для постов.

Тестовая страничка, на которой есть все

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

Поисковая оптимизация

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

Поисковая оптимизация - вещь странная. Как оказывается, она не только про поиск, она ещё и про доступность контента (ниже читайте про OpenGraph). Хотя у каждого поисковика свои правила, но есть общий набор методик и принципов, которые позволят сайту не выглядеть как говно.

Теги и разметка

В основном шаблоне стоит сразу настроить теги типа title, description и так далее. Я думаю объяснять не надо, что это основа-основ, без них в поиске будет трешанина, а сайт индексироваться нормально не будет.

OpenGraph

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

Пример ссылки, запощенной в Telegram с настроенным OpenGraph

Для валидации OpenGraph и микроразметки можно воспользоваться сервисом Яндекса.

Производительность

Для проверки этой метрики можно воспользоваться сервисом PageSpeed Insights от гугла. Он подскажет что где медленно работает и как это можно улучшить.

Мои циферки

Аналитика

Для подсчёта количества посетителей и на какие они ссылки кликают я использую Matomo.

Вся установка сводится к тому, чтобы добавить JS код, в самом Matomo создать ресурс и вуаля - можно иногда заходить и глазеть на графики.

Пример с админки

Деплой и хранение

На данный момент весь контент сайта и шаблон хранятся на GitHub. При создании релиза сайт собирается при помощи Github Actions и отправляется на сервер. На сервере стоит nginx, который и хостит получившуюся папочку с HTMLками.

А на случай, если вдруг что-то случится с GitHub, весь репозиторий каждый день клонируется в локальный репозиторий Gitea на домашнем сервере.

Hugo и его шаблонизатор

Если честно, ощущения от него смешанные. Поэтому, ловите несколько хинтов, если будете делать на нём блог.

Первое, якори в посте можно делать вот так:

### Hugo и его шаблонизатор {#hugo_and_its_templating_engine}

Второе, никогда не ставьте date и lastmod в будущее. Иначе всё сломается, я до сих пор не знаю почему так происходит.
Ну и напоследок - читайте документацию и форум. Материала на русском нет, но если вы кэн спик фром май харт - у вас всё получится. А если нет - DeepL в руки и вперёд!

Финал

Я очень давно хотел свой бложик, в который я мог бы писать вот такие посты. И, собственно, наканецта! Он готов!

Результатом я доволен, не смотря на то, что я и потратил на это очень много времени. Поэтому, не делайте как я, делайте вот так:

  1. Сотню раз подумайте, надо ли оно вам. Занятие это неблагодарное, а люди с пиписьками и панамками дежурят круглосуточно.
  2. Если надо - пробуйте писать. Можно на платформе (но бекапьте посты!), а можно на каком-то движке. Меньше пердолинга - больше дела.
  3. Улучшайзинг и красивый дизаин можно сделать потом.
  4. Поисковой оптимизацией лучше заниматься сразу, если её нет.

Пишите в комментах, понравился ли пост, что лучше ещё добавить в блоге и так далее - буду благодарен.

Комментарии