Astro-website via Claude Code: fra mappe til publicering

En person, der aldrig har skrevet en eneste linje kode, kan bygge et website med Astro via Claude Code. Jeg holdt op med at skrive kode i hånden for længe siden; jeg gør alting med ord gennem AI, og det fungerer på præcis samme måde at bygge et website med Astro: Du forklarer, hvad du har brug for, og Claude skriver koden for dig.

Problemet er som regel ikke selve byggeriet, men at vejen er delt op i bidder. Én artikel forklarer installationen, en anden gennemgår kommandoerne, en tredje handler om publicering, og den samlede vej falder aldrig på plads i hovedet. Her tager jeg dig fra en tom mappe til et website, der kan åbnes på internettet via et link: hvad du skal installere, hvilken kommando du skal bruge for at starte et projekt, hvordan du bygger sider via Claude Code, og hvordan du publicerer resultatet gratis. Jeg tager udgangspunkt i den officielle Astro-dokumentation.

Om arbejdet med tjenesten — i Ailoot-dokumentationen.

Hvad skal du bruge, før du går i gang?#

Astro beder dig ikke om at downloade noget på forhånd — det hentes med kommandoen i næste trin. Men du skal bruge det miljø, som det hele kører i. Astro beskriver opstarten sådan — du skal bruge tre ting:

Lad os gennemgå, hvad hver af tingene betyder i praksis:

1. Node.js — et program, som hverken Astro eller de fleste værktøjer til vibe-coding kan køre uden. Download det fra nodejs.org, og installer det som et almindeligt program. Versionsnummeret i dokumentationen stiger med tiden, så besøg Astros installationsside, og tjek kravet, før du går i gang. Du skal bruge en version med et lige nummer (22, 24); det er bedre at undgå en version med et ulige nummer (23, 25).
2. VS Code — en gratis editor fra Microsoft. Du åbner projektmappen i den, og Claude Code arbejder også der; det skriver koden.
3. Terminal — et vindue, hvor du indtaster kommandoer. Du behøver ikke installere den separat: Den åbnes fra menuen i VS Code, og alle kommandoerne nedenfor indtastes der.

Hvis du allerede har installeret Claude Code og bygget bare et eller andet, har du allerede alt dette og kan springe dette trin over. Ellers har jeg en separat guide til at installere Claude Code.

Hvordan opretter du et Astro-projekt med én kommando?#

Det er her, selve projektet begynder, og det kræver kun én kommando. Åbn terminalen, og indtast:

npm create astro@latest

Installationsguiden starter. Sådan beskriver dokumentationen den:

Guiden fører dig gennem trinnene og stiller nogle få spørgsmål: hvad projektmappen skal hedde, hvilken skabelon du vil starte med, og om afhængigheder skal installeres med det samme. Du kan vælge standardindstillingerne til alle spørgsmål — en tom eller minimal skabelon fungerer fint til dit første website. Hvis du svarede ”nej” på spørgsmålet om at installere afhængigheder, kan du tilføje dem manuelt senere ved at køre kommandoen npm install inde i projektmappen.

Når guiden er færdig, viser den, at projektet er oprettet, og foreslår næste trin — at gå ind i projektmappen:

cd your-project-name

Så meget skal der til for at oprette projektet. Indeni er der allerede en fungerende grundstruktur til websitet: flere filer og mapper, som bruges til at bygge siden. Du behøver ikke redigere dem i hånden, men det er nyttigt at vide, hvad der ligger hvor. Astro kræver kun én mappe:

Med andre ord er src/pages mappen med websitets sider: forsiden, ”om os”-siden og kontaktsiden. src/components (genanvendelige dele som sidehoveder og knapper), src/layouts (den fælles sideskabelon) og mappen public til billeder og filer ligger som regel i nærheden. Du behøver ikke lære strukturen udenad — husk blot, at siderne ligger i src/pages, og henvis til den, når du beder Claude om at ”tilføje en kontaktside”.

Hvordan bygger du selve websitet via Claude Code?#

Grundstrukturen er klar; nu bygger du websitet ud fra den, og Claude Code tager over. Åbn projektmappen i VS Code, start Claude Code, og beskriv med ord, hvad du har brug for. Det redigerer selv filerne i src/pages og de tilstødende mapper — du giver det bare opgaver og ser på resultatet.

Min erfaring er, at det fungerer bedst at arbejde i små trin. En enkelt stor anmodning som ”lav et website til min virksomhed” ender i et rod, der er svært at rette. Del det derfor op i korte, tydelige opgaver, og giv dem én ad gangen:

1. ”Lav en forside: en stor overskrift, et par sætninger om, hvad jeg laver, og en knap, der linker til kontaktsiden.”
2. ”Tilføj en side med tjenester og en liste med tre afsnit.”
3. ”Tilføj en kontaktside med et telefonnummer og et link til Telegram.”
4. ”Skift udseendet: lys baggrund og en stor, letlæselig skrifttype.”

Kontrollér hvert trin, før du går videre — så er det nemmere at opdage, hvis noget er galt, og gå tilbage. Hvorfor små opgaver er mere pålidelige, og hvordan du holder AI på sporet, er en del af kontekstteknik: Jo tydeligere opgaven og projektstrukturen er, desto mere forudsigeligt bliver resultatet.

Astro giver AI en struktur, der passer godt til dette: sidens indhold er adskilt fra udseendet, og siderne bygges efter fælles regler. Med denne struktur bliver Claude sjældnere forvirret og er mindre tilbøjelig til at ødelægge noget i nærheden, når det redigerer ét sted. Hvis Claude pludselig holder op med at kunne se dine filer eller svarer irrelevant, kan du læse guiden om hvorfor Claude Code ikke kan se projektfiler.

Astro er blot én byggesten i arbejdet med AI. For at hjælpe Claude med konsekvent at bygge det, du har brug for, uden at falde tilbage på plausible gæt, omfatter den komplette opsætning af dit projekt: AI-klon + Second Brain + Context Engineering.

Hvordan kan du få vist websitet, før du publicerer det?#

Før du viser websitet til omverdenen, får du en forhåndsvisning på din egen computer. Astro har en udviklingsserver til dette — den viser websitet direkte på din computer. Start den med en kommando i terminalen inde i projektmappen:

npm run dev

Astro starter en lokal forhåndsvisning og viser adressen i terminalen. Som standard er den localhost:4321. Kopiér adressen, åbn den i browseren, så ser du dit website. Indtil videre er adressen kun tilgængelig for dig — ingen udenforstående kan åbne den; det er dit udkast.

Det praktiske er, at forhåndsvisningen opdateres direkte: Claude redigerer en fil, og siden i browseren opdateres af sig selv; du behøver ikke genindlæse manuelt. Det går hurtigt — bed Claude om noget, kig i browseren, lav en rettelse, og kig igen. Det er her, du finpudser websitet. Når du er tilfreds med resultatet, publicerer du det online.

Hvordan publicerer du et Astro-website gratis online?#

Du skal placere det færdige website et sted, så andre kan åbne det via et link. Den nemmeste gratis løsning går gennem GitHub: Upload først projektkoden til et repository, og tilslut derefter en hostingtjeneste, der bygger og publicerer websitet. Sådan gør du:

1. Opret et repository på GitHub. Et repository er et online kodelager, hvor du sender projektfilerne hen. Claude Code kan hjælpe med det via instruktioner på almindeligt sprog: Bed det om at ”uploade projektet til et nyt GitHub-repository”, så foreslår det kommandoer. Hvis du aldrig har brugt GitHub før, så hav instruktioner til registrering og login ved hånden.
2. Tilslut hosting. Gå til en af tjenesterne (Netlify, Vercel), log ind via din GitHub-konto, og vælg dit repository. Astro-dokumentationen beskriver metoden sådan: Hostingtjenesten overvåger dit repository, bygger websitet og publicerer det.
3. Kontrollér byggeindstillingerne. Hostingtjenesten genkender som regel Astro og udfylder det nødvendige. Hvis den beder dig om at angive dem manuelt, er byggekommandoen i dokumentationen astro build (eller npm run build), og det færdige website placeres i mappen dist.
4. Klik på ”Publicer”. Tjenesten bygger websitet og giver dig et link som site-name.netlify.app. Alle kan åbne websitet på den adresse.

Her er dokumentationens præcise formulering om at tilslutte et repository til en hostingtjeneste:

Derefter bliver publiceringen automatisk: Send en ny ændring til repositoryet, så bliver websitet bygget og opdateret af sig selv; du skal ikke klikke på mere.

Der er også en anden gratis mulighed — GitHub Pages, hvor websitet publiceres direkte fra repositoryet med GitHubs egne værktøjer. Astro har en officiel startskabelon til det:

Med denne mulighed åbner websitet på en adresse som your-name.github.io/repository-name, og du kan senere tilslutte dit eget domæne. Du kan også klare opsætningen via Claude Code: Beskriv opgaven med ord, så klargør det den nødvendige fil.

Hvor meget koster det at bygge et Astro-website?#

Lad os tale om penge. Astro er et gratis open source-værktøj; det har ingen separat pris. Grundlæggende hostingtjenester tilbyder også gratis muligheder: GitHub Pages samt startplanerne fra Netlify og Vercel, som som regel er tilstrækkelige til et let Astro-website (gratisplanerne har trafikgrænser, men de er som regel nok til et enkelt visitkort-website eller en landingsside).

I praksis er der altså to ting, du kan komme til at betale for, og selv det er ikke altid nødvendigt. Den første er det AI-værktøj, du bruger til at bygge websitet. Den anden er dit eget domæne i stedet for en adresse som name.netlify.app; det er valgfrit og koster kun lidt om året. Du kan gennemføre hele forløbet med at bygge et website og publicere det online og kun betale for Claude.

Hvad spørger folk ellers om Astro-websites og Claude Code?#

Den komplette opsætning til vibe-coding: AI-klon + Second Brain + Context Engineering.

Lær Ailoot at kende.