Web Astro přes Claude Code: od složky po zveřejnění
MarkdownNávod krok za krokem: jak vytvořit web pomocí Astro přes Claude Code, aniž byste uměli programovat. Co nainstalovat, jakým příkazem vytvořit projekt a jak ho zdarma publikovat.
Přečíst celý článek
Web pomocí Astro přes Claude Code dokáže vytvořit i člověk, který nikdy nenapsal ani řádek kódu. Kód ručně nepíšu už dlouho; všechno dělám pomocí slov přes AI a tvorba webu pomocí Astro funguje úplně stejně: vysvětlíte, co potřebujete, a Claude za vás napíše kód.
Problém obvykle není samotná tvorba webu, ale to, že je celý postup rozdělený na části. Jeden článek vysvětluje instalaci, jiný popisuje příkazy, třetí publikování a celý postup si člověk nedokáže poskládat dohromady. Tady vás provedu od prázdné složky až po web dostupný na internetu přes odkaz: co nainstalovat, jakým příkazem začít projekt, jak vytvořit stránky přes Claude Code a jak výsledek zdarma publikovat. Vycházím z oficiální dokumentace Astro.
O práci se službou se dozvíte v dokumentaci Ailoot.
Co potřebujete před vytvořením webu Astro v Claude Code?
Hlavní poznatek
Na počítači potřebujete tři věci: aktuální verzi Node.js, editor kódu a terminál. Node.js je prostředí, ve kterém tyto nástroje běží; v době psaní článku vyžaduje dokumentace Astro verzi 22.12.0 nebo novější a upozorňuje, že verze s lichým číslem, například 23, nejsou podporované. Editorem bývá VS Code, ve kterém funguje i Claude Code. Terminál je černé okno pro zadávání příkazů; je už součástí VS Code. Pro Astro nemusíte nic z toho instalovat zvlášť: pokud už jste s Claude Code něco vytvořili, vaše prostředí je připravené.
Samotné Astro nemusíte předem stahovat — stáhne se příkazem v dalším kroku. Potřebujete ale prostředí, ve kterém to všechno poběží. Astro popisuje začátek takto — potřebujete tři věci:
Node.js — verzi v22.12.0 nebo novější. Verze s lichým číslem, například v23, nejsou podporované. Textový editor — doporučujeme VS Code s naším oficiálním rozšířením Astro. Terminál — Astro se spravuje pomocí příkazového řádku.
Pojďme si projít, co to v praxi znamená:
- Node.js — program, bez kterého nepoběží Astro ani většina nástrojů pro vibe-coding. Stáhněte si ho z nodejs.org a nainstalujte jako běžnou aplikaci. Číslo verze požadované dokumentací se postupem času zvyšuje, proto před začátkem navštivte instalační stránku Astro a požadavky si ověřte. Potřebujete verzi se sudým číslem (22, 24); liché verze (23, 25) je lepší nepoužívat.
- VS Code — bezplatný editor od Microsoftu. Otevřete v něm složku projektu a spustíte v něm také Claude Code, který napíše kód.
- Terminál — okno, do kterého zadáváte příkazy. Nemusíte ho instalovat zvlášť: otevřete ho z nabídky ve VS Code a zadáváte v něm všechny níže uvedené příkazy.
Pokud už jste nainstalovali Claude Code a vytvořili v něm cokoli, tohle všechno už máte a tento krok můžete přeskočit. Pokud ne, mám samostatný návod jak nainstalovat Claude Code.
Jak vytvořit projekt Astro jediným příkazem?
Hlavní poznatek
Nový projekt vytvoříte v terminálu příkazem npm create astro@latest. Spustí se průvodce, který položí několik otázek (kam projekt nainstalovat, jakou šablonu použít a zda nainstalovat závislosti) a připraví základ projektu. Pokud složka projektu zatím neexistuje, průvodce ji vytvoří. Potom přejdete do složky projektu příkazem cd a můžete začít. Prázdnou složku nemusíte vytvářet předem.
Tady začíná samotný projekt a stačí k tomu jediný příkaz. Otevřete terminál a zadejte:
npm create astro@latest
Spustí se průvodce instalací. Dokumentace o něm říká:
Příkaz create astro můžete spustit kdekoli v počítači, takže nemusíte předem vytvářet prázdnou složku projektu. Pokud tato složka ještě neexistuje, průvodce vám ji automaticky pomůže vytvořit.
Průvodce vás provede jednotlivými kroky a položí několik otázek: jak pojmenovat složku projektu, s jakou šablonou začít a zda rovnou nainstalovat závislosti. U každé otázky můžete zvolit výchozí možnost — pro první web poslouží prázdná nebo minimalistická šablona. Pokud jste na otázku o instalaci závislostí odpověděli „ne“, nainstalujte je později ručně příkazem npm install ve složce projektu.
Až průvodce skončí, oznámí vytvoření projektu a navrhne další krok — přejít do složky projektu:
cd your-project-name
A tím je projekt vytvořený. Uvnitř už najdete funkční základ webu: několik souborů a složek, ze kterých se stránka sestavuje. Nebudete je muset ručně upravovat, ale je užitečné vědět, kde co je. Astro považuje za povinnou jedinou složku:
src/pages — povinná podsložka projektu. Bez ní web nebude mít žádné stránky ani cesty.
Jinými slovy, src/pages je složka se stránkami webu: domovskou stránkou, stránkou „o nás“ a kontaktní stránkou. Vedle ní obvykle najdete src/components (opakovaně použitelné prvky, například záhlaví a tlačítka), src/layouts (společnou strukturu stránek) a složku public pro obrázky a soubory. Rozložení si nemusíte pamatovat — stačí vědět, že stránky jsou v src/pages, a zmínit to, když Claudeovi zadáte: „přidej kontaktní stránku“.
Jak vytvořit samotný web přes Claude Code?
Hlavní poznatek
Otevřete složku projektu ve VS Code, spusťte Claude Code a slovy mu vysvětlete, co na webu potřebujete. Claude sám upravuje soubory v src/pages a sousedních složkách. Nejlépe fungují malé a jasné úkoly: „vytvoř domovskou stránku s nadpisem, krátkým popisem a tlačítkem“, potom „přidej stránku se službami“ a pak „změň barvy na tmavé“. Po každém zadání si výsledek prohlédněte v prohlížeči a případně ho upřesněte. Programovat nemusíte. Vaším úkolem je jasně zadávat instrukce a kontrolovat výsledek.
Základ projektu je hotový a teď z něj vytvoříte web. Toho se ujme Claude Code. Otevřete složku projektu ve VS Code, spusťte Claude Code a slovně popište, co potřebujete. Soubory v src/pages a sousedních složkách upraví sám — vy mu jen zadáváte úkoly a prohlížíte si výsledek.
Podle mých zkušeností funguje nejlépe postupovat po malých krocích. Jedno obrovské zadání jako „vytvoř mi firemní web“ skončí nepřehledným výsledkem, který se těžko opravuje. Rozdělte ho proto na krátké a jasné úkoly a zadávejte je po jednom:
- „Vytvoř domovskou stránku: velký nadpis, pár vět o tom, co dělám, a tlačítko odkazující na kontaktní stránku.“
- „Přidej stránku se službami a seznamem tří sekcí.“
- „Přidej kontaktní stránku s telefonním číslem a odkazem na Telegram.“
- „Uprav vzhled: světlé pozadí a velké, dobře čitelné písmo.“
Než přejdete dál, každý krok zkontrolujte — snáz tak zachytíte případnou chybu a vrátíte se k opravě. Proč jsou malé úkoly spolehlivější a jak udržet AI na správné cestě, vysvětluje práce s kontextem: čím jasnější jsou zadání a struktura projektu, tím předvídatelnější je výsledek.
Astro poskytuje AI strukturu, se kterou se jí dobře pracuje: obsah stránek je oddělený od stylů a stránky se vytvářejí podle společných pravidel. Díky tomu se Claude méně často ztrácí a při úpravě jednoho místa méně pravděpodobně poškodí něco poblíž. Pokud Claude najednou nevidí vaše soubory nebo odpovídá nesouvisejícím způsobem, přečtěte si návod proč Claude Code nevidí soubory projektu.
Astro je jen jedním stavebním kamenem práce s AI. Aby Claude soustavně vytvářel to, co potřebujete, a nespoléhal na věrohodně znějící odhady, úplné nastavení projektu zahrnuje: klon AI + Druhý mozek + Práce s kontextem.
Jak si web prohlédnout před zveřejněním?
Hlavní poznatek
Astro nabízí vývojový server, na kterém si web prohlédnete, než bude online. V terminálu ve složce projektu zadejte příkaz npm run dev a Astro spustí místní náhled — obvykle na localhostu na portu 4321. Otevřete tuto adresu v prohlížeči a uvidíte svůj web průběžně. Změny, které Claude provede v souborech, se ihned projeví: upravíte text a stránka se sama aktualizuje. Tento server vidíte pouze vy na svém počítači; web tak není zveřejněný na internetu.
Než web ukážete ostatním, prohlédnete si ho na vlastním počítači. Astro k tomu nabízí vývojový server — web zobrazuje průběžně přímo u vás. Spusťte ho příkazem v terminálu ve složce projektu:
npm run dev
Astro spustí místní náhled a v terminálu vypíše adresu. Ve výchozím nastavení je to localhost:4321. Zkopírujte adresu, otevřete ji v prohlížeči a uvidíte svůj web. Zatím ji můžete otevřít jen vy — nikdo zvenčí se k ní nedostane; jde o váš pracovní návrh.
Výhodou je, že náhled se aktualizuje průběžně: Claude upraví soubor a stránka v prohlížeči se sama obnoví; nemusíte ji ručně znovu načítat. Je to rychlé — zadáte Claudeovi úkol, podíváte se do prohlížeče, provedete opravu a znovu se podíváte. Právě v této fázi web dolaďujete. Až budete s výsledkem spokojení, zveřejněte ho online.
Jak zdarma zveřejnit web Astro online?
Hlavní poznatek
Nejjednodušší bezplatnou cestou je GitHub. Nejdřív nahrajte projekt do repozitáře na GitHubu (online úložiště kódu). Potom připojte hostingovou službu, která umí sestavovat weby Astro: Netlify, Vercel nebo přímo GitHub Pages. Hostingová služba Astro rozpozná, vytvoří web pomocí příkazu pro sestavení a zveřejní ho na vlastní adrese. Pokaždé, když pošlete do repozitáře novou změnu, web se automaticky znovu sestaví a aktualizuje. S nastavením vám může slovně pomoct i Claude Code.
Hotový web potřebujete umístit někam, odkud si ho ostatní otevřou přes odkaz. Nejjednodušší bezplatnou cestou je GitHub: nejprve nahrajete kód projektu do repozitáře, potom připojíte hostingovou službu, která web sestaví a zveřejní. Postup je následující:
- Vytvořte repozitář na GitHubu. Repozitář je online úložiště kódu, kam posíláte soubory projektu. Claude Code vám s tím může pomoct pomocí přirozeného jazyka: požádejte ho „nahraj projekt do nového repozitáře GitHub“ a navrhne příkazy. Pokud jste GitHub ještě nepoužívali, mějte po ruce pokyny k registraci a přihlášení.
- Připojte hosting. Přejděte na některou ze služeb (Netlify, Vercel), přihlaste se přes účet GitHub a vyberte svůj repozitář. Dokumentace Astro tuto metodu popisuje takto: hostingová služba sleduje váš repozitář, sestavuje web a zveřejňuje ho.
- Zkontrolujte nastavení sestavení. Hostingová služba obvykle Astro rozpozná a vyplní potřebné údaje. Pokud vás požádá o jejich ruční zadání, příkaz pro sestavení v dokumentaci je
astro build(nebonpm run build) a hotový web se uloží do složkydist. - Klikněte na „Zveřejnit“. Služba web sestaví a poskytne vám odkaz, například
site-name.netlify.app. Kdokoli může web na této adrese otevřít.
Přesné znění dokumentace o připojení repozitáře k hostingové službě:
Mnoho oblíbených hostingových služeb rozpozná váš projekt jako web Astro a automaticky zvolí odpovídající nastavení sestavení a nasazení. Hostingová služba sleduje hlavní větev vašeho repozitáře, při každé nové změně web znovu sestaví a znovu nasadí.
Potom se publikování automatizuje: pošlete do repozitáře novou změnu a web se sám znovu sestaví a aktualizuje; už není potřeba na nic dalšího klikat.
Existuje také druhá bezplatná možnost — GitHub Pages, kde se web zveřejňuje přímo z repozitáře pomocí nástrojů GitHubu. Astro pro tuto možnost nabízí oficiální výchozí šablonu:
Astro podporuje oficiální akci GitHub Actions pro nasazení projektu na GitHub Pages téměř bez konfigurace a jde o doporučený způsob nasazení na GitHub Pages.
V tomto případě se web otevře na adrese ve tvaru your-name.github.io/repository-name a později k ní můžete připojit vlastní doménu. I toto nastavení můžete zvládnout přes Claude Code: popište mu úkol slovy a připraví potřebný soubor.
Kolik stojí vytvoření webu Astro?
Hlavní poznatek
Samotné Astro je bezplatný open-source nástroj — neplatí se za něj. Bezplatný může být i základní hosting: GitHub Pages a základní tarify Netlify a Vercel, které stačí pro nenáročný web Astro. Skutečné výdaje představuje nástroj AI, se kterým web vytváříte (Claude), a případně vlastní doména místo bezplatné adresy hostingové služby. Minimální cesta k „vytvoření a zveřejnění webu“ je tedy možná bez placeného hostingu: platíte jen za AI.
Teď k ceně. Samotné Astro je bezplatný open-source nástroj; nemá žádnou samostatnou cenu. Bezplatné možnosti nabízí i základní hostingové služby: GitHub Pages a základní tarify Netlify a Vercel, které obvykle stačí pro nenáročný web Astro (bezplatné tarify mají limity provozu, ale zpravidla postačí pro jednoduchou vizitku nebo vstupní stránku).
V praxi tedy můžete platit za dvě věci, a ani to není vždy nutné. První je nástroj AI, se kterým web vytváříte. Druhou je vlastní doména namísto adresy typu name.netlify.app; ta je volitelná a stojí málo za rok. Web můžete vytvořit a zveřejnit online tak, že zaplatíte pouze za Claude.
Na co dalšího se lidé ptají o webech Astro a Claude Code?
Hlavní poznatek
Stručné odpovědi na časté otázky. Programovat nemusíte: Claude píše kód a vy mu slovně zadáváte úkoly a kontrolujete výsledek. Hotový web zůstává ve vašich souborech a může běžet na libovolné hostingové službě; nejste uzamčeni na platformě někoho jiného. Astro se hodí pro obsahový web — vizitku, vstupní stránku, blog nebo prezentaci; pro složitou osobní sekci je lepší zvolit jiný nástroj. Hotový web můžete také zdarma zveřejnit přes GitHub.
Často kladené otázky
Musíte umět programovat, abyste vytvořili web pomocí Astro přes Claude Code?
Ne. Kód ručně nepíšu už dlouho; všechno dělám přes AI. Zadáte úkol slovy — „vytvoř domovskou stránku s takovým nadpisem“ — a Claude Code za vás napíše a upraví soubory. Syntax znát nemusíte. Potřebujete vědět, jaký web chcete, a v prohlížeči kontrolovat výsledek.
Musíte složku projektu vytvořit předem?
Ne. Příkaz npm create astro@latest spustí průvodce, který složku vytvoří, pokud ještě neexistuje. Příkaz můžete spustit kdekoli v počítači. Po jejím vytvoření přejděte do složky projektu příkazem cd a pracujte v ní.
Jak si můžete web prohlédnout, než bude online?
Ve složce projektu spusťte příkaz npm run dev. Astro spustí místní náhled, obvykle na adrese localhost:4321, a web si můžete otevřít v prohlížeči na vlastním počítači. Tento náhled vidíte jen vy; změny se průběžně promítají a stránku nemusíte ručně znovu načítat.
Můžete web Astro zveřejnit zdarma?
Ano. Nejjednodušší cestou je nahrát projekt do repozitáře GitHub a připojit bezplatný hosting: GitHub Pages, Netlify nebo Vercel. Hostingová služba web sestaví a zveřejní na vlastní adrese. Za hosting nenáročného webu nemusíte platit zvlášť; náklady vzniknou pouze tehdy, když chcete vlastní doménu.
Hodí se Astro pro každý druh webu?
Astro je určené pro obsahové weby: vizitky, vstupní stránky, blogy, portfolia a prezentace internetových obchodů. Tam vyniká. Pokud je jádrem projektu složitá webová aplikace s osobní sekcí a mnoha akcemi na každém tlačítku, obvykle se tato část vytváří pomocí jiného nástroje. O přednostech a slabinách Astro píšu podrobněji v článku o tom, co je Astro.
V čem je Astro pro vibe-coding lepší než nástroj jako Tilda?
Rozdíl je v tom, co vám zůstane. Web Astro tvoří vaše soubory, které máte uložené u sebe a můžete je zveřejnit na libovolné hostingové službě; žádná služba třetí strany je nedrží. Když se budete chtít za šest měsíců přesunout nebo provést změny, můžete všechno otevřít v libovolném nástroji. Výběr mezi Astro a dalšími nástroji vychází z obecného přístupu k vibe-codingu: vyberte nástroj pro konkrétní úkol. Přehled nástrojů najdete v návodu k alternativám Claude Code.
Zdroje
Úplné nastavení pro vibe-coding: klon AI + Druhý mozek + Práce s kontextem.
Seznamte se s Ailoot.
Další podrobnosti
Časté otázky
Publikuje místní náhled Astro web na internetu?
Ne. npm run dev spustí místní vývojový náhled a vypíše jeho adresu, obvykle localhost:4321. Publikování je samostatný krok přes hostingovou službu nebo nasazovací postup GitHub Pages.
Jaké nastavení sestavení zkontrolovat u hostingu Astro?
Pro zde popsaný statický web ověřte příkaz astro build nebo npm run build a publikování adresáře dist. Po nasazení otevřete veřejnou URL hostingu a zkontrolujte tam stránky; samotný místní náhled publikování neověřuje.