# Astro-nettsted gjennom Claude Code: fra mappe til publisering > Trinnvis veiledning: slik bygger du et nettsted med Astro gjennom Claude Code uten å kunne programmere. Hva du må installere, hvilken kommando du bruker for å opprette et prosjekt, og hvordan du publiserer det gratis. Source: https://ailoot.ai/blog/nb/astro-site-with-claude-code/ Canonical: https://ailoot.ai/blog/nb/astro-site-with-claude-code/ Language: nb Publisher: Ailoot (https://ailoot.ai/) Translation: guide-149 Revision: sha256-e0f504528cca5f80b77a7e970f99d0b0c82d45b5e1f242581730804b6bb6a595 En person som aldri har skrevet en eneste kodelinje, kan bygge et nettsted med Astro gjennom Claude Code. Jeg sluttet å skrive kode for hånd for lenge siden; jeg gjør alt med ord gjennom AI, og det fungerer akkurat på samme måte å bygge et nettsted med Astro: Du forklarer hva du trenger, og Claude skriver koden for deg. Problemet er vanligvis ikke selve byggingen, men at veien er delt opp i biter. Én artikkel forklarer installasjonen, en annen tar for seg kommandoer, og en tredje handler om publisering, men den komplette fremgangsmåten samler seg aldri i hodet. Her tar jeg deg fra en tom mappe til et nettsted som kan åpnes på internett via en lenke: hva du må installere, hvilken kommando du bruker for å starte et prosjekt, hvordan du bygger sider gjennom Claude Code, og hvordan du publiserer resultatet gratis. Jeg bygger på den offisielle Astro-dokumentasjonen. Om hvordan du bruker tjenesten — i [Ailoot-dokumentasjonen](https://ailoot.ai/docs/). ## Hva trenger du før du setter i gang?
Viktigste punkter Tre ting på datamaskinen din: en nyere versjon av Node.js, et kodeverktøy og en terminal. Node.js er miljøet disse verktøyene kjører i. Da artikkelen ble skrevet, krevde Astro-dokumentasjonen versjon 22.12.0 eller nyere og advarte om at oddetallsversjoner som 23 ikke støttes. Kodeverktøyet er som regel VS Code, der Claude Code også kjører. Terminalen er et svart vindu for kommandoer; den er allerede innebygd i VS Code. Du trenger ikke å installere alt dette separat for Astro: Hvis du allerede har bygget noe med Claude Code, er miljøet ditt klart.
Astro ber deg ikke laste ned noe på forhånd — det hentes av kommandoen i neste trinn. Men du trenger miljøet som alt kjører i. Astro beskriver oppstarten slik — du trenger tre ting:

Node.js — versjon v22.12.0 eller nyere. Oddetallsversjoner som v23 støttes ikke. En teksteditor — vi anbefaler VS Code med den offisielle Astro-utvidelsen vår. En terminal — Astro administreres via kommandolinjen.

— Astro-dokumentasjon, installasjonsdelen, https://docs.astro.build/en/install-and-setup/
La oss se på hva hver av disse betyr i praksis: 1. **Node.js** — et program som Astro og de fleste vibe-kodingverktøy ikke fungerer uten. Last det ned fra nodejs.org og installer det som et vanlig program. Versjonsnummeret i dokumentasjonen øker over tid, så besøk Astro-installasjonssiden og sjekk kravet før du starter. Du trenger en partallsversjon (22, 24); det er best å unngå oddetallsversjoner (23, 25). 2. **VS Code** — et gratis kodeverktøy fra Microsoft. Du åpner prosjektmappen i det, og Claude Code jobber der også; det skriver koden. 3. **Terminal** — et vindu der du skriver inn kommandoer. Du trenger ikke å installere den separat: Den åpnes fra menyen i VS Code, og alle kommandoene nedenfor skrives inn der. Hvis du allerede har installert Claude Code og bygget noe som helst, har du alt dette fra før og kan hoppe over dette trinnet. Hvis ikke, har jeg en egen veiledning om [hvordan du installerer Claude Code](https://ailoot.ai/blog/nb/install-claude-code/). ## Hvordan oppretter du et Astro-prosjekt med én kommando?
Viktigste punkter Du oppretter et nytt prosjekt med kommandoen `npm create astro@latest` i terminalen. En veiviser starter og stiller noen spørsmål (hvor det skal installeres, hvilken mal som skal brukes, om avhengigheter skal installeres), og oppretter deretter grunnstrukturen for prosjektet. Hvis prosjektmappen ikke finnes ennå, oppretter veiviseren den for deg. Etterpå går du inn i prosjektmappen med kommandoen `cd` og kan begynne. Du trenger ikke å opprette en tom mappe på forhånd.
Her begynner selve prosjektet, og det tar bare én kommando. Åpne terminalen og skriv inn: ```bash npm create astro@latest ``` Installasjonsveiviseren starter. Dette sier dokumentasjonen om den:

Du kan kjøre create astro-kommandoen hvor som helst på datamaskinen, så du trenger ikke å opprette en tom prosjektmappe på forhånd. Hvis mappen ikke finnes ennå, hjelper veiviseren deg med å opprette den automatisk.

— Astro-dokumentasjon, installasjonsdelen, https://docs.astro.build/en/install-and-setup/
Veiviseren leder deg gjennom trinnene og stiller noen spørsmål: hva prosjektmappen skal hete, hvilken mal du vil starte med, og om avhengigheter skal installeres med en gang. Du kan velge standardalternativene for alle spørsmålene — en tom eller minimal mal fungerer fint for ditt første nettsted. Hvis du svarte «nei» på spørsmålet om å installere avhengigheter, kan du legge dem til manuelt senere ved å kjøre kommandoen `npm install` inne i prosjektmappen. Når veiviseren er ferdig, viser den at prosjektet er opprettet og foreslår neste trinn — å gå inn i prosjektmappen: ```bash cd your-project-name ``` Det er alt som skal til for å opprette prosjektet. Inni ligger det allerede en fungerende grunnstruktur for nettstedet: noen filer og mapper som brukes til å bygge siden. Du trenger ikke å redigere dem for hånd, men det er nyttig å vite hva som ligger hvor. Astro krever bare én mappe:

src/pages — en obligatorisk undermappe i prosjektet. Uten den har nettstedet verken sider eller ruter.

— Astro-dokumentasjon, delen om prosjektstruktur, https://docs.astro.build/en/basics/project-structure/
Med andre ord er `src/pages` mappen som inneholder sidene på nettstedet: forsiden, «om oss» og kontaktsider. `src/components` (gjenbrukbare deler som topptekster og knapper), `src/layouts` (den felles siderammen) og mappen `public` for bilder og filer ligger som regel i nærheten. Du trenger ikke å pugge strukturen — bare husk at sidene ligger i `src/pages`, og vis til den når du ber Claude om å «legge til en kontaktside». ## Hvordan bygger du selve nettstedet gjennom Claude Code?
Viktigste punkter Åpne prosjektmappen i VS Code, start Claude Code, og forklar deretter med ord hva du trenger på nettstedet. Claude redigerer selv filene i `src/pages` og nærliggende mapper. Det fungerer best med små, tydelige oppgaver: «lag en forside med en overskrift, en kort beskrivelse og en knapp», deretter «legg til en tjenesteside», og så «gjør fargene mørke». Se på resultatet i nettleseren etter hvert ønske, og presiser ved behov. Du trenger ikke å programmere her. Jobben din er å gi tydelige instruksjoner og kontrollere resultatet.
Grunnstrukturen er klar; nå bygges nettstedet ut fra den, og Claude Code tar over. Åpne prosjektmappen i VS Code, start Claude Code, og beskriv med ord hva du trenger. Claude redigerer selv filene i `src/pages` og nærliggende mapper — du gir den oppgaver og ser på resultatet. Etter min erfaring fungerer det best å jobbe i små trinn. En kjempestor forespørsel som «lag et nettsted for firmaet mitt» ender i et rot som er vanskelig å rydde opp i. Del den derfor opp i korte, tydelige oppgaver, og gi dem én om gangen: 1. «Lag en forside: en stor overskrift, et par setninger om hva jeg gjør, og en knapp som lenker til kontaktsiden.» 2. «Legg til en tjenesteside med en liste over tre områder.» 3. «Legg til en kontaktside med et telefonnummer og en lenke til Telegram.» 4. «Endre utseendet: lys bakgrunn og en stor, lettlest skrifttype.» Kontroller hvert trinn før du går videre — da er det lettere å oppdage hvis noe er galt og gå tilbake. Hvorfor små oppgaver er mer pålitelige, og hvordan du holder AI på rett spor, handler om kontekstutvikling: Jo tydeligere oppgaven og prosjektstrukturen er, desto mer forutsigbart blir resultatet. Astro gir AI en struktur som passer godt til dette: sideinnholdet er skilt fra utformingen, og sidene bygges etter felles regler. Med denne strukturen blir Claude sjeldnere forvirret og har mindre risiko for å ødelegge noe i nærheten når den redigerer ett sted. Hvis Claude plutselig ikke lenger ser filene dine eller svarer irrelevant, kan du lese veiledningen om [hvorfor Claude Code ikke kan se prosjektfiler](https://ailoot.ai/blog/nb/claude-code-cant-see-project-files/). Astro er bare én byggestein i arbeidet med AI. For å hjelpe Claude med å bygge det du trenger på en konsekvent måte, uten å falle tilbake på sannsynlige gjetninger, består et komplett oppsett for prosjektet ditt av: **AI-klone + Second Brain + Context Engineering**. ## Hvordan forhåndsviser du nettstedet før publisering?
Viktigste punkter For å se nettstedet før det legges ut på nettet, har Astro en utviklingsserver. Skriv inn kommandoen `npm run dev` i terminalen inne i prosjektmappen, så starter Astro en lokal forhåndsvisning — vanligvis på localhost på port 4321. Åpne denne adressen i en nettleser og se nettstedet live. Endringene Claude gjør i filene, vises fortløpende: Endre litt tekst, så oppdateres siden av seg selv. Denne serveren er bare synlig for deg på datamaskinen din; den publiserer ikke nettstedet på internett.
Før du viser nettstedet til verden, forhåndsviser du det på din egen datamaskin. Astro har en utviklingsserver til dette — den viser nettstedet live på datamaskinen din. Start den med en kommando i terminalen, inne i prosjektmappen: ```bash npm run dev ``` Astro starter en lokal forhåndsvisning og skriver ut adressen i terminalen. Som standard er det `localhost:4321`. Kopier adressen, åpne den i nettleseren, og du vil se nettstedet ditt. Foreløpig er det bare du som kan åpne denne adressen — ingen utenfra får tilgang; dette er utkastet ditt. Det praktiske er at forhåndsvisningen er live: Claude redigerer en fil, og siden i nettleseren oppdateres av seg selv; du trenger ikke å laste den inn på nytt manuelt. Det går raskt — be Claude om noe, se i nettleseren, gjør en rettelse og se igjen. Det er på dette stadiet du finpusser nettstedet. Når du er fornøyd med resultatet, publiserer du det på nettet. ## Hvordan publiserer du et Astro-nettsted gratis på nettet?
Viktigste punkter Den enkleste gratisløsningen går via GitHub. Først laster du prosjektet opp til et repositorium på GitHub (et nettbasert kodelager). Deretter kobler du til en vertstjeneste som kan bygge Astro: Netlify, Vercel eller GitHub Pages. Vertstjenesten gjenkjenner Astro, bygger nettstedet med byggekommandoen og publiserer det på sin egen adresse. Hver gang du sender en ny endring til repositoriet, bygges og oppdateres nettstedet automatisk. Claude Code kan også hjelpe deg med å sette opp alt dette med ord.
Du må plassere det ferdige nettstedet et sted slik at andre kan åpne det via en lenke. Den enkleste gratisløsningen går via GitHub: Først laster du prosjektkoden opp til et repositorium, deretter kobler du til en vertstjeneste som bygger og publiserer nettstedet. Slik gjør du det: 1. **Opprett et repositorium på GitHub.** Et repositorium er et nettbasert sted for lagring av kode, der du sender prosjektfiler. Claude Code kan hjelpe deg med dette gjennom instruksjoner på vanlig språk: Be den om å «laste opp prosjektet til et nytt GitHub-repositorium», så foreslår den kommandoer. Hvis du aldri har brukt GitHub før, bør du ha instruksjoner for registrering og pålogging i nærheten. 2. **Koble til hosting.** Gå til en av tjenestene (Netlify, Vercel), logg inn via GitHub-kontoen din og velg repositoriet. Astro-dokumentasjonen beskriver denne metoden slik: Vertstjenesten følger med på repositoriet ditt, bygger nettstedet og publiserer det. 3. **Kontroller byggeinnstillingene.** Vanligvis gjenkjenner vertstjenesten Astro og fyller inn det som trengs. Hvis den ber deg om å skrive dem inn manuelt, er byggekommandoen i dokumentasjonen `astro build` (eller `npm run build`), og det ferdige nettstedet plasseres i mappen `dist`. 4. **Klikk på «Publiser».** Tjenesten bygger nettstedet og gir deg en lenke som `site-name.netlify.app`. Alle kan åpne nettstedet på den adressen. Dette er den nøyaktige ordlyden i dokumentasjonen om å koble et repositorium til en vertstjeneste:

Mange populære vertstjenester vil gjenkjenne prosjektet ditt som et Astro-nettsted og automatisk velge passende bygge- og utrullingsinnstillinger. Vertstjenesten følger med på hovedgrenen i repositoriet ditt, bygger nettstedet på nytt og ruller det ut på nytt ved hver nye endring.

— Astro-dokumentasjon, delen om utrulling, https://docs.astro.build/en/guides/deploy/
Etter dette blir publiseringen automatisk: Send en ny endring til repositoriet, så bygges nettstedet på nytt og oppdateres av seg selv; du trenger ikke å klikke på noe mer. Det finnes også et annet gratis alternativ — **GitHub Pages**, der nettstedet publiseres direkte fra repositoriet ved hjelp av GitHubs egne verktøy. Astro har en offisiell startmal for dette:

Astro støtter en offisiell GitHub Action for å rulle ut et prosjekt til GitHub Pages med nesten ingen konfigurasjon, og dette er den anbefalte måten å rulle ut til GitHub Pages på.

— Astro-dokumentasjon, delen om utrulling på GitHub Pages, https://docs.astro.build/en/guides/deploy/github/
Med dette alternativet åpnes nettstedet på en adresse som `your-name.github.io/repository-name`, og du kan koble til ditt eget domene senere. Du kan også sette det opp via Claude Code: Beskriv oppgaven med ord, så klargjør den den nødvendige filen. ## Hvor mye koster det å bygge et Astro-nettsted?
Viktigste punkter Astro i seg selv er gratis og åpen kildekode — det koster ingenting. Grunnleggende hosting kan også være gratis: GitHub Pages samt startabonnementene til Netlify og Vercel, som er nok for et lite Astro-nettsted. De faktiske utgiftene gjelder AI-verktøyet du bruker til å bygge nettstedet (Claude), og eventuelt ditt eget domene i stedet for vertstjenestens gratisadresse. Dermed er det mulig å bygge og publisere et nettsted uten å betale for hosting: Du betaler bare for AI.
La oss snakke om penger. Astro er et gratis verktøy med åpen kildekode; det har ingen egen prislapp. Grunnleggende vertstjenester tilbyr også gratis alternativer: GitHub Pages og startabonnementene til Netlify og Vercel, som vanligvis holder for et lite Astro-nettsted (gratisabonnementer har trafikkgrenser, men de er vanligvis nok for et enkelt visittkortnettsted eller en landingsside). I praksis er det altså to ting du kanskje betaler for, og selv det gjelder ikke alltid. Det første er AI-verktøyet du bruker til å bygge nettstedet. Det andre er ditt eget domene i stedet for en adresse som `name.netlify.app`; det er valgfritt og koster lite per år. Du kan gjennomføre hele løpet med å bygge og publisere et nettsted på nettet ved å bare betale for Claude. ## Hva mer spør folk om Astro-nettsteder og Claude Code?
Viktigste punkter Korte svar på vanlige spørsmål. Du trenger ikke å kunne programmere: Claude skriver koden, og du gir den oppgaver med ord og kontrollerer resultatet. Det ferdige nettstedet består fortsatt av filene dine og kan ligge hos hvilken som helst vertstjeneste; du er ikke låst til noen andres plattform. Astro passer for et innholdsnettsted — et visittkortnettsted, en landingsside, en blogg eller en utstillingsside; for et komplekst personlig kontoområde er det bedre å se etter noe annet. Og du kan publisere det ferdige nettstedet gratis via GitHub.
### Ofte stilte spørsmål Må du kunne programmere for å bygge et nettsted med Astro gjennom Claude Code? Nei. Jeg sluttet å skrive kode for hånd for lenge siden; jeg gjør alt gjennom AI. Du gir den en oppgave med ord — «lag en forside med denne typen overskrift» — og Claude Code skriver og redigerer filene for deg. Du trenger ikke å kjenne syntaksen. Du må forstå hva slags nettsted du ønsker, og kontrollere i nettleseren hva du får. Må du opprette prosjektmappen på forhånd? Nei. Kommandoen `npm create astro@latest` starter en veiviser som oppretter mappen selv hvis den ikke finnes ennå. Du kan kjøre kommandoen hvor som helst på datamaskinen. Når den er opprettet, går du inn i prosjektmappen med kommandoen `cd` og arbeider der. Hvordan kan du forhåndsvise nettstedet før det legges ut på nettet? Kjør kommandoen `npm run dev` inne i prosjektmappen. Astro starter en lokal forhåndsvisning, vanligvis på localhost:4321, og du kan åpne nettstedet i nettleseren på din egen datamaskin. Det er bare du som kan se denne forhåndsvisningen; endringene vises etter hvert, og du trenger ikke å laste siden inn på nytt manuelt. Kan du publisere et Astro-nettsted gratis? Ja. Den enkleste løsningen er å laste opp prosjektet til et GitHub-repositorium og koble til gratis hosting: GitHub Pages, Netlify eller Vercel. Vertstjenesten bygger nettstedet og publiserer det på sin egen adresse. Du trenger ikke å betale separat for hosting av et lite nettsted; det koster bare ekstra hvis du vil ha ditt eget domene. Passer Astro for alle typer nettsteder? Astro er laget for innholdsnettsteder: visittkortnettsteder, landingssider, blogger, porteføljer og utstillingssider for nettbutikker. Det er der Astro kommer til sin rett. Hvis kjernen i prosjektet er en kompleks nettapplikasjon med et personlig kontoområde og mange handlinger på hver knapp, bygges den delen vanligvis med et annet verktøy. Jeg går grundigere gjennom styrkene og svakhetene ved Astro i artikkelen om hva Astro er. Hva gjør Astro bedre enn en publiseringsløsning som Tilda for vibe-koding? Forskjellen ligger i hva du sitter igjen med. Et Astro-nettsted består av filene dine, som du oppbevarer selv og kan publisere hos hvilken som helst vertstjeneste; ingen tredjepartstjeneste har dem liggende. Hvis du vil flytte eller gjøre endringer seks måneder senere, kan du åpne alt med et hvilket som helst verktøy. Valget mellom Astro og andre verktøy handler om den generelle tilnærmingen til vibe-koding: Velg et verktøy som passer til oppgaven. Oversikten over verktøy finner du i veiledningen om alternativer til Claude Code.
### Kilder - [Astro-dokumentasjon, installasjon og krav](https://docs.astro.build/en/install-and-setup/) - [Astro-dokumentasjon, kommandolinjegrensesnitt](https://docs.astro.build/en/reference/cli-reference/) - [Astro-dokumentasjon, prosjektstruktur](https://docs.astro.build/en/basics/project-structure/) - [Astro-dokumentasjon, utrulling av et nettsted](https://docs.astro.build/en/guides/deploy/) - [Astro-dokumentasjon, utrulling på GitHub Pages](https://docs.astro.build/en/guides/deploy/github/) - [Astro-dokumentasjon, «Hvorfor Astro?»](https://docs.astro.build/en/concepts/why-astro/)
Det komplette oppsettet for vibe-koding: **AI-klone + Second Brain + Context Engineering**. Bli kjent med [Ailoot](https://ailoot.ai/). ## Spørsmål om denne veiledningen: Astro-nettsted gjennom Claude Code: fra mappe til publisering ### Publiserer den lokale Astro-forhåndsvisningen nettstedet på nettet? Nei. npm run dev starter en lokal utviklingsvisning og skriver ut adressen, vanligvis localhost:4321. Publisering er et separat trinn hos en vertstjeneste eller gjennom GitHub Pages-arbeidsflyten. ### Hvilke bygginnstillinger sjekker jeg hos en Astro-vert? For den statiske ruten her kontrollerer du at verten bruker astro build eller npm run build og publiserer dist-mappen. Åpne vertens offentlige adresse etter utrulling og verifiser sidene der. Lokal forhåndsvisning alene verifiserer ikke publisering. ## Ailoot · Selskapet og dets prosjektportefølje Ailoot bygger på etablert driftserfaring, en stor kundebase, stabil tjeneste og løpende KPI-kontroll. Selskapet og dets prosjektportefølje: millioner av kunder; månedlig salg for milliarder. Ailoot bruker denne driftserfaringen til API-tilgang til AI-funksjoner i kundenes produkter, agenter, applikasjoner og automatiseringer.