Astro-webbplats via Claude Code: från mapp till publicering

Den som aldrig har skrivit en enda rad kod kan bygga en webbplats med Astro via Claude Code. Jag slutade skriva kod för hand för länge sedan; jag gör allt med ord genom AI, och att bygga en webbplats med Astro fungerar precis likadant: du förklarar vad du behöver, så skriver Claude koden åt dig.

Problemet är oftast inte själva bygget, utan att vägen är uppdelad i delar. En artikel förklarar installationen, en annan tar upp kommandon, en tredje handlar om publicering, och den kompletta vägen faller aldrig på plats i huvudet. Här tar jag dig från en tom mapp till en webbplats som går att öppna på internet via en länk: vad du ska installera, vilket kommando du använder för att starta ett projekt, hur du bygger sidor via Claude Code och hur du publicerar resultatet gratis. Jag utgår från den officiella Astro-dokumentationen.

Om hur du arbetar med tjänsten — i Ailoot-dokumentationen.

Vad behöver du innan du börjar?#

Astro ber dig inte att ladda ner något i förväg — det hämtas av kommandot i nästa steg. Men du behöver miljön där allt körs. Astro beskriver starten så här — du behöver tre saker:

Vi går igenom vad var och en innebär i praktiken:

1. Node.js — ett program som varken Astro eller de flesta verktyg för vibe-coding kan köras utan. Ladda ner det från nodejs.org och installera det som ett vanligt program. Versionsnumret i dokumentationen ökar med tiden, så gå till Astros installationssida och kontrollera kravet innan du börjar. Du behöver en jämn version (22, 24); det är bättre att undvika en udda version (23, 25).
2. VS Code — en kostnadsfri redigerare från Microsoft. Du öppnar projektmappen i den, och Claude Code arbetar också där; det skriver koden.
3. Terminal — ett fönster där du skriver in kommandon. Du behöver inte installera den separat: den öppnas från menyn i VS Code, och alla kommandon nedan skrivs in där.

Om du redan har installerat Claude Code och byggt något alls har du redan allt detta och kan hoppa över det här steget. Annars finns en separat guide om hur du installerar Claude Code.

Hur skapar du ett Astro-projekt med ett enda kommando?#

Här börjar själva projektet, och det krävs bara ett enda kommando. Öppna terminalen och skriv in:

npm create astro@latest

Installationsguiden startar. Så här beskriver dokumentationen den:

Guiden leder dig genom stegen och ställer några frågor: vad projektmappen ska heta, vilken mall du vill börja med och om beroenden ska installeras direkt. Du kan välja standardalternativen för alla frågor — en tom eller minimal mall fungerar för din första webbplats. Om du svarade ”nej” på frågan om att installera beroenden lägger du till dem manuellt senare genom att köra kommandot npm install i projektmappen.

När guiden är klar visar den att projektet har skapats och föreslår nästa steg — att gå till projektmappen:

cd your-project-name

Så enkelt är det att skapa projektet. Inuti finns redan en fungerande grundstruktur för webbplatsen: flera filer och mappar som används för att bygga sidan. Du behöver inte redigera dem för hand, men det är bra att veta vad som finns var. Astro kräver bara en mapp:

Med andra ord är src/pages mappen med webbplatsens sidor: startsidan, sidan ”om oss” och kontaktsidan. src/components (återanvändbara delar som sidhuvuden och knappar), src/layouts (den gemensamma sidmallen) och mappen public för bilder och filer finns vanligtvis i närheten. Du behöver inte memorera strukturen — kom bara ihåg att sidorna finns i src/pages och hänvisa till den när du ber Claude: ”lägg till en kontaktsida”.

Hur bygger du själva webbplatsen via Claude Code?#

Grundstrukturen är klar; nu bygger du webbplatsen utifrån den, och Claude Code tar över. Öppna projektmappen i VS Code, starta Claude Code och beskriv med ord vad du behöver. Det redigerar själv filerna i src/pages och närliggande mappar — du ger bara uppgifter och tittar på resultatet.

Min erfarenhet är att det fungerar bäst att arbeta i små steg. En enda stor begäran som ”gör en företagswebbplats åt mig” slutar i en röra som är svår att rätta till. Dela därför upp arbetet i korta, tydliga uppgifter och ge dem en i taget:

1. ”Gör en startsida: en stor rubrik, ett par meningar om vad jag gör och en knapp som länkar till kontaktsidan.”
2. ”Lägg till en tjänstesida med en lista över tre avsnitt.”
3. ”Lägg till en kontaktsida med ett telefonnummer och en länk till Telegram.”
4. ”Ändra utseendet: ljus bakgrund och ett stort, lättläst typsnitt.”

Kontrollera varje steg innan du går vidare — då är det enklare att upptäcka när något är fel och gå tillbaka. Varför små uppgifter är mer tillförlitliga och hur du håller AI på rätt spår ingår i kontextteknik: ju tydligare uppgiften och projektstrukturen är, desto mer förutsägbart blir resultatet.

Astro ger AI en struktur som passar för detta: sidinnehållet är åtskilt från utseendet, och sidor byggs enligt gemensamma regler. Med den här strukturen blir Claude mer sällan förvirrad och har mindre risk att förstöra något i närheten när det redigerar på ett ställe. Om Claude plötsligt slutar se dina filer eller svarar irrelevant kan du läsa guiden om varför Claude Code inte kan se projektfiler.

Astro är bara en byggsten i arbetet med AI. För att hjälpa Claude att konsekvent bygga det du behöver utan att falla tillbaka på rimliga gissningar omfattar den fullständiga projektuppsättningen: AI-klon + Second Brain + Context Engineering.

Hur kan du förhandsgranska webbplatsen före publicering?#

Innan du visar webbplatsen för omvärlden förhandsgranskar du den på din egen dator. Astro har en utvecklingsserver för detta — den visar webbplatsen direkt på din dator. Starta den med ett kommando i terminalen, inne i projektmappen:

npm run dev

Astro startar en lokal förhandsgranskning och skriver ut adressen i terminalen. Som standard är den localhost:4321. Kopiera adressen, öppna den i webbläsaren så ser du webbplatsen. Än så länge är adressen bara tillgänglig för dig — ingen utanför kan komma åt den; det här är ditt utkast.

Det praktiska är att förhandsgranskningen är direktuppdaterad: Claude redigerar en fil, och sidan i webbläsaren uppdateras av sig själv; du behöver inte ladda om manuellt. Det går snabbt — be Claude om något, titta i webbläsaren, gör en korrigering och titta igen. Det är i det här skedet du finputsar webbplatsen. När du är nöjd med resultatet publicerar du den online.

Hur publicerar du en Astro-webbplats gratis online?#

Du behöver placera den färdiga webbplatsen någonstans där andra kan öppna den via en länk. Den enklaste kostnadsfria vägen går via GitHub: ladda först upp projektkoden till ett kodarkiv och anslut sedan en värdtjänst som bygger och publicerar webbplatsen. Så här går det till:

1. Skapa ett kodarkiv på GitHub. Ett kodarkiv är en plats online där du lagrar projektfiler. Claude Code kan hjälpa till med det via instruktioner på vanligt språk: be det att ”ladda upp projektet till ett nytt kodarkiv på GitHub”, så föreslår det kommandon. Om du aldrig har använt GitHub förut är det bra att ha instruktioner för registrering och inloggning nära till hands.
2. Anslut en värdtjänst. Gå till en av tjänsterna (Netlify, Vercel), logga in via ditt GitHub-konto och välj ditt kodarkiv. Astro-dokumentationen beskriver metoden så här: värdtjänsten bevakar kodarkivet, bygger webbplatsen och publicerar den.
3. Kontrollera bygginställningarna. Vanligtvis känner värdtjänsten igen Astro och fyller i det som behövs. Om den ber dig ange dem manuellt är byggkommandot i dokumentationen astro build (eller npm run build), och den färdiga webbplatsen placeras i mappen dist.
4. Klicka på ”Publicera”. Tjänsten bygger webbplatsen och ger dig en länk som site-name.netlify.app. Vem som helst kan öppna webbplatsen på den adressen.

Här är dokumentationens exakta formulering om att ansluta ett kodarkiv till en värdtjänst:

Därefter sker publiceringen automatiskt: skicka en ny ändring till kodarkivet, så byggs webbplatsen om och uppdateras av sig själv; du behöver inte klicka på något mer.

Det finns också ett andra kostnadsfritt alternativ — GitHub Pages, där webbplatsen publiceras direkt från kodarkivet med GitHubs egna verktyg. Astro har en officiell startmall för det:

Med det här alternativet öppnas webbplatsen på en adress som your-name.github.io/repository-name, och senare kan du ansluta din egen domän till den. Du kan också göra inställningarna via Claude Code: beskriv uppgiften med ord, så skapar det den nödvändiga filen.

Hur mycket kostar det att bygga en Astro-webbplats?#

Nu pratar vi pengar. Astro är ett kostnadsfritt verktyg med öppen källkod; det har ingen separat prislapp. Grundläggande värdtjänster erbjuder också kostnadsfria alternativ: GitHub Pages och startplanerna från Netlify och Vercel, som vanligtvis räcker för en lättviktig Astro-webbplats (gratisplanerna har trafikgränser, men de räcker vanligtvis för en enkel företagspresentationssida eller landningssida).

I praktiken finns det alltså två saker du kan behöva betala för, men inte alltid. Den första är AI-verktyget du använder för att bygga webbplatsen. Den andra är din egen domän i stället för en adress som name.netlify.app; det är valfritt och kostar lite per år. Du kan genomföra hela vägen från att bygga en webbplats till att publicera den online och bara betala för Claude.

Vad mer brukar folk fråga om Astro-webbplatser och Claude Code?#

Den kompletta uppsättningen för vibe-coding: AI-klon + Second Brain + Context Engineering.

Lär känna Ailoot.