Strona w Astro przez Claude Code: od folderu do publikacji

Nawet osoba, która nigdy nie napisała ani jednej linijki kodu, może zbudować stronę w Astro za pomocą Claude Code. Już dawno przestałem pisać kod ręcznie; wszystko robię za pomocą słów i AI, a tworzenie strony w Astro działa dokładnie tak samo: wyjaśniasz, czego potrzebujesz, a Claude pisze za ciebie kod.

Problemem zwykle nie jest samo tworzenie strony, lecz to, że poszczególne etapy są rozdzielone. Jeden artykuł wyjaśnia instalację, inny omawia polecenia, a kolejny publikację, przez co cała ścieżka nie układa się w głowie w spójną całość. Tutaj przeprowadzę cię od pustego folderu do strony, którą można otworzyć w internecie pod linkiem: co zainstalować, jakiego polecenia użyć, by rozpocząć projekt, jak tworzyć strony za pomocą Claude Code i jak bezpłatnie opublikować gotowy rezultat. Korzystam z oficjalnej dokumentacji Astro.

Informacje o korzystaniu z usługi znajdziesz w dokumentacji Ailoot.

Co przygotować przed budową strony Astro z Claude Code?#

Astro nie wymaga wcześniejszego pobierania — zrobi to polecenie z następnego kroku. Potrzebujesz jednak środowiska, w którym wszystko będzie działać. Astro opisuje przygotowanie do pracy w ten sposób — potrzebujesz trzech rzeczy:

Przyjrzyjmy się temu, co każda z tych rzeczy oznacza w praktyce:

1. Node.js — program niezbędny do działania Astro i większości narzędzi do vibe codingu. Pobierz go ze strony nodejs.org i zainstaluj jak zwykłą aplikację. Numer wersji podany w dokumentacji z czasem się zmienia, dlatego przed rozpoczęciem odwiedź stronę instalacji Astro i sprawdź wymagania. Potrzebujesz wersji parzystej (22, 24); lepiej unikać nieparzystych (23, 25).
2. VS Code — bezpłatny edytor firmy Microsoft. Otwierasz w nim folder projektu i uruchamiasz Claude Code, który napisze kod.
3. Terminal — okno, w którym wpisujesz polecenia. Nie musisz instalować go osobno: otworzysz go z menu VS Code, a wszystkie poniższe polecenia wpiszesz właśnie tam.

Jeśli masz już zainstalowany Claude Code i cokolwiek z jego pomocą zbudowałeś, masz już wszystko, czego potrzebujesz, i możesz pominąć ten krok. Jeśli nie, znajdziesz osobny przewodnik o tym, jak zainstalować Claude Code.

Jak utworzyć projekt Astro za pomocą jednego polecenia?#

W tym miejscu zaczyna się sam projekt, a wystarczy do tego jedno polecenie. Otwórz terminal i wpisz:

npm create astro@latest

Uruchomi się kreator instalacji. Dokumentacja opisuje go tak:

Kreator przeprowadzi cię przez kolejne kroki i zada kilka pytań: jak nazwać folder projektu, od jakiego szablonu zacząć i czy od razu zainstalować zależności. Przy każdym pytaniu możesz wybrać domyślną opcję — pusty lub minimalny szablon sprawdzi się przy pierwszej stronie. Jeśli odpowiesz „nie” na pytanie o instalację zależności, później możesz dodać je ręcznie, uruchamiając polecenie npm install w folderze projektu.

Po zakończeniu kreator poinformuje, że projekt został utworzony, i zasugeruje kolejny krok — przejście do folderu projektu:

cd your-project-name

Tyle wystarczy, by utworzyć projekt. W środku znajduje się już działająca struktura strony: kilka plików i folderów służących do budowania stron. Nie musisz edytować ich ręcznie, ale warto wiedzieć, gdzie co się znajduje. Astro wymaga tylko jednego folderu:

Innymi słowy, src/pages to folder zawierający strony witryny: stronę główną, stronę „o nas” i stronę kontaktową. W pobliżu zwykle znajdują się też src/components (elementy wielokrotnego użytku, takie jak nagłówki i przyciski), src/layouts (wspólna struktura stron) oraz folder public na obrazy i pliki. Nie musisz zapamiętywać całego układu — wystarczy, że wiesz, iż strony znajdują się w src/pages, i uwzględnisz to, prosząc Claude: „dodaj stronę kontaktową”.

Jak zbudować samą stronę za pomocą Claude Code?#

Struktura projektu jest gotowa; teraz zbudujesz na jej podstawie stronę, a Claude Code przejmie pracę. Otwórz folder projektu w VS Code, uruchom Claude Code i opisz słowami, czego potrzebujesz. Samodzielnie edytuje pliki w src/pages i pobliskich folderach — ty tylko zlecasz zadania i sprawdzasz rezultat.

Z mojego doświadczenia najlepiej działa praca małymi krokami. Ogromna prośba w rodzaju „zrób mi stronę internetową firmy” kończy się chaosem, który trudno uporządkować. Dlatego podziel pracę na krótkie, jasne zadania i zlecaj je po kolei:

1. „Zrób stronę główną: duży nagłówek, kilka zdań o tym, czym się zajmuję, i przycisk prowadzący do strony kontaktowej.”
2. „Dodaj stronę usług z listą trzech sekcji.”
3. „Dodaj stronę kontaktową z numerem telefonu i linkiem do Telegrama.”
4. „Zmień styl: jasne tło i duża, czytelna czcionka.”

Sprawdzaj każdy krok, zanim przejdziesz do następnego — łatwiej wtedy zauważyć problem i wrócić do poprawiania. To, dlaczego mniejsze zadania są bardziej niezawodne i jak utrzymać AI na właściwym torze, należy do inżynierii kontekstu: im jaśniejsze zadanie i struktura projektu, tym bardziej przewidywalny rezultat.

Astro zapewnia AI wygodną strukturę: treść strony jest oddzielona od stylów, a strony powstają według wspólnych reguł. Dzięki takiej strukturze Claude rzadziej się gubi i rzadziej psuje coś w pobliżu podczas edycji jednego miejsca. Jeśli Claude nagle przestanie widzieć pliki albo zacznie odpowiadać nie na temat, przeczytaj przewodnik o tym, dlaczego Claude Code nie widzi plików projektu.

Astro to tylko jeden z elementów pracy z AI. Aby Claude konsekwentnie budował to, czego potrzebujesz, zamiast wracać do pozornie wiarygodnych zgadywanek, pełna konfiguracja projektu obejmuje: klon AI + drugi mózg + inżynierię kontekstu.

Jak wyświetlić podgląd strony przed publikacją?#

Zanim pokażesz stronę światu, wyświetl jej podgląd na własnym komputerze. Służy do tego serwer deweloperski Astro — pokazuje stronę na żywo bezpośrednio na twoim komputerze. Uruchom go poleceniem w terminalu, w folderze projektu:

npm run dev

Astro uruchomi lokalny podgląd i wyświetli adres w terminalu. Domyślnie jest to localhost:4321. Skopiuj adres, otwórz go w przeglądarce, a zobaczysz swoją stronę. Na razie możesz otworzyć ten adres tylko ty — nikt z zewnątrz nie ma do niego dostępu; to twoja wersja robocza.

Zaletą jest podgląd na żywo: Claude edytuje plik, a strona w przeglądarce aktualizuje się sama — nie musisz ręcznie jej odświeżać. Wszystko przebiega szybko: prosisz Claude, sprawdzasz w przeglądarce, wprowadzasz poprawkę i patrzysz ponownie. Na tym etapie dopracowujesz stronę. Gdy efekt ci odpowiada, opublikuj ją w internecie.

Jak bezpłatnie opublikować stronę Astro w internecie?#

Gotową stronę trzeba umieścić w miejscu, z którego inni będą mogli otworzyć ją za pomocą linku. Najłatwiejsza bezpłatna droga prowadzi przez GitHub: najpierw prześlij kod projektu do repozytorium, a potem podłącz usługę hostingową, która zbuduje i opublikuje stronę. Oto kolejność działań:

1. Utwórz repozytorium na GitHubie. Repozytorium to internetowe miejsce do przechowywania kodu, do którego przesyłasz pliki projektu. Claude Code może pomóc za pomocą instrukcji w zwykłym języku: poproś go, by „prześlij projekt do nowego repozytorium GitHub”, a zaproponuje polecenia. Jeśli nigdy wcześniej nie korzystałeś z GitHuba, miej pod ręką instrukcje rejestracji i logowania.
2. Podłącz hosting. Przejdź do jednej z usług (Netlify, Vercel), zaloguj się za pomocą konta GitHub i wybierz swoje repozytorium. Dokumentacja Astro opisuje tę metodę następująco: usługa hostingowa obserwuje repozytorium, buduje stronę i ją publikuje.
3. Sprawdź ustawienia builda. Zwykle usługa hostingowa rozpoznaje Astro i uzupełnia wymagane ustawienia. Jeśli poprosi o ich ręczne wpisanie, polecenie build z dokumentacji to astro build (lub npm run build), a gotowa strona trafia do folderu dist.
4. Kliknij „Opublikuj”. Usługa zbuduje stronę i poda link w rodzaju site-name.netlify.app. Każdy może otworzyć stronę pod tym adresem.

Oto dokładne brzmienie dokumentacji dotyczące podłączania repozytorium do usługi hostingowej:

Od tej pory publikacja odbywa się automatycznie: prześlij nową zmianę do repozytorium, a strona sama zostanie przebudowana i zaktualizowana; nie musisz niczego więcej klikać.

Jest też druga bezpłatna opcja — GitHub Pages, gdzie strona jest publikowana bezpośrednio z repozytorium za pomocą narzędzi GitHuba. Astro oferuje oficjalny szablon startowy:

W tej opcji strona otwiera się pod adresem takim jak your-name.github.io/repository-name, a później możesz podłączyć do niej własną domenę. Tutaj również możesz zlecić konfigurację Claude Code: opisz zadanie słowami, a przygotuje potrzebny plik.

Ile kosztuje zbudowanie strony w Astro?#

Porozmawiajmy teraz o kosztach. Astro jest darmowym narzędziem o otwartym kodzie źródłowym; nie ma osobnej ceny. Podstawowe usługi hostingowe również oferują bezpłatne opcje: GitHub Pages oraz plany startowe Netlify i Vercel, które zwykle wystarczają dla lekkiej strony Astro (bezpłatne plany mają limity ruchu, ale zwykle wystarczają dla lekkiej strony-wizytówki lub landing page’a).

W praktyce możesz zapłacić za dwie rzeczy, ale nie zawsze. Pierwsza to narzędzie AI, którego używasz do budowania strony. Druga to własna domena zamiast adresu takiego jak name.netlify.app; jest opcjonalna i kosztuje niewiele rocznie. Możesz przejść całą drogę od zbudowania strony do opublikowania jej w internecie, płacąc tylko za Claude.

O co jeszcze pytają w związku ze stronami Astro i Claude Code?#

Pełna konfiguracja vibe codingu: klon AI + drugi mózg + inżynieria kontekstu.

Poznaj Ailoot.