Skip to main content

Первый пост в блоге на сайте

· 4 min read

Это первый пост в этом блоге! Спустя кучу часов, проведенных за дебагом и настройки docusaurus, сотни раз введенные в терминал npm run start, финальное npm run build && npm run serve и вуаля - мы здесь.

Что тут будет публиковаться?

Сюда я буду переносить технические статьи и свои мысли из своего Obsidian, благо, движок docusaurus, упомянутый ранее, автоматически генерирует красивые странички из Markdown-файлов. Я довольно давно пытался найти способ делиться записями из своей базы знаний с другими, перепробовал кучу способов, начиная от статей ВКонтакте и telegra.ph, заканчивая GitHub и Notion. Но по итогу, как вы видите, я пришел к куда более простому решению - одному GitHub-репозиторию со всеми заметками, который с магией CI/CD автоматически развертывает мой блог на сайте.

Note

Раз уж я решил написать первую статью, то расскажу, как работает мой блог.

Технический обзор блога

Блог - React-приложение, использующее фреймворк docusaurus. Этот фреймворк создан для генерации простых и красивых сайтов документации к проектам, но в моем случае основную фичу я отключил за ненадобностью простым добавлением docs: false в файл конфига. Docusaurus из коробки умеет в генерацию статичных HTML-страниц из Markdown (MD, язык разметки) и MDX (тоже самое, что и MD, но еще с поддержкой JSX), причем я даже сейчас не про блог - вы можете вставить в любое место MD-файл и будет создана страница с его именем: например, в /pages я создал файл test.md (можете посмотреть исходники блога на GitHub), и теперь он доступен по адресу https://difhel.dev/test.

Кажется, я уже упоминал про JSX? Да, тут можно просто в файле вставлять JS-код:

<button onClick={() => alert('Вы нажали кнопку!')}>Нажми сюда!</button>

Помимо этого, функционал сайта на Docusaurus можно практически бесконечно увеличивать за счет поддержки большого количества плагинов. Например, я установил плагин i18n, чтобы добавить поддержку как английского, так и русского языка. Ну и после всего вышеописанного, наверное, покажется банальным, но все-все-все внутренние страницы сайта можно изменить ручками в коде - сам сайт написан на React.

Где хранятся публикации в блоге и статика?

Публикации (MD/MDX) файлы лежат в папке /blog проекта. Весь мой сайт доступен на GitHub, включая исходники постов в Markdown. Сайт автоматически деплоится после коммита на Vercel, это бесплатно и очень удобно, всем рекомендую.

Какие планы на будущее блога?

Добавить больше CI/CD - написать GitHub Action для проверки орфографических ошибок. Еще сильнее упросить процесс загрузки новых постов на сайт (сейчас нужно просто закинуть файл в папку и сделать коммит), поскольку Markdown в Docusaurus и в Obsidian не всегда совместим (например, Callouts работают по разному):

Markdown в Docusaurus
:::info
В Docusaurus они работают вот так
:::
Info

В Docusaurus они работают вот так

А в Obsidian - так:

Markdown в Obsidian
> [!info]
> Вот так.

[!info] Вот так.

Написать GitHub Action в виде Telegram-бота, для автоматических уведомлений в канал о новых статьях

UPD: так как для работы комментариев (через виджет Telegram) в каждой статье требуется указывать пост, который к ней прикреплен, имеет смысл либо сначала создавать пост, а потом публиковать статью, либо усложнить бота и сделать так, чтобы бот публиковал сообщение о посте, получал ссылку на это сообщение, вставлял ее в конец конфига поста и все это коммитил в master.