Личен Hugo дневник

Какво представлява

Това е личният ми сайт, но го третирам като малко проектче, вместо като тема с няколко примерни страници. Целта му е проста: да има едно място за нещата с които се занимавам: проекти, снимки, дневник, походи и тренировки, без да завися от социална платформа или тежък CMS.

Проектът е статичен Hugo сайт. Съдържанието е в Markdown, шаблоните са в layouts/, стиловете са в assets/css/main.css, а малките интеракции са в assets/js/main.js. Деплойването минава през Cloudflare Pages.

Какъв проблем решава

Исках сайт, който е бърз за четене, лесен за писане и гъвкав за различни типове съдържание. Един ден може да кача кратка статия, друг ден снимки от преход, а накрая и проектче като това например.

Най-важното изискване беше да няма отделен workflow за всеки тип публикация. Един файл в content/ трябва да е достатъчен, а дизайнът да поеме останалото.

Основни части

• Общ feed - началната страница събира записи от posts, projects, adventures, gallery и journal.
• Проектен архив - content/projects/ има филтри по тип: web, backend, data, notebooks и automation.
• Галерия - един Markdown файл описва цял фото пост: cover image, списък със снимки, captions и tags.
• Тренировки - записите в content/workouts/ използват front matter за дистанция, време, темпо и денивелация.
• Тагове - общата таксономия позволява навигация между снимки, бележки и проекти по тема.

Структурата е нарочно предвидима:

content/   -> публикации и данни
layouts/   -> Hugo templates и partials
assets/    -> CSS и JavaScript
static/    -> изображения и файлове без обработка
public/    -> генерираният сайт

Имплементация

Картите в архива се рендерират през един partial: layouts/partials/card.html. Това държи feed-а консистентен, но позволява специално поведение при нужда. Например тренировките показват compact stats, проектите показват stack, а галерията има отделен layout за фото постове.

Филтрирането и търсенето са клиентски. Hugo генерира нужните data-* атрибути в HTML-а, а JavaScript само скрива и показва вече наличните карти. Това е достатъчно за личен сайт и избягва ненужна backend логика.

Избор на технологии

Избрах Hugo, защото, съдържанието остава обикновен Markdown, който е лесен за писане а резултатът - статичен HTML. За този проект не ми трябва бекенд.

Малка част от CSS-а е ръчно писана (колкото да кажа че съм писал), като по-голямата част си е вградена от пре-билднат шаблон, променен чрез LLM. Имам конкретена визуална идея и реших, че не ми трябва голям UI framework. JavaScript-ът е ограничен до неща, които подобряват навигацията.

Production build-ът е стандартен:

hugo --gc --minify

След build Cloudflare Pages сервира готовите файлове от public/.

Какво следва

Следващите практически подобрения, които мисля да направя са няколко на брой:

• автоматично компресиране и преоразмеряване на изображения;
• по-добри preview изображения за проектите;
• по-релевантни графи за тренировки.
• с или без дисплейване на снимка за тренировките;
• малки подобрения около carousel и modal states;

Целта ми е с времето да поддържам проекта по-минималистичен от гледна точка на логика и да качвам повече съдържание.