Web Astro cez Claude Code: od priečinka po publikovanie

Aj človek, ktorý nikdy nenapísal ani riadok kódu, môže vytvoriť web pomocou Astro cez Claude Code. Už dávno nepíšem kód ručne; všetko robím pomocou slov a AI a tvorba webu s Astro funguje rovnako: vysvetlíte, čo potrebujete, a Claude za vás napíše kód.

Problém zvyčajne nie je samotná tvorba, ale to, že celý postup je rozdelený na časti. Jeden článok vysvetľuje inštaláciu, iný sa venuje príkazom, tretí publikovaniu, a celý postup sa vám nikdy neposkladá v hlave. Tu vás prevediem od prázdneho priečinka až po web, ktorý sa otvorí na internete cez odkaz: čo nainštalovať, aký príkaz použiť na začatie projektu, ako vytvárať stránky cez Claude Code a ako výsledok bezplatne publikovať. Vychádzam z oficiálnej dokumentácie Astro.

Informácie o práci so službou nájdete v dokumentácii Ailoot.

Čo potrebujete pred začiatkom?#

Samotné Astro od vás nežiada, aby ste si vopred niečo stiahli — stiahne sa pomocou príkazu v nasledujúcom kroku. Potrebujete však prostredie, v ktorom to všetko funguje. Astro opisuje začiatok takto — potrebujete tri veci:

Pozrime sa, čo každý z týchto pojmov znamená v praxi:

1. Node.js — program, bez ktorého nefunguje Astro ani väčšina nástrojov na vibe-coding. Stiahnite si ho z nodejs.org a nainštalujte ako bežnú aplikáciu. Číslo verzie v dokumentácii sa časom zvyšuje, preto pred začiatkom navštívte stránku inštalácie Astro a skontrolujte požiadavky. Potrebujete párnu verziu (22, 24); nepárnym verziám (23, 25) sa radšej vyhnite.
2. VS Code — bezplatný editor od Microsoftu. Otvoríte v ňom priečinok projektu a funguje tam aj Claude Code, ktoré napíše kód.
3. Terminál — okno, do ktorého zadávate príkazy. Nemusíte ho inštalovať osobitne: otvoríte ho z ponuky vo VS Code a zadávate v ňom všetky nižšie uvedené príkazy.

Ak ste už nainštalovali Claude Code a vytvorili čokoľvek, toto všetko už máte a tento krok môžete preskočiť. Ak nie, mám samostatný návod na inštaláciu Claude Code.

Ako vytvoriť projekt Astro jedným príkazom?#

Tu sa začína samotný projekt a stačí na to jediný príkaz. Otvorte terminál a zadajte:

npm create astro@latest

Spustí sa sprievodca inštaláciou. Dokumentácia o ňom hovorí toto:

Sprievodca vás prevedie jednotlivými krokmi a položí niekoľko otázok: ako pomenovať priečinok projektu, s ktorou šablónou začať a či hneď nainštalovať závislosti. Pri každej otázke môžete vybrať predvolené možnosti — na prvý web postačí prázdna alebo minimálna šablóna. Ak ste na otázku o inštalácii závislostí odpovedali „nie“, nainštalujte ich neskôr ručne spustením príkazu npm install v priečinku projektu.

Po dokončení sprievodca oznámi, že projekt bol vytvorený, a navrhne ďalší krok — presun do priečinka projektu:

cd your-project-name

Tým je vytvorenie projektu hotové. Vo vnútri už nájdete funkčný základ webu: niekoľko súborov a priečinkov, ktoré slúžia na vytvorenie stránky. Nebudete ich musieť upravovať ručne, ale je užitočné vedieť, čo sa kde nachádza. Astro považuje za povinný iba jeden priečinok:

Inými slovami, src/pages je priečinok obsahujúci stránky webu: domovskú stránku, stránku „o nás“ a kontaktné stránky. Neďaleko sa zvyčajne nachádzajú aj src/components (opakovane použiteľné prvky, ako sú hlavičky a tlačidlá), src/layouts (spoločná štruktúra stránok) a priečinok public na obrázky a súbory. Rozloženie si nemusíte pamätať — stačí vedieť, že stránky sú v src/pages, a pri požiadavke pre Claude sa naň odvolať: „pridaj kontaktnú stránku“.

Ako vytvoriť samotný web cez Claude Code?#

Základ projektu je pripravený; teraz na jeho základe vytvoríte web a prácu prevezme Claude Code. Otvorte priečinok projektu vo VS Code, spustite Claude Code a slovami opíšte, čo potrebujete. Samo upraví súbory v src/pages a susedných priečinkoch — vy mu len zadávate úlohy a pozeráte sa na výsledok.

Podľa mojich skúseností je najlepšie pracovať po malých krokoch. Jedna obrovská požiadavka typu „vytvor mi firemný web“ skončí zmätkom, ktorý sa ťažko opravuje. Rozdeľte ju preto na krátke a jasné úlohy a zadávajte ich po jednej:

1. „Vytvor domovskú stránku: veľký nadpis, pár viet o tom, čo robím, a tlačidlo odkazujúce na stránku s kontaktmi.“
2. „Pridaj stránku so službami a zoznamom troch sekcií.“
3. „Pridaj kontaktnú stránku s telefónnym číslom a odkazom na Telegram.“
4. „Zmeň štýl: svetlé pozadie a veľké, dobre čitateľné písmo.“

Každý krok skontrolujte predtým, ako pokračujete — ľahšie tak zistíte, keď sa niečo pokazí, a môžete sa vrátiť späť. Prečo sú malé úlohy spoľahlivejšie a ako udržať AI na správnej ceste, patrí do oblasti context engineering: čím jasnejšia je úloha a štruktúra projektu, tým predvídateľnejší bude výsledok.

Astro poskytuje AI štruktúru, ktorá jej uľahčuje prácu: obsah stránky je oddelený od štýlov a stránky sa vytvárajú podľa spoločných pravidiel. Vďaka tejto štruktúre sa Claude menej často pomýli a pri úprave jedného miesta je menej pravdepodobné, že pokazí niečo v jeho okolí. Ak Claude zrazu prestane vidieť vaše súbory alebo odpovedá nesúvisle, pozrite si návod prečo Claude Code nevidí súbory projektu.

Ako si pozrieť web pred publikovaním?#

Skôr než web ukážete svetu, prezriete si ho vo vlastnom počítači. Astro na to má vývojový server — zobrazuje web v reálnom čase priamo vo vašom počítači. Spustite ho príkazom v termináli, v priečinku projektu:

npm run dev

Astro spustí lokálny náhľad a vypíše adresu v termináli. Predvolená adresa je localhost:4321. Skopírujte ju, otvorte v prehliadači a uvidíte svoj web. Zatiaľ ju môžete otvoriť iba vy — nikto zvonku k nej nemá prístup; toto je váš koncept.

Výhodou je, že náhľad sa aktualizuje priebežne: Claude upraví súbor a stránka v prehliadači sa sama obnoví, takže ju nemusíte obnovovať ručne. Je to rýchle — zadáte Claude požiadavku, pozriete sa do prehliadača, niečo opravíte, znova sa pozriete; práve v tejto fáze web dolaďujete. Keď ste s výsledkom spokojní, publikujte ho online.

Ako bezplatne publikovať web Astro online?#

Hotový web musíte umiestniť niekam, kde ho ostatní otvoria cez odkaz. Najjednoduchšia bezplatná cesta vedie cez GitHub: najprv nahrajte kód projektu do úložiska a potom pripojte hostingovú službu, ktorá web zostaví a zverejní. Postup je takýto:

1. Vytvorte úložisko na GitHube. Úložisko je online miesto na ukladanie kódu, kam posielate súbory projektu. Claude Code vám s tým môže pomôcť pomocou pokynov v prirodzenom jazyku: požiadajte ho, aby „nahral projekt do nového úložiska GitHub“, a navrhne vám príkazy. Ak ste GitHub ešte nikdy nepoužívali, majte poruke pokyny na registráciu a prihlásenie.
2. Pripojte hosting. Prejdite na jednu zo služieb (Netlify, Vercel), prihláste sa cez svoj účet GitHub a vyberte úložisko. Dokumentácia Astro túto metódu opisuje takto: hostingová služba sleduje vaše úložisko, zostaví web a zverejní ho.
3. Skontrolujte nastavenia zostavenia. Hostingová služba zvyčajne rozpozná Astro a doplní potrebné údaje. Ak vás požiada o ich ručné zadanie, príkaz na zostavenie v dokumentácii je astro build (alebo npm run build) a hotový web sa umiestni do priečinka dist.
4. Kliknite na „Publikovať“. Služba zostaví web a poskytne vám odkaz, napríklad site-name.netlify.app. Web si na tejto adrese môže otvoriť ktokoľvek.

Presné znenie dokumentácie o pripojení úložiska k hostingovej službe:

Potom bude publikovanie automatické: odošlite do úložiska novú zmenu a web sa sám znova zostaví a aktualizuje; už nemusíte nič ďalšie klikať.

Existuje aj druhá bezplatná možnosť — GitHub Pages, kde sa web publikuje priamo z úložiska pomocou vlastných nástrojov GitHubu. Astro má preň oficiálnu štartovaciu šablónu:

Pri tejto možnosti sa web otvorí na adrese typu your-name.github.io/repository-name a neskôr k nemu môžete pripojiť vlastnú doménu. Aj toto nastavenie môžete zariadiť cez Claude Code: opíšte mu úlohu slovami a pripraví potrebný súbor.

Koľko stojí vytvorenie webu Astro?#

Teraz sa pozrime na náklady. Astro je bezplatný nástroj s otvoreným zdrojovým kódom; nemá samostatnú cenu. Aj základné hostingové služby ponúkajú bezplatné možnosti: GitHub Pages a základné programy služieb Netlify a Vercel, ktoré zvyčajne postačujú pre nenáročný web Astro (bezplatné programy majú limity návštevnosti, ale zvyčajne postačujú pre jednoduchý vizitkový web alebo vstupnú stránku).

V praxi môžete platiť za dve veci, a ani to nie vždy. Prvou je nástroj AI, ktorý používate na vytvorenie webu. Druhou je vlastná doména namiesto adresy typu name.netlify.app; je voliteľná a stojí málo za rok. Celý postup „vytvoriť web a publikovať ho online“ môžete absolvovať tak, že zaplatíte iba za Claude.

Na čo ďalšie sa ľudia pýtajú o weboch Astro a Claude Code?#

Spoznajte Ailoot.