Сайт обновился: комиксы, Tailwind CSS v3 и грабли на пути к брутализму

Друзья, сайт обновился! Если вы читаете это, значит, всё работает (надеюсь). Давайте расскажу, что именно изменилось и почему это важно не только визуально, но и технически.

🎨 Что нового? Дизайн в стиле комиксов

Сайт теперь выглядит как страница из старого доброго комикса:

• Жирные чёрные обводки (.brutal-border) — никаких полумер, только 4px solid black.
• Жёсткие тени без размытия (.brutal-shadow) — тень либо есть, либо её нет. Никаких blur.
• Акцентный шрифт Comic_CAT для заголовков — потому что технологии должны быть веселыми. Отдельная благодарность Виталию Лазаренко (fonts.uprock.ru ) за этот замечательный шрифт!
• Эффект полутонов (halftone) на фоне через CSS-градиенты — классическая полиграфическая техника, реализованная кодом.

Всё это сделано на базе Tailwind CSS v3, который позволяет быстро собирать такие интерфейсы, не превращая CSS-файл в свалку из тысяч строк кастомных стилей.

⚡ Производительность: быстро даже на домашнем сервере

• Чистый CSS: Tailwind генерирует только те классы, которые реально используются в HTML. Никакого мёртвого кода.
• Мгновенная сборка: Hugo собирает весь сайт за ~200мс.
• Умные изображения: Ленивая загрузка (loading="lazy") + современные форматы WebP и AVIF.
• Размер страницы: Главная весит всего ~15KB (без картинок).

🛠 Грабли, на которые я наступил (и вы тоже можете)

Конечно, без приключений не обошлось. Переход на новый стек дался непросто:

1. Правильная конфигурация tailwind.config.js. В третьей версии всё управление сканированием файлов лежит в конфиге. Если забыть добавить путь к JS-файлам или партиалам, классы просто исчезнут из итоговой сборки. Пришлось повозиться с масками путей.
2. CDN vs локальная сборка. Поначалу подключал Tailwind через CDN «для скорости», но это дублировало локальный CSS, создавало конфликты стилей и замедляло First Contentful Paint. Теперь всё собирается локально через Hugo Pipes + PostCSS. Никаких лишних запросов.
3. Структура шаблонов. Убрав CDN, столкнулся с тем, что браузер переставал видеть стили до полной загрузки файла. Решение — правильная настройка resources.Get с minify и fingerprint прямо в baseof.html, чтобы Hugo отдавал уже оптимизированный и закэшированный CSS.

🔮 Что дальше?

Планы на будущее уже есть:

• Тёмная тема — для тех, кто любит читать ночью (или работает в серверной без окон).
• RSS-лента — чтобы подписаться на обновления без соцсетей.
• Комментарии — возможно, через самописную систему на XMPP (у меня же свой Prosody-сервер, грех не использовать).
• Автоматическая оптимизация изображений — конвертация в WebP/AVIF прямо при сборке Hugo.

Спасибо, что читаете!

Если нашли баг или есть предложение — пишите в контактах . А если сайт понравился — поделитесь с друзьями (кнопки есть в конце каждой статьи).

🤓 Технические детали для гиков: