Как устроен этот блог: механика сайта без единого фреймворка

Меня часто спрашивают, на чём сделан этот сайт — наверняка какая-то CMS, движок, конструктор? Отвечаю честно: ничего из этого. Блог, который ты сейчас читаешь, — это чистый HTML и CSS, без единого фреймворка, без базы данных для статей, собранный полностью через диалог с Claude Code. Разбираю механику изнутри: как это устроено и почему я выбрал именно такой подход.

Почему без движка и без базы данных

Первая мысль у любого «технического» человека — «а где WordPress, где база данных для статей?». Их здесь нет намеренно. Статический сайт (то есть набор готовых HTML-файлов, а не программа, которая собирает страницу на лету) — самый простой, быстрый и надёжный вариант для блога такого размера. Ничего не может «упасть» из-за базы данных, потому что базы данных под сами статьи попросту нет.

Из чего состоит блог физически

Когда я пишу новую статью, это буквально создание нового файла в папке posts/ и добавление одной карточки-ссылки на него в blog.html. Никакой панели администратора, никакого редактора контента — просто файлы.

Как каждая статья остаётся одинаковой по стилю

У всех статей общий CSS прямо внутри файла: один и тот же шрифт (IBM Plex Sans), одинаковые отступы, оформление таблиц, блоков-советов и CTA в конце. Это не общий файл стилей, а сознательно продублированный блок в каждой статье — так каждая страница остаётся независимой и не сломается, если я случайно поменяю что-то в одном месте и забуду про остальные.

Кластеры и цвета — как устроена навигация

Все статьи разбиты на 6 тематических кластеров, у каждого свой цвет обложки карточки в blog.html: индиго для старта в вайбкодинге, оранжевый для промптов, зелёный для продуктов и кейсов, голубой для сравнений, розовый для автоматизации и бизнеса, коричневый — для моих личных историй. Цвет сразу даёт понять, о чём статья, ещё до прочтения заголовка.

Что не статично — отдельный сервис для инструментов

Не всё на сайте — просто HTML. Например, инструмент генерации контента для соцсетей по ссылке на статью работает через отдельный небольшой сервер на Node.js, который делает запрос к ИИ-модели и возвращает готовый текст, карусель и сценарий видео. Этот сервер живёт отдельно от статичных страниц и подключается через nginx — веб-сервер, который просто раздаёт файлы блога, а запросы к инструментам перенаправляет на отдельный маленький бэкенд.

💡 Правило, которого я держусь

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

Таблица: что где живёт

Как публикуются обновления

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

Итог

Этот блог — наглядный пример того, что вайбкодинг не обязательно означает «сложную архитектуру». Иногда самое надёжное и быстрое решение — набор простых HTML-файлов, лёгкий сервер только там, где он реально нужен, и минимум движущихся частей. Такой подход легко объяснить, легко поддерживать одному человеку и почти невозможно случайно сломать.

Хочешь так же простой и надёжный сайт под свой проект?