# Spletno mesto Astro prek Claude Code: od mape do objave > Navodila po korakih: kako ustvariti spletno mesto z Astrom prek Claude Code, ne da bi znali programirati. Kaj namestiti, kateri ukaz uporabiti za ustvarjanje projekta in kako ga brezplačno objaviti. Source: https://ailoot.ai/blog/sl/astro-site-with-claude-code/ Canonical: https://ailoot.ai/blog/sl/astro-site-with-claude-code/ Language: sl Publisher: Ailoot (https://ailoot.ai/) Translation: guide-149 Revision: sha256-071c501314fe4093b9e84c76dcd31765ba125e033fa473d304222dc7a6c465fe Spletno mesto z Astrom prek Claude Code lahko ustvari tudi nekdo, ki še nikoli ni napisal niti vrstice kode. Že dolgo ne pišem več kode ročno; vse počnem z besedami prek umetne inteligence in ustvarjanje spletnega mesta z Astrom deluje enako: razložite, kaj potrebujete, Claude pa namesto vas napiše kodo. Težava običajno ni samo ustvarjanje, temveč to, da je postopek razdeljen na več delov. En članek pojasni namestitev, drugi obravnava ukaze, tretji objavo, celoten potek pa se vam nikoli ne izoblikuje v glavi. Tukaj vas popeljem od prazne mape do spletnega mesta, ki ga lahko odprete na internetu prek povezave: kaj namestiti, kateri ukaz uporabiti za začetek projekta, kako ustvariti strani s Claude Code in kako rezultat brezplačno objaviti. Opiram se na uradno dokumentacijo Astro. O delu s storitvijo preberite v [dokumentaciji Ailoot](https://ailoot.ai/docs/). ## Kaj potrebujete pred začetkom?
Ključne ugotovitve V računalniku potrebujete tri stvari: novejšo različico Node.js, urejevalnik kode in terminal. Node.js je okolje, v katerem se ta orodja izvajajo; ob pisanju dokumentacija Astro zahteva različico 22.12.0 ali novejšo in opozarja, da različice z lihimi številkami, kot je 23, niso podprte. Urejevalnik je običajno VS Code, v katerem deluje tudi Claude Code. Terminal je črno okno za vnašanje ukazov; že vgrajen je v VS Code. Za Astro vam vsega tega ni treba nameščati posebej: če ste s Claude Code že kaj ustvarili, je vaše okolje pripravljeno.
Astro sam ne zahteva, da bi karkoli prenesli vnaprej — to bo prenesel ukaz v naslednjem koraku. Potrebujete pa okolje, v katerem vse to deluje. Astro začetek opiše takole — potrebujete tri stvari:

Node.js — različica v22.12.0 ali novejša. Različice z lihimi številkami, kot je v23, niso podprte. Urejevalnik besedila — priporočamo VS Code z našo uradno razširitvijo za Astro. Terminal — Astro upravljate prek ukazne vrstice.

— Dokumentacija Astro, razdelek o namestitvi, https://docs.astro.build/en/install-and-setup/
Poglejmo, kaj vsaka od teh stvari pomeni v praksi: 1. **Node.js** — program, brez katerega ne delujeta ne Astro ne večina orodij za vibe-coding. Prenesite ga s spletnega mesta nodejs.org in namestite kot običajen program. Številka različice v dokumentaciji se sčasoma zvišuje, zato pred začetkom obiščite stran za namestitev Astro in preverite zahtevo. Potrebujete različico s sodo številko (22, 24); lihoštevilčnim različicam (23, 25) se je bolje izogniti. 2. **VS Code** — brezplačen urejevalnik podjetja Microsoft. V njem odprete mapo projekta, tam pa deluje tudi Claude Code, ki bo napisal kodo. 3. **Terminal** — okno za vnašanje ukazov. Namestiti ga ni treba posebej: odprete ga v meniju VS Code, tam pa vnesete vse spodnje ukaze. Če ste Claude Code že namestili in z njim karkoli ustvarili, vse to že imate, zato lahko ta korak preskočite. Če ne, imam ločen vodič o [namestitvi Claude Code](https://ailoot.ai/blog/sl/install-claude-code/). ## Kako ustvariti projekt Astro z enim ukazom?
Ključne ugotovitve Nov projekt ustvarite z ukazom `npm create astro@latest` v terminalu. Zažene se čarovnik, ki zastavi nekaj vprašanj (kam naj se projekt namesti, katero predlogo naj uporabi, ali naj namesti odvisnosti), nato pa za vas ustvari ogrodje projekta. Če mapa projekta še ne obstaja, jo bo ustvaril čarovnik. Nato se z ukazom `cd` premaknete v mapo projekta in lahko začnete. Prazne mape vam ni treba ustvariti vnaprej.
Tukaj se začne sam projekt, za to pa potrebujete samo en ukaz. Odprite terminal in vnesite: ```bash npm create astro@latest ``` Zagnal se bo čarovnik za namestitev. Dokumentacija o njem pravi:

Ukaz create astro lahko zaženete kjerkoli v računalniku, zato vam ni treba vnaprej ustvariti prazne mape projekta. Če ta mapa še ne obstaja, vam jo bo čarovnik pomagal ustvariti samodejno.

— Dokumentacija Astro, razdelek o namestitvi, https://docs.astro.build/en/install-and-setup/
Čarovnik vas bo vodil skozi korake in zastavil nekaj vprašanj: kako poimenovati mapo projekta, katero predlogo uporabiti za začetek in ali takoj namestiti odvisnosti. Pri vsakem vprašanju lahko izberete privzeto možnost — za vaše prvo spletno mesto bo zadostovala prazna ali minimalna predloga. Če ste na vprašanje o namestitvi odvisnosti odgovorili z »ne«, jih pozneje ročno namestite tako, da v mapi projekta zaženete ukaz `npm install`. Ko čarovnik konča, vam bo sporočil, da je projekt ustvarjen, in predlagal naslednji korak — premik v mapo projekta: ```bash cd your-project-name ``` To je vse, kar je potrebno za ustvarjanje projekta. V njem je že pripravljeno delujoče ogrodje spletnega mesta: več datotek in map, uporabljenih za ustvarjanje strani. Ročno jih ne bo treba urejati, koristno pa je vedeti, kaj je kje. Astro kot obvezno zahteva samo eno mapo:

src/pages — obvezna podmapa projekta. Brez nje spletno mesto ne bo imelo ne strani ne poti.

— Dokumentacija Astro, razdelek o strukturi projekta, https://docs.astro.build/en/basics/project-structure/
Z drugimi besedami, mapa `src/pages` vsebuje strani spletnega mesta: domačo stran, stran »o nas« in kontaktno stran. V bližini so običajno še `src/components` (ponovno uporabni deli, kot so glave in gumbi), `src/layouts` (skupno ogrodje strani) ter mapa `public` za slike in datoteke. Strukture vam ni treba znati na pamet — zapomnite si le, da so strani v `src/pages`, in se na to sklicujte, ko prosite Claude: »dodaj kontaktno stran«. ## Kako s Claude Code ustvariti samo spletno mesto?
Ključne ugotovitve Odprite mapo projekta v VS Code, zaženite Claude Code in z besedami opišite, kaj potrebujete na spletnem mestu. Claude sam ureja datoteke v `src/pages` in sosednjih mapah. Najbolje deluje z majhnimi in jasnimi nalogami: »ustvari domačo stran z naslovom, kratkim opisom in gumbom«, nato »dodaj stran s storitvami« in potem »spremeni barve v temne«. Po vsaki zahtevi si oglejte rezultat v brskalniku in po potrebi pojasnite dodatne podrobnosti. Tukaj vam ni treba programirati. Vaša naloga je, da podate jasna navodila in preverite rezultat.
Ogrodje je pripravljeno; zdaj na njegovi podlagi nastane vaše spletno mesto, delo pa prevzame Claude Code. Odprite mapo projekta v VS Code, zaženite Claude Code in z besedami opišite, kaj potrebujete. Claude sam ureja datoteke v `src/pages` in sosednjih mapah — vi mu samo dodeljujete naloge in preverjate rezultat. Po mojih izkušnjah najbolje deluje delo po majhnih korakih. Ena sama velika zahteva, kot je »naredi mi spletno mesto za podjetje«, se konča z zmedo, ki jo je težko popraviti. Zato jo razdelite na kratke in jasne naloge ter jih podajajte eno za drugo: 1. »Ustvari domačo stran: velik naslov, nekaj stavkov o tem, kaj počnem, in gumb s povezavo do kontaktne strani.« 2. »Dodaj stran s storitvami in seznamom treh razdelkov.« 3. »Dodaj kontaktno stran s telefonsko številko in povezavo do Telegrama.« 4. »Spremeni slog: svetlo ozadje in velika, berljiva pisava.« Preden nadaljujete, preverite vsak korak — tako boste lažje opazili napako in se vrnili nazaj. Zakaj so majhne naloge zanesljivejše in kako AI usmerjati, je del inženiringa konteksta: jasnejša ko sta naloga in struktura projekta, bolj predvidljiv je rezultat. Astro AI-ju zagotovi strukturo, ki mu olajša delo: vsebina strani je ločena od oblikovanja, strani pa so zgrajene po skupnih pravilih. Zaradi te strukture je Claude redkeje zmeden in manj verjetno je, da bo pri urejanju enega mesta pokvaril kaj v bližini. Če Claude nenadoma ne vidi več vaših datotek ali odgovarja nepovezano, preberite vodič o tem, [zakaj Claude Code ne vidi datotek projekta](https://ailoot.ai/blog/sl/claude-code-cant-see-project-files/). Astro je samo eden od gradnikov dela z AI. Da bo Claude dosledno ustvarjal to, kar potrebujete, in se ne bo zatekal k verjetnim ugibanjem, popolna nastavitev projekta vključuje: **klon AI + Second Brain + inženiring konteksta**. ## Kako si ogledati predogled spletnega mesta pred objavo?
Ključne ugotovitve Za ogled spletnega mesta, preden je objavljeno na spletu, Astro ponuja razvojni strežnik. V terminalu znotraj mape projekta vnesite ukaz `npm run dev` in Astro bo zagnal lokalni predogled — običajno na localhostu na vratih 4321. Odprite ta naslov v brskalniku in si oglejte spletno mesto v živo. Claude sproti upošteva spremembe datotek: spremenite besedilo in stran se samodejno posodobi. Ta strežnik je viden samo vam v vašem računalniku; spletnega mesta ne objavi na internetu.
Preden spletno mesto pokažete svetu, si ga oglejte v svojem računalniku. Astro za to ponuja razvojni strežnik — na vašem računalniku prikazuje spletno mesto v živo. Zaženite ga z ukazom v terminalu, znotraj mape projekta: ```bash npm run dev ``` Astro bo zagnal lokalni predogled in v terminal izpisal naslov. Privzeto je to `localhost:4321`. Kopirajte naslov, odprite ga v brskalniku in videli boste svoje spletno mesto. Za zdaj ga lahko odprete samo vi — nihče zunaj nima dostopa; to je vaš osnutek. Priročno je, da se predogled sproti posodablja: Claude uredi datoteko, stran v brskalniku pa se samodejno osveži; ni je treba ročno znova naložiti. Delo je hitro — vprašajte Claude, poglejte v brskalniku, popravite in znova poglejte; na tej stopnji spletno mesto izpopolnite. Ko ste z rezultatom zadovoljni, ga objavite na spletu. ## Kako brezplačno objaviti spletno mesto Astro na spletu?
Ključne ugotovitve Najpreprostejša brezplačna pot je prek GitHuba. Najprej naložite projekt v repozitorij na GitHubu (spletno shrambo kode). Nato povežite storitev gostovanja, ki zna zgraditi spletno mesto Astro: Netlify, Vercel ali sam GitHub Pages. Storitev gostovanja prepozna Astro, zgradi spletno mesto z ukazom za gradnjo in ga objavi na svojem naslovu. Vsakič, ko v repozitorij pošljete novo spremembo, se spletno mesto samodejno znova zgradi in posodobi. Tudi pri nastavitvi vsega tega vam lahko Claude Code pomaga z navodili v naravnem jeziku.
Končano spletno mesto morate nekam namestiti, da ga lahko drugi odprejo prek povezave. Najlažja brezplačna pot je prek GitHuba: najprej naložite kodo projekta v repozitorij, nato povežite storitev gostovanja, ki spletno mesto zgradi in objavi. Postopek je takšen: 1. **Ustvarite repozitorij na GitHubu.** Repozitorij je spletna shramba kode, kamor pošljete datoteke projekta. Pri tem vam lahko Claude Code pomaga z navodili v naravnem jeziku: prosite ga, naj »naloži projekt v nov repozitorij GitHub«, in predlagal bo ukaze. Če GitHuba še nikoli niste uporabljali, imejte pri roki navodila za registracijo in prijavo. 2. **Povežite gostovanje.** Obiščite eno od storitev (Netlify, Vercel), se prijavite prek računa GitHub in izberite svoj repozitorij. Dokumentacija Astro to metodo opisuje takole: storitev gostovanja spremlja vaš repozitorij, zgradi spletno mesto in ga objavi. 3. **Preverite nastavitve gradnje.** Storitev gostovanja običajno prepozna Astro in izpolni potrebne nastavitve. Če jih morate vnesti ročno, je ukaz za gradnjo v dokumentaciji `astro build` (ali `npm run build`), končano spletno mesto pa se shrani v mapo `dist`. 4. **Kliknite »Objavi«.** Storitev bo zgradila spletno mesto in vam dala povezavo, kot je `site-name.netlify.app`. Spletno mesto lahko na tem naslovu odpre kdorkoli. Tukaj je natančno besedilo dokumentacije o povezovanju repozitorija s storitvijo gostovanja:

Številne priljubljene storitve gostovanja bodo vaš projekt prepoznale kot spletno mesto Astro in samodejno izbrale ustrezne nastavitve gradnje in objave. Storitev gostovanja bo spremljala glavno vejo vašega repozitorija, znova zgradila spletno mesto in ga znova objavila ob vsaki novi spremembi.

— Dokumentacija Astro, razdelek o objavi, https://docs.astro.build/en/guides/deploy/
Nato objava postane samodejna: pošljite novo spremembo v repozitorij, spletno mesto pa se znova zgradi in posodobi samo; klikniti vam ni treba ničesar več. Obstaja tudi druga brezplačna možnost — **GitHub Pages**, kjer je spletno mesto objavljeno neposredno iz repozitorija z GitHubovimi orodji. Astro ima uradno začetno predlogo zanj:

Astro podpira uradno GitHub Action za objavo projekta na GitHub Pages s skoraj nič konfiguracije; to je priporočeni način objave na GitHub Pages.

— Dokumentacija Astro, razdelek o objavi na GitHub Pages, https://docs.astro.build/en/guides/deploy/github/
Pri tej možnosti se spletno mesto odpre na naslovu, kot je `your-name.github.io/repository-name`, pozneje pa lahko povežete svojo domeno. Tudi tukaj lahko nastavitev uredite prek Claude Code: z besedami opišite nalogo, on pa pripravi potrebno datoteko. ## Koliko stane izdelava spletnega mesta Astro?
Ključne ugotovitve Astro je brezplačen in odprtokoden — uporaba je brezplačna. Tudi osnovno gostovanje je lahko brezplačno: GitHub Pages ter začetni paketi storitev Netlify in Vercel zadostujejo za manjše spletno mesto Astro. Dejanski stroški so povezani z orodjem AI, ki ga uporabljate za izdelavo spletnega mesta (Claude), in po želji z lastno domeno namesto brezplačnega naslova storitve gostovanja. Najcenejša pot za »izdelavo in objavo spletnega mesta« je torej mogoča brez plačila gostovanja: plačate samo AI.
Zdaj pa spregovorimo o denarju. Astro je brezplačno odprtokodno orodje; zanj ni ločene cene. Tudi osnovne storitve gostovanja ponujajo brezplačne možnosti: GitHub Pages ter začetne pakete storitev Netlify in Vercel, ki običajno zadostujejo za manjše spletno mesto Astro (brezplačni paketi imajo omejitve prometa, vendar so navadno dovolj za preprosto predstavitveno spletno mesto ali pristajalno stran). V praksi lahko torej plačate za dve stvari, pa še to ne vedno. Prva je orodje AI, ki ga uporabljate za izdelavo spletnega mesta. Druga je lastna domena namesto naslova, kot je `name.netlify.app`; ta ni obvezna in stane malo na leto. Celoten postopek »izdelaj spletno mesto in ga objavi na spletu« lahko opravite tako, da plačate samo Claude. ## Kaj ljudje še sprašujejo o spletnih mestih Astro in Claude Code?
Ključne ugotovitve Kratki odgovori na pogosta vprašanja. Ni vam treba znati programirati: Claude napiše kodo, vi pa mu z besedami podajate naloge in preverjate rezultat. Končno spletno mesto ostane v vaših datotekah in ga lahko namestite pri katerikoli storitvi gostovanja; niste vezani na platformo nekoga drugega. Astro je primeren za spletna mesta z vsebino — predstavitvena spletna mesta, pristajalne strani, bloge ali predstavitve; za zapleteno območje osebnega računa je bolje uporabiti drugo rešitev. Končano spletno mesto lahko brezplačno objavite prek GitHuba.
### Pogosta vprašanja Ali morate znati programirati, da ustvarite spletno mesto z Astrom prek Claude Code? Ne. Že dolgo ne pišem več kode ročno; vse počnem prek AI. Nalogo opišete z besedami — »ustvari domačo stran s takšnim naslovom« — Claude Code pa namesto vas napiše in uredi datoteke. Sintakse vam ni treba poznati. Razumeti morate, kakšno spletno mesto želite, in v brskalniku preveriti, kaj ste dobili. Ali morate mapo projekta ustvariti vnaprej? Ne. Ukaz `npm create astro@latest` zažene čarovnika, ki sam ustvari mapo, če še ne obstaja. Ukaz lahko zaženete kjerkoli v računalniku. Ko je mapa ustvarjena, se z ukazom `cd` premaknite v mapo projekta in delajte v njej. Kako si lahko ogledate spletno mesto, preden gre na splet? V mapi projekta zaženite ukaz `npm run dev`. Astro bo zagnal lokalni predogled, običajno na naslovu localhost:4321, spletno mesto pa lahko odprete v brskalniku na svojem računalniku. Ta predogled vidite samo vi; spremembe se sproti uveljavijo in strani vam ni treba ročno osveževati. Ali lahko spletno mesto Astro objavite brezplačno? Da. Najpreprostejša pot je, da projekt naložite v repozitorij GitHub in ga povežete z brezplačnim gostovanjem: GitHub Pages, Netlify ali Vercel. Storitev gostovanja bo zgradila spletno mesto in ga objavila na svojem naslovu. Za gostovanje manjšega spletnega mesta vam ni treba plačati posebej; stroški nastanejo samo, če želite lastno domeno. Ali je Astro primeren za vsako vrsto spletnega mesta? Astro je namenjen spletnim mestom z vsebino: predstavitvenim spletnim mestom, pristajalnim stranem, blogom, portfeljem in predstavitvam spletnih trgovin. Pri tem se najbolje izkaže. Če je jedro projekta zapletena spletna aplikacija z območjem osebnega računa in številnimi dejanji pri vsakem gumbu, je ta del običajno zgrajen z drugim orodjem. O prednostih in slabostih Astro podrobneje pišem v članku o tem, kaj je Astro. V čem je Astro za vibe-coding boljši od orodja za izdelavo spletnih mest, kot je Tilda? Razlika je v tem, kaj vam ostane. Spletno mesto Astro je sestavljeno iz vaših datotek, ki jih shranjujete pri sebi in jih lahko objavite pri katerikoli storitvi gostovanja; nobena storitev tretje osebe jih ne hrani. Če se želite čez šest mesecev preseliti ali kaj spremeniti, lahko vse odprete s katerimkoli orodjem. Izbira med Astrom in drugimi orodji je odvisna od splošnega pristopa k vibe-codingu: za nalogo izberite ustrezno orodje. Pregled orodij najdete v vodiču po alternativah Claude Code.
### Viri - [Dokumentacija Astro, namestitev in zahteve](https://docs.astro.build/en/install-and-setup/) - [Dokumentacija Astro, vmesnik ukazne vrstice](https://docs.astro.build/en/reference/cli-reference/) - [Dokumentacija Astro, struktura projekta](https://docs.astro.build/en/basics/project-structure/) - [Dokumentacija Astro, objava spletnega mesta](https://docs.astro.build/en/guides/deploy/) - [Dokumentacija Astro, objava na GitHub Pages](https://docs.astro.build/en/guides/deploy/github/) - [Dokumentacija Astro, »Why Astro?«](https://docs.astro.build/en/concepts/why-astro/)
Celotna nastavitev za vibe-coding: **klon AI + Second Brain + inženiring konteksta**. Spoznajte [Ailoot](https://ailoot.ai/). ## Vprašanja in odgovori: Spletno mesto Astro prek Claude Code: od mape do objave ### Ali lokalni predogled Astro objavi spletno mesto v internetu? Ne. Ukaz npm run dev zažene lokalni razvojni predogled in izpiše naslov, običajno localhost:4321. Objava je ločen korak prek ponudnika gostovanja ali poteka objave GitHub Pages. ### Katere nastavitve gradnje preverim pri gostovanju Astro? Za opisano pot statičnega spletnega mesta preverite uporabo astro build ali npm run build in objavo imenika dist. Po uvedbi odprite javni URL gostitelja ter strani preverite tam; sam lokalni predogled ne potrjuje objave. ## Ailoot · Podjetje in njegov portfelj projektov Ailoot temelji na pridobljenih operativnih izkušnjah, široki bazi strank, stabilni storitvi in stalnem spremljanju KPI. Podjetje in njegov portfelj projektov: milijoni strank; mesečna prodaja v milijardah. Ailoot te operativne izkušnje uporablja za dostop prek API do funkcij umetne inteligence v izdelkih strank, agentih, aplikacijah in avtomatizacijah.