W skrócie

Problem

Opisy napraw i modyfikacji żyją w wątkach na forach, które znikają razem z forum — a dopóki żyją, wczytują się wolno.

Co powstało

Dwujęzyczny blog motoryzacyjny: WordPress został narzędziem do pisania, a statycznie generowana strona w Astro tym, co faktycznie wczytuje czytelnik.

Moja rola

Cały projekt — architektura headless, front, strona WordPressa i sam proces publikacji.

Co jest w tym ciekawego

Panel, w którym pisze autor, i strona, którą otwiera czytelnik, to dwa osobne systemy. Publiczna strona to zwykłe pliki HTML, więc nie ma na niej bazy do zaatakowania.

Efekt

Początek ekosystemu polo.blue, w którym są dziś także katalog części i ogłoszenia z używanymi częściami.

Stan dziś

Strona żyje: pod koniec 2025 dostała nowy design wspólny z katalogiem, a w 2026 nowe menu mobilne, odświeżoną wyszukiwarkę i hosting na Cloudflare Workers. Szczegóły w sekcji o redesignie.

Kompleksowy blog dla entuzjastów VW Polo 6R

Polo.blue to starannie przygotowany blog poświęcony Volkswagenowi Polo 6R w kolorze Shadow Blue, zbudowany w Astro, Vue3 i UnoCSS. Wykorzystując WordPress jako panel administracyjny, blog oferuje statycznie generowane strony, które w czasie budowania pobierają treść przez REST API. Strona oferuje szczegółowe wpisy o modyfikacjach, konserwacji i ulepszeniach, stanowiąc bogate źródło wiedzy dla entuzjastów Polo 6R chcących ulepszyć i utrzymać swoje pojazdy.

Wykorzystane technologie

Astro

Astro to nowoczesny generator stron statycznych dostarczający wysoce zoptymalizowane i wydajne strony. Pozwala na częściową hydratację, co oznacza, że początkowo ładowany jest tylko niezbędny JavaScript, co skutkuje szybszym ładowaniem stron. Możliwość integracji Astro z różnymi frameworkami frontendowymi czyni go wszechstronnym wyborem do budowania stron statycznych.

Vue.js

Vue3 to progresywny framework JavaScript używany do budowania interfejsów użytkownika. System reaktywności, Composition API i zwiększona wydajność w porównaniu do Vue2 czynią go idealnym do tworzenia dynamicznych i interaktywnych komponentów na blogu.

UnoCSS

UnoCSS to wysoce konfigurowalny atomowy framework CSS. Pozwala na wydajne stylowanie komponentów bez nadmiaru tradycyjnych frameworków CSS, co prowadzi do szybszego ładowania i lepszej ogólnej wydajności.

WordPress

WordPress służy jako system zarządzania treścią (CMS) dla Polo.blue. Wykorzystując WordPress jako backend, twórcy treści mogą łatwo zarządzać wpisami i aktualizacjami bez zagłębiania się w kod. Czytelnik nigdy nie trafia na WordPressa: panel żyje pod osobnym adresem, a publiczna strona to gotowe pliki.

WordPress REST API

Frontend pobiera treść przez REST API WordPressa, rozszerzone moją otwartą wtyczką Enhanced WP REST API. Dzięki niej odpowiedź o wpis zawiera od razu autora, kategorie, tagi i obrazek we wszystkich rozmiarach, ze względnymi adresami, więc build nie dopytuje panelu o każdą relację osobno.

Progressive Web App (PWA)

Oferuje płynne, aplikacyjne doświadczenie na urządzeniach mobilnych z możliwością pracy offline, szybkim dostępem i zwiększoną wydajnością dla bardziej niezawodnej interakcji z użytkownikiem.

Cloudflare

Strona jest serwowana z Cloudflare Workers, a lekki Worker przed nią obsługuje przekierowania i podaje zdjęcia z WordPressa pod adresem polo.blue, żeby czytelnik nie odwoływał się do panelu. Do tego ochrona przed DDoS i globalne CDN.

Google Tag Manager

Ułatwia integrację Analytics i AdSense, umożliwiając szczegółowe śledzenie i monetyzację.

Zalety stosu technologicznego

Wydajność: Statycznie generowane strony są serwowane jako pliki HTML, zapewniając błyskawiczne ładowanie. Częściowa hydratacja Astro dodatkowo zwiększa wydajność, ładując tylko niezbędny JavaScript.

Bezpieczeństwo: Serwując statyczne strony, Polo.blue redukuje ryzyko typowych podatności związanych z dynamicznymi stronami, takich jak SQL injection i cross-site scripting (XSS). Statyczny frontend jest oddzielony od backendu WordPress, dodając dodatkową warstwę bezpieczeństwa.

Masz WordPressa i chcesz osiągnąć podobny efekt bez przepisywania strony od zera? Sprawdź pakiet migracji na headless WordPress — zachowujesz panel, zyskujesz 10× szybszy frontend.

SEO: Szybkie ładowanie i dobrze ustrukturyzowany HTML poprawiają SEO strony. Statycznie generowane strony są łatwo indeksowane przez wyszukiwarki, zwiększając widoczność.

Doświadczenie użytkownika: Nowoczesny design i responsywny układ zapewniają optymalne doświadczenie użytkownika na wszystkich urządzeniach. Wbudowana wyszukiwarka działa bez zaplecza, na indeksie zbudowanym razem ze stroną, więc odpowiada natychmiast i nie obciąża WordPressa.

Doświadczenie programisty: Integracja Astro z Vue3 i UnoCSS usprawnia proces developmentu. Jedno REST API z gotowymi, kompletnymi odpowiedziami upraszcza pobieranie danych, ułatwiając rozwój i utrzymanie strony.

Redesign 2025 i co się zmieniło od startu

Blog wystartował w 2023 i od tamtej pory nie stoi w miejscu. Pod koniec 2025 przebudowałem front: strona główna z listy wpisów zmieniła się w układ magazynowy z dużymi kafelkami, kategorie dostały własne okładki i liczniki wpisów, a na stronę główną wjechała karuzela części ze sklepu z ogłoszeniami. Hero, przyciski i siatka pochodzą teraz z mojego open-source’owego Spoko Design System, tego samego, na którym stoi katalog części, więc blog i katalog wyglądają jak jedna strona, a nie dwa projekty z różnych lat.

Ciemnego motywu, który blog miał na starcie, już nie ma. Przy tej ilości zdjęć z warsztatu, schematów i tabel z numerami części jasne tło po prostu czyta się lepiej, a jeden dopracowany wariant jest wart więcej niż dwa przeciętne.

Było Jest

GraphQL (WPGraphQL)

WordPress REST API rozszerzone wtyczką Enhanced WP REST API. Kompletne odpowiedzi w jednym zapytaniu i jedna wtyczka mniej do utrzymania.

Własny hero i lista wpisów

Jumbotron i siatka ze Spoko Design System, wspólne z katalogiem części.

Astro 2

Astro 7, aktualizowane przy każdej większej wersji.

astro-i18next

Wbudowana obsługa języków w Astro. Jedna zależność mniej, ten sam podział na wersję angielską i polską.

Netlify

Cloudflare Workers. Ten sam dostawca co CDN i DNS, plus Worker, który podaje media z WordPressa pod adresem bloga.

Wyszukiwarka Google osadzona na stronie

Pagefind: indeks budowany razem ze stroną i wyszukiwanie w przeglądarce, bez żadnego zaplecza. W 2026 dostał nowy interfejs.

Ciemny motyw

Jeden jasny motyw, dopracowany pod zdjęcia i tabele.

Strona jest cały czas rozwijana. W 2026 doszły między innymi przeprojektowane menu mobilne, nowy interfejs wyszukiwarki i przeniesienie hostingu, a we wrześniu Worker, który serwuje zdjęcia z WordPressa pod adresem bloga. To case study opisuje więc projekt, który wciąż prowadzę, a nie coś, co oddałem i zamknąłem.

Podsumowanie

Polo.blue pokazuje, jak nowoczesne narzędzia webowe mogą tworzyć wydajne, bezpieczne i przyjazne dla użytkownika blogi. Wykorzystując Astro, Vue3, UnoCSS, WordPress i REST API, strona dostarcza wyjątkowe doświadczenie dla entuzjastów Volkswagena Polo 6R. Połączenie generowania stron statycznych z dynamicznymi możliwościami zapewnia, że Polo.blue pozostaje cennym źródłem dla swojej publiczności, z korzyściami wydajnościowymi i bezpieczeństwa strony statycznej.

Ekosystem polo.blue rozrósł się od tego czasu o pełny katalog części oraz stronę z ogłoszeniami części używanych. Zobacz case study katalogu części VW Polo 6R opisujący architekturę headless Astro + Laravel + Filament stojącą za catalog.polo.blue.