Чуть больше года назад я создал канал в Telegram и начал писать туда статьи. Целей было несколько: с одной стороны хотелось делиться тем, что мне самому кажется полезным и интересным, с другой — прокачиваться в процессе подготовки материалов. Когда собираешься писать, неизбежно глубже разбираешь тему, а значит закрываешь пробелы в знаниях.
Но как бы классно это ни было, всё же это дополнительная работа, и делать её нужно в свободное время. К тому же довольно сложно долго сохранять мотивацию, не видя результата.
Прошлый год показал мне: чтобы повысить шанс на регулярность, нужно как-то упростить процесс. Я проанализировал ситуацию и нашёл несколько проблем, которые нужно решить.
Из markdown в TelegramПоначалу я писал просто в md файлах и коммитил их на GitHub. Было привычно и удобно до того момента, когда нужно было переносить статьи в Telegram. Там моё форматирование, конечно же, ломалось.
В Telegram свой, более простой формат разметки, лишь частично поддерживающий синтаксис markdown. Кроме того, есть ограничение на длину сообщения — иногда мои посты делились на два, а мне приходилось удалять шутки, чтобы всё поместилось. Да и читать в целом не очень удобно, особенно если добавить картинку: пост ужимается в колонке по какой-то неведомой UI-причине.
Переход на telegra.phЯ искал какие-то готовые инструменты, чтобы решить проблему с форматированием, но ничего прям классного мне не попадалось, пока не наткнулся в одном блоге на статьи в telegra.ph. Это платформа от Telegram для статей или длинных постов. Её плюсы: можно в WYSIWYG-редакторе набрать статью и сохранить её под уникальным публичным URL без смс и регистрации. К тому же ссылкой удобно делиться — подтягивается заголовок, описание и обложка, если она есть, так что в Telegram и других платформах это выглядит аккуратно и красиво.
С первого взгляда мне показалось, что это прям решение, которое я искал. Подписчики тоже порадовались, что стало удобнее читать статьи. Но проблемы были и тут.
Во-первых, переносить текст из markdown на эту площадку ещё больнее, чем в Telegram. Я попробовал писать прямо там — и мне это тоже показалось неудобным. Баги бывают, потому что это WYSIWYG, а не просто текст, как в Telegram. Как-то раз я добавлял блок кода, а получил отступы на три экрана… Я даже сначала подумал, что пол статьи удалилось.
Во-вторых, если ты опубликовал статью, формируется постоянная ссылка со слагом из твоего заголовка, и изменить её уже нельзя. Только создавать новую статью. Я понимаю, почему это сделано, и всё вроде логично, но и удалить эту статью нельзя. Мой перфекционист внутри посчитал это уж слишком серьёзным недостатком.
В-третьих, мне бы хотелось иметь возможность настроить внешний вид статьи. Очень не хватает подсветки синтаксиса в кодовых вставках, например. И это мне показалось даже более серьёзным недостатком, чем первые два.
Сбор требованийИтак, проанализировав ситуацию, я сформулировал требования к площадке для публикации:
- Писать в markdown
- Настроить внешний вид статьи
- Делиться ссылкой с красивым превью
- Работать с текстами, как с кодом
- Доступ с любого устройства
- Предсказуемый формат публикации
- Отложенная публикация
- Возможность посмотреть как будет выглядеть статья перед публикацией
- Возможность SEO-оптимизации
- Возможность настраивать метрики
- Возможность свободно добавлять фичи
Прочитав требования, становится очевидно, что такое решение надо писать самому. Именно это я и сделал.
Тут наверное важно отметить: много времени на разработку закладывать тоже не хотелось. Поэтому я поначалу думал сделать что-то похожее на telegra.ph, но меня переубедил дизайнер, и в итоге получился классический блог.
РеализацияSPA-приложение не подойдёт под требования про SEO, а вот SSR или SSG отлично подходит. Для реализации я выбрал Next.js.
Статьи хранятся в markdown-файлах и обрабатываются в процессе сборки. Каждая статья имеет свой уникальный URL, который формируется из meta-информации, зашитой в файле. Выглядит это примерно так:
---
title: "Приветственный пост"
date: 2025-02-04
tags: [Blog, Examples, Pet-Projects]
excerpt: "Это пример статьи"
slug: welcome-post
---Тут задаются теги, slug для URL, описание и дата публикации. Если нужно, можно добавить и дополнительные поля для SEO. Довольно удобно и просто. Написал небольшой скрипт для быстрого формирования шаблона статьи с meta в нужном формате.
Также я добавил shiki-highlight для подсветки синтаксиса в кодовых вставках. Выглядит это как в VS Code:
const a = 1;
console.log(a);Процесс публикации очень простой: я могу писать разные статьи в разных Git-ветках, всё сохраняется на GitHub и живёт там в приватном репозитории. Когда материал готов, выставляю дату и время, с которых статья станет доступна пользователям, и мержу ветку. После этого запускаю релиз, который обновляет сайт. Получается контролируемый и предсказуемый процесс публикации.
Также радует, что можно легко переносить материалы из других markdown-редакторов. Например, я часто пишу в Obsidian, когда нет интернета — например, в поезде.
ЗаключениеТаким образом я создал свой собственный блог, чтобы упростить рутинные моменты в написании статей и оставить себе самое интересное в этом процессе. Надеюсь, что это поможет мне оставаться регулярным и писать больше статей.
Теперь я могу полностью сосредоточиться на написании статей и не беспокоиться о форматировании, SEO и других технических деталях. При этом если у меня появятся новые требования или идеи, как улучшить блог, я смогу это сделать сам, а не искать новую площадку.
Спасибо за внимание!