23 сентября 2026 г.

Решил добавить кнопку лайков на свой блог, чтобы понять, как оживить статический сайт. 🚀

Hugo генерирует только HTML-файлы: у него нет встроенной базы данных и серверной логики. Просто так добавить счётчик не получится — самому HTML негде хранить информацию о том, кто и сколько раз нажал на сердечко.

Мой опыт реализации:

Вся динамика вынесена в отдельный легковесный микросервис. Схема работы выглядит так:

  graph TD
    %% Настройка подсетей (субграфов)
    subgraph Internet ["🌐 Интернет"]
        A["👤 <b>Посетитель</b>"]
    end

    subgraph VPS ["☁️ VPS"]
        B["⚡ <b>Nginx</b><br/>Reverse Proxy + Cache"]
    end

    subgraph HomeServer ["🏠 Хостинг сервер (Alpine Linux)"]
        C["🛡️ <b>Nginx</b><br/>Internal Proxy"]
        D["🚀 <b>Go-микросервис</b><br/>Port 8081"]
        E["💾 <b>SQLite</b><br/>Persistent Storage"]
    end

    %% Связи и потоки данных
    A -->|HTTPS / Static| B
    A -->|API /api/| B
    B -->|proxy_pass| C
    C -->|localhost:8081| D
    D <-->|Read / Write| E

    %% Стилизация элементов (цвета из вашего CSS)
    style A fill:#ff6b6b,stroke:#ff6b6b,stroke-width:2px,color:#fff,rx:8px,ry:8px
    style B fill:#4ecdc4,stroke:#4ecdc4,stroke-width:2px,color:#fff,rx:8px,ry:8px
    style C fill:#95e1d3,stroke:#95e1d3,stroke-width:2px,color:#212529,rx:8px,ry:8px
    style D fill:#ffe66d,stroke:#ffe66d,stroke-width:2px,color:#212529,rx:8px,ry:8px
    style E fill:#a29bfe,stroke:#a29bfe,stroke-width:2px,color:#fff,rx:8px,ry:8px

    %% Стилизация субграфов (нейтральные тона для фона)
    style Internet fill:#FDFDFD,stroke:#E0E0E0,stroke-width:1px,stroke-dasharray: 5 5
    style VPS fill:#F4FBFD,stroke:#B3E5FC,stroke-width:1px
    style HomeServer fill:#F4FBF4,stroke:#C8E6C9,stroke-width:1px

Go-бэкенд: Написал небольшой HTTP-сервер (~150 строк кода), который принимает лайки и хранит их в базе SQLite. Он работает локально на моём Alpine-сервере и потребляет минимум ресурсов (критично для 2 ГБ RAM).
Настройка Nginx: Самый важный урок — отключить кэширование для API-запросов на VPS. Иначе пользователи видели бы устаревшие данные. Добавил proxy_cache_bypass 1 для пути /api/, чтобы каждый запрос проходил напрямую до бэкенда.
Интерфейс в Hugo: Кнопка использует localStorage для уникального ID пользователя. Интерфейс реагирует мгновенно (оптимистичное обновление), создавая приятное ощущение отзывчивости, даже если сеть немного тормозит.

Что понял: Статический сайт не обязан быть «мёртвым». Вынеся логику в отдельный микросервис, я сохранил скорость загрузки статики через CDN/VPS-кэш, но получил полноценный интерактив. Всё это работает стабильно даже на домашнем сервере с ограниченными ресурсами. ❤️

Лайки на статическом Hugo: мой опыт интеграции Go-микросервиса