Opublikowałem artykuł ” zza kulis” o tym, jak budujemy stronę CMS Conf 2026, a to znacznie więcej niż “tylko strona lądowania”.

W artykule opisuję:

dlaczego wybraliśmy Astro 5 + Tailwind CSS 4 dla wydajności i łatwości utrzymania,
jak używamy Git-natywnego headless CMS (Pages CMS) zamiast tradycyjnego backendu,
co zrobiliśmy wokół SEO, Schema.org i ustrukturyzowanych danych specyficznych dla wydarzeń,
oraz jak przygotowujemy stronę na przyszłość wyszukiwania zorientowaną na AI z takimi rzeczami jak llm.txt, llm.json i automatyczne aktualizacje podczas procesu budowania.

To praktyczna historia o projektowaniu, architekturze frontendu, workflowach treści i optymalizacji zarówno dla wyszukiwarek, jak i LLM, zbudowana przez mały, skoncentrowany zespół.

Jeśli interesują Cię nowoczesne strony konferencji, architektury statyczne czy SEO gotowe na AI, możesz uznać to za przydatne.

#Astro #TailwindCSS #SEO #LLMO #AISEO #HeadlessCMS #StaticSites #CMSConf

Budowanie strony konferencji w 2026: Dlaczego wybraliśmy Astro 5, Tailwind 4 i podejście zorientowane na AI

Mariusz Szatkowski Developer {WordPress | WooCommerce | AI | GEO | AEO | LLMO}

18 grudnia 2025

Kiedy zaczęliśmy planować obecność cyfrową dla CMS Conf 2026, wiedzieliśmy, że standardowa ścieżka “motyw WordPress + wtyczki” nie wystarczy. Chcieliśmy czegoś innego. Potrzebowaliśmy strony, która nie będzie tylko broszurą, ale wysokowydajną platformą treści, szybką, łatwą w utrzymaniu i jawnie zaprojektowaną na erę AI.

Oto historia tego, jak nasz zespół stron internetowych, Agnieszka Palmowska, Maciek Palmowski i ja, zbudowaliśmy fundamenty dla CMS Conf 2026 używając nowoczesnego stosu, który jest słodkim punktem rozwoju webowego teraz.

1. Szybkość domyślnie: Astro 5 & Tailwind CSS 4

Wybraliśmy Astro 5 z jednego prostego powodu: wydajność to funkcja.

Domyślnie Astro wysyła zero JavaScript do klienta. Oznacza to, że nasze strony ładują się natychmiast, co jest krytyczne dla użytkowników mobilnych sprawdzających harmonogram lub prelegentów na słabym wifi konferencji. Połączyliśmy to z Tailwind CSS 4 (używając nowego wtyczki Vite), co było objawieniem.

Zmierzyliśmy implementację w wielu narzędziach, jednym z nich był Google PageSpeed Insights i oto wyniki:

Treść artykułu 100 osiągnięte

Ale pozwól, że wyjaśnię, co to oznacza w praktyce. Kiedy mówimy o “zero JavaScript”, nie mówimy tylko o mniejszych rozmiarach paczek. Mówimy o fundamentalnej zmianie w podejściu do rozwoju web. Tradycyjne SPA (Single Page Applications) często wysyłają setki kilobajtów JavaScript tylko do renderowania tego, co mogłoby być prostą statyczną treścią. Astro odwraca ten model.

Oto jak to działa: Astro renderuje całą stronę do statycznego HTML w czasie budowania. Tylko “hydratuje” interaktywne komponenty, gdy jest to potrzebne, a nawet wtedy robi to inteligentnie. Jeśli masz komponent, który musi być interaktywny (jak menu nawigacyjny lub formularz), Astro może wyizolować tylko ten komponent i załadować JavaScript dla niego niezależnie, pozostawiając resztę strony jako lekki HTML.

To podejście daje nam najlepsze z obu światów: wydajność statycznych stron z interaktywnością nowoczesnych aplikacji web, gdy tego potrzebujemy.

Wskazówka techniczna: Jeśli przechodzisz na Tailwind 4, użyj wtyczki @tailwindcss/vite. Kompiluje Twój CSS w milisekundach, co sprawia, że doświadczenie dewelopera jest niesamowicie szybkie. Zaimplementowaliśmy również LightningCSS (oparty na Rust) do minifikacji i zbudowaliśmy niestandardową wtyczkę Vite do preloadingu krytycznego CSS, eliminując niepokojący “flash of unstyled content” (FOUC).

Pozwól, że głębiej wejdę w naszą konfigurację Tailwind CSS 4. Nowa wersja wprowadza całkowicie nową architekturę. Zamiast skanować pliki pod kątem nazw klas w czasie budowania, Tailwind 4 używa CSS-in-JS z wtyczką Vite do generowania stylów w locie. Oznacza to:

Natychmiastowy HMR: Gdy zmieniasz klasę, CSS aktualizuje się natychmiast bez pełnego przebudowania
Mniejsze paczki: Tylko klasy, które faktycznie używasz, są dołączane
Lepsze wsparcie TypeScript: Pełne autouzupełnianie i sprawdzanie typów dla klas narzędziowych

Zaimplementowaliśmy również niestandardowy system tokenów projektowych używając funkcji zmiennych CSS Tailwind. Pozwala to nam utrzymać spójność na całej stronie, jednocześnie zachowując elastyczność do nadpisywania wartości w razie potrzeby. Dla CMS Conf zdefiniowaliśmy naszą paletę kolorów, skalę typografii i system odstępów jako zmienne CSS, a następnie odwołaliśmy się do nich w naszej konfiguracji Tailwind.

Nasze optymalizacje wydajności na tym się nie skończyły. Zaimplementowaliśmy:

Wbudowanie krytycznego CSS dla treści powyżej zgięcia
Lazy loading dla obrazów i iframe’ów
Wskazówki zasobów (preconnect, prefetch, preload) dla zasobów zewnętrznych
Service worker dla funkcjonalności offline
Optymalizację CDN z automatyczną optymalizacją obrazów

Wynik? Nasz largest contentful paint (LCP) jest poniżej 1.5 sekundy na połączeniach 3G, a nasza strona zdobywa 100 we wszystkich Core Web Vitals.

2. Wzmocnienie zespołu: Pages CMS

Wspólnym wąskim gardłem w projektach statycznych stron jest zarządzanie treścią. Deweloperzy uwielbiają Markdown; zespoły marketingowe… niekoniecznie.

Maciek rozwiązał to, integrując Pages CMS (https://pagescms.org). To genialny headless CMS, który działa bezpośrednio z Twoim repozytorium GitHub. Daje naszemu zespołowi treści przyjazny interfejs do zarządzania postami na blogu i profilami autorów, ale pod spodem to tylko zatwierdzanie zmian w naszym repo.

Dlaczego to działa:

Zero Infrastruktury: Nie ma bazy danych do utrzymania, nie ma serwerów do łatania.
Git-Natywny: Każda zmiana treści uruchamia naszą pipeline CI/CD, zapewniając, że nic się nie psuje.
Koszt: Jest darmowy dla publicznych repozytoriów.

Ale pozwól, że wyjaśnię, jak faktycznie zaimplementowaliśmy to w praktyce. Tradycyjne podejście CMS często involves oddzielną bazę danych, system uwierzytelniania i warstwę API. To dodaje złożoność, koszt i potencjalne luki w bezpieczeństwie. Pages CMS przyjmuje całkowicie inne podejście.

Oto nasza konfiguracja: Stworzyliśmy dedykowany katalog content w naszym repozytorium z klarownymi strukturami folderów dla różnych typów treści:

content/
├── blog/
│   ├── post-1.md
│   └── post-2.md
├── speakers/
│   ├── speaker-1.md
│   └── speaker-2.md
└── schedule/
    ├── day-1.md
    └── day-2.md

Każdy plik Markdown zawiera sekcję frontmatter ze ustrukturyzowanymi metadanymi:

---
title: "Budowanie Nowoczesnych Stron Konferencji"
author: "Mariusz Szatkowski"
date: "2025-12-18"
tags: ["astro", "tailwind", "cms"]
status: "published"
featured: true
---

Pages CMS czyta te pliki i prezentuje je w przyjaznym interfejsie. Nasz zespół treści może:

Tworzyć nową treść przez webowy edytor z podglądem na żywo
Edytować istniejącą treść z edytorem rich text, który outputs czysty Markdown
Zarządzać mediami przesyłając obrazy, które są automatycznie optymalizowane i przechowywane w naszym repozytorium
Recenzować zmiany przez wbudowany system workflow ze stanami draft/published
Współpracować z komentarzami i sugestiami bezpośrednio w CMS

Piękno tego podejścia polega na tym, że gdy ktoś wprowadza zmianę w Pages CMS, tworzy pull request w naszym repozytorium GitHub. Oznacza to:

Wszystkie zmiany przechodzą przez nasz normalny proces code review
Możemy uruchamiać automatyczne testy na zmianach treści
Mamy pełny audyt każdej modyfikacji
Możemy cofać zmiany w razie potrzeby
Możemy wdrażać aktualizacje treści niezależnie od zmian w kodzie

Zaimplementowaliśmy również niestandardowe reguły walidacji, aby zapewnić jakość treści. Na przykład, wymagamy, aby wszystkie posty na blogu miały:

Minimalną liczbę słów 500
Co najmniej jeden wyróżniony obraz
Właściwe metadane SEO
Brak złamanych linków wewnętrznych

Te walidacje uruchamiają się automatycznie podczas zapisywania treści, zapewniając natychmiastową informację zwrotną dla naszego zespołu treści.

Integracja z naszym procesem budowania jest bezproblemowa. Gdy zmiany treści są scalane z main, nasza pipeline CI/CD automatycznie:

Buduje stronę z nową treścią
Uruchamia testy dostępności i wydajności
Wdraża do produkcji
Unieważnia pamięć podręczną CDN
Wysyła powiadomienia do odpowiednich członków zespołu

To podejście oparte na Git przekształciło sposób, w jaki obsługujemy treści. Nasz zespół marketingowy może teraz wprowadzać aktualizacje bez interwencji dewelopera, jednocześnie zachowując pełną kontrolę nad implementacją techniczną.

3. “Niewidzialna” praca: Zaawansowane SEO & Schema

Ranking w 2026 wymaga więcej niż tylko słów kluczowych. Potrzebujesz struktury.

Poszliśmy głęboko w implementację Schema.org. Zbudowaliśmy niestandardowy komponent SchemaOrg.astro, który dynamicznie generuje ustrukturyzowane dane JSON-LD dla każdej strony.

Co zaimplementowaliśmy:

Schema Organizacji: Identyfikacja Openweb S.C. jako podmiotu prawnego.
Schema Wydarzenia: Dostarczanie Google z precyzyjnymi datami, lokalizacją (PPNT Gdynia) i informacjami o biletach.
Łączenie @id: Kluczowo używamy referencji @id do “połączenia kropek” między organizacją a wydarzeniem w Knowledge Graph Google.

Wskazówka pro: Nie polegaj na domyślnych wtyczkach SEO, aby robić wszystko. Dostosowywanie Twojego Schema do łączenia encji (np. łączenie Twojego Wydarzenia z Twoją Organizacją poprzez ID) to potężny sygnał dla wyszukiwarek o tym, kim jesteś i co robisz.

4. Optymalizacja na erę AI (LLM)

To moja ulubiona część. Wyszukiwanie się zmienia. Ludzie pytają ChatGPT i Perplexity o wydarzenia tak często, jak używają Google. Aby zapewnić, że te systemy AI dają dokładne odpowiedzi o CMS Conf, zoptymalizowaliśmy stronę dla nich.

Zaimplementowaliśmy plik llm.txt w głównym katalogu naszej strony.

Pomyśl o tym jak robots.txt, ale dla LLM. Zapewnia ustrukturyzowane, bogate w kontekst podsumowanie całej konferencji, prelegentów, dat, stosu technologicznego, jawnie sformatowane do ingestii przez AI. Napisaliśmy nawet niestandardowy skrypt Node.js (scripts/update-llm-txt.js), który uruchamia się w czasie budowania, aby skanować nasze metadane i utrzymywać ten plik idealnie aktualnym.

Wynik? Kiedy AI skanuje naszą stronę, nie musi zgadywać. Mówimy mu dokładnie, czym jest CMS Conf.

5. Zautomatyzowana kontrola jakości

Wreszcie, zautomatyzowaliśmy nudne rzeczy. Ustawiliśmy kontrole pre-build astro-link-validator, aby zapewnić, że nigdy nie wysyłamy złego linku. Zweryfikowaliśmy nasze przekierowania w astro.config.mjs, aby łagodnie obsługiwały dziedziczone URL.

Podsumowanie

Budowanie strony CMS Conf nie było tylko o kodzie; było o tworzeniu systemu, który służy naszym użytkownikom (szybkość), naszemu zespołowi (zarządzalność) i maszynom, które pomagają ludziom nas znaleźć (SEO & AI).

Jeśli budujesz bogatą w treści stronę w 2026, polecam spojrzeć na tę architekturę Astro + Tailwind + opartą na Git CMS. Jest chuda, jest szybka i pięknie się skaluje.

Zobacz na: https://cmsconf.com/

Dopiero zaczynamy. Do zobaczenia w Gdyni w listopadzie!

#WebDevelopment #AstroJS #TailwindCSS #SEO #AI #CMSConf2026 #TechStack