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. Panel jest też gotowy do pracy z agentem AI przez MCP. Szczegóły w sekcjach o redesignie i o MCP.

Czym jest polo.blue

Polo.blue to blog motoryzacyjny, głównie o Volkswagenie Polo: modyfikacje, naprawy, konserwacja, schematy i tabele z numerami części. Wpisy powstają w WordPressie, a czytelnik dostaje statyczne strony z Astro, Vue 3 i UnoCSS, które build generuje z treści pobranej przez REST API.

Wykorzystane technologie

Astro

Generuje bloga do statycznych plików HTML w czasie budowania. JavaScript trafia do przeglądarki tylko razem z komponentami, które go potrzebują, a przejścia między stronami obsługuje wbudowany router Astro.

Vue 3

Interaktywne fragmenty strony to komponenty Vue osadzone w Astro, m.in. pasek z informacją o wersjach językowych i komentarze z formularzem, które ładują się asynchronicznie.

UnoCSS

Generuje w czasie budowania tylko te klasy, których strona naprawdę używa, więc arkusz stylów zostaje mały.

WordPress

Headless WordPress, w którym powstają wpisy. Ma edytor bloków, bibliotekę mediów i serwer MCP, przez który pracuje agent AI. 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)

Manifest pozwala dodać stronę do ekranu głównego telefonu, a service worker trzyma odwiedzone strony przez dobę w pamięci przeglądarki: przy wolnym łączu po 3 sekundach przechodzi do cache, a bez sieci od razu korzysta z niego. Indeks wyszukiwarki też jest zapisywany lokalnie.

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

Ładuje Analytics i AdSense, więc kody statystyk i reklam zmienia się w panelu GTM, bez nowego builda strony.

Zalety stosu technologicznego

Wydajność: Czytelnik dostaje gotowy HTML, bez zapytań do bazy przy każdym wejściu, a JavaScript ładuje się tylko z komponentami, które go potrzebują.

Bezpieczeństwo: Same strony to statyczne pliki: do ich wyświetlenia nie potrzeba PHP ani bazy danych. WordPress działa osobno, jako headless.

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

SEO: Szybkie strony z czystym HTML-em, który wyszukiwarki czytają bez uruchamiania JavaScriptu.

Dla czytelnika: Układ jest dopasowany do telefonu i komputera. Wbudowana wyszukiwarka działa bez zaplecza, na indeksie zbudowanym razem ze stroną, więc odpowiada natychmiast i nie obciąża WordPressa.

Dla programisty: Interaktywne części to zwykłe komponenty Vue osadzone w Astro, a jedno REST API z kompletnymi odpowiedziami zastępuje osobne zapytania o każdą relację.

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 ostatnio także 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.

Redagowanie WordPressa przez MCP

To, że WordPress zostaje narzędziem do pisania, nie znaczy, że każdą zmianę trzeba wyklikać w edytorze. WordPress 6.9 ma Abilities API, a oficjalna wtyczka MCP Adapter na jego bazie udostępnia stronę agentowi AI przez MCP (Model Context Protocol). Sam adapter nie wystawia niczego, co dotyka treści, więc napisałem wtyczkę z narzędziami do bloków Gutenberga: wyszukiwanie wpisów, odczyt struktury bloków wpisu, pobranie i podmiana pojedynczego bloku, wstawianie, usuwanie, przenoszenie i rozpakowywanie bloków, walidacja struktury i wyszukiwanie plików w bibliotece mediów. Agent loguje się na osobne konto z rolą Redaktora i hasłem aplikacji, a nie na moje.

Każdy zapis niesie sumę kontrolną treści, na której agent pracował, i zostaje odrzucony, jeśli ktoś w międzyczasie zmienił wpis w edytorze. Przed zapisem wtyczka sprawdza też wynik edycji i odrzuca taki, po którym struktura bloków byłaby zepsuta. Narzędzia, które coś zapisują, mają tryb próbny, a każda zmiana to zwykła rewizja WordPressa, którą cofam jednym kliknięciem. Do tego zasada pracy: agent proponuje, ja zatwierdzam, a opublikowany wpis zmienia się dopiero po moim „tak”.

Do czego to się przydaje

Nowe treści Agent dopisuje sekcję do istniejącego artykułu, ze źródłami i osadzonym filmem, i tłumaczy ją na pozostałe wersje językowe.
Porządki Pilnuje numeracji i odsyłaczy, wyłapuje zdublowane fragmenty i zepsute linki, które na stronie łatwo przeoczyć.
Przebudowa Przenosi całe sekcje w drzewie bloków bez ponownego wysyłania tekstu, więc nic nie może się po drodze zmienić.

Blog jest więc gotowy do pracy z AI: agent pomaga w redagowaniu, sprawdzaniu faktów i porządkach, a panel, rewizje i ostatnie słowo zostają przy mnie. Tak samo agent pracuje w moim autorskim CMS-ie, tylko że tam serwer MCP jest wbudowany od początku.

Podsumowanie

Blog od startu w 2023 stoi na tym samym podziale: autor pisze w WordPressie, a czytelnik dostaje statyczne strony z Astro. Od tamtej pory wymieniłem design, hosting, wyszukiwarkę i sposób pobierania treści, a panel jest teraz gotowy do pracy z AI przez MCP.

Wokół bloga wyrósł ekosystem polo.blue: pełny katalog części i strona z ogłoszeniami części używanych. Zobacz case study katalogu części VW Polo 6R opisujące architekturę headless Astro + Laravel + Filament stojącą za catalog.polo.blue.