# Astro-site via Claude Code: van map tot publicatie > Stapsgewijze handleiding: hoe je zonder programmeerkennis een site bouwt met Astro via Claude Code. Wat je moet installeren, welk commando je gebruikt om een project aan te maken en hoe je het gratis publiceert. Source: https://ailoot.ai/blog/nl/astro-site-with-claude-code/ Canonical: https://ailoot.ai/blog/nl/astro-site-with-claude-code/ Language: nl Publisher: Ailoot (https://ailoot.ai/) Translation: guide-149 Revision: sha256-3bc2699d47bfed2cb31929a786a7936c02f5f5f2af1939e7f3ad87fc819651f9 Iemand die nog nooit een regel code heeft geschreven, kan met Astro via Claude Code een site bouwen. Ik schrijf al lang geen code meer met de hand; ik doe alles met woorden via AI, en een site bouwen met Astro werkt precies hetzelfde: je legt uit wat je nodig hebt en Claude schrijft de code voor je. Het probleem zit meestal niet in het bouwen zelf, maar in het feit dat de route uit losse onderdelen bestaat. Het ene artikel legt de installatie uit, het andere behandelt commando’s en een derde gaat over publiceren, maar de complete route komt nooit samen in je hoofd. Hier neem ik je mee van een lege map naar een site die via een link op internet te openen is: wat je moet installeren, welk commando je gebruikt om een project te starten, hoe je pagina’s bouwt via Claude Code en hoe je het resultaat gratis publiceert. Ik baseer me op de officiële Astro-documentatie. Over het werken met de dienst — in de [Ailoot-documentatie](https://ailoot.ai/docs/). ## Wat heb je nodig voordat je begint?
Belangrijkste punten Drie dingen op je computer: een recente versie van Node.js, een code-editor en een terminal. Node.js is de omgeving waarin deze tools draaien; op de datum waarop dit artikel is geschreven, vereist de Astro-documentatie versie 22.12.0 of hoger en waarschuwt ze dat oneven versies zoals 23 niet worden ondersteund. De editor is meestal VS Code, waar Claude Code ook werkt. De terminal is een zwart venster voor commando’s; die is al ingebouwd in VS Code. Je hoeft dit niet allemaal apart voor Astro te installeren: als je al iets met Claude Code hebt gebouwd, is je omgeving klaar.
Astro vraagt je niet om vooraf iets te downloaden — dat wordt opgehaald met het commando in de volgende stap. Maar je hebt wel de omgeving nodig waarin alles draait. Astro beschrijft het begin als volgt: je hebt drie dingen nodig:

Node.js — versie v22.12.0 of hoger. Oneven versies zoals v23 worden niet ondersteund. Een teksteditor — we raden VS Code aan met onze officiële Astro-extensie. Een terminal — Astro wordt beheerd via de opdrachtregel.

— Astro-documentatie, installatiegedeelte, https://docs.astro.build/en/install-and-setup/
Laten we bekijken wat elk hiervan in de praktijk betekent: 1. **Node.js** — een programma zonder welke Astro en de meeste vibe-codingtools niet werken. Download het van nodejs.org en installeer het zoals een gewone applicatie. Het versienummer in de documentatie wordt na verloop van tijd hoger, dus bezoek voordat je begint de Astro-installatiepagina en controleer de vereiste versie. Je hebt een even versienummer nodig (22, 24); een oneven versie (23, 25) kun je beter vermijden. 2. **VS Code** — een gratis editor van Microsoft. Je opent de projectmap erin, en Claude Code werkt daar ook; die schrijft de code. 3. **Terminal** — een venster waarin je commando’s invoert. Je hoeft die niet apart te installeren: je opent hem via het menu in VS Code en voert daar alle onderstaande commando’s in. Als je Claude Code al hebt geïnstalleerd en er iets mee hebt gebouwd, heb je dit allemaal al en kun je deze stap overslaan. Zo niet, dan heb ik een aparte handleiding over [hoe je Claude Code installeert](https://ailoot.ai/blog/nl/install-claude-code/). ## Hoe maak je met één commando een Astro-project aan?
Belangrijkste punten Een nieuw project maak je aan met het commando `npm create astro@latest` in de terminal. Er start een wizard die een paar vragen stelt (waar je het wilt installeren, welk template je wilt gebruiken, of je afhankelijkheden wilt installeren) en vervolgens de basisstructuur van het project voor je opzet. Als de projectmap nog niet bestaat, maakt de wizard die voor je aan. Daarna ga je met het commando `cd` naar de projectmap en kun je aan de slag. Je hoeft vooraf geen lege map aan te maken.
Hier begint het project zelf, en daar is maar één commando voor nodig. Open de terminal en voer het volgende in: ```bash npm create astro@latest ``` De installatiewizard start. Dit zegt de documentatie erover:

Je kunt het create astro-commando overal op je computer uitvoeren, dus je hoeft vooraf geen lege projectmap aan te maken. Als die map nog niet bestaat, helpt de wizard je om die automatisch aan te maken.

— Astro-documentatie, installatiegedeelte, https://docs.astro.build/en/install-and-setup/
De wizard begeleidt je bij de stappen en stelt een paar vragen: hoe de projectmap moet heten, met welk template je wilt beginnen en of je afhankelijkheden meteen wilt installeren. Voor elke vraag kun je de standaardoptie kiezen — voor je eerste site volstaat een leeg of minimaal template. Heb je “nee” geantwoord op de vraag over het installeren van afhankelijkheden, installeer die dan later handmatig door in de projectmap het commando `npm install` uit te voeren. Wanneer de wizard klaar is, laat die zien dat het project is aangemaakt en stelt hij de volgende stap voor: naar de projectmap gaan: ```bash cd your-project-name ``` Dat is alles wat nodig is om het project aan te maken. Binnenin staat al een werkende basisstructuur voor de site: een aantal bestanden en mappen waarmee je de pagina bouwt. Je hoeft ze niet met de hand te bewerken, maar het is handig om te weten wat waar staat. Astro beschouwt slechts één map als verplicht:

src/pages — een verplichte submap van het project. Zonder deze map heeft de site geen pagina’s en geen routes.

— Astro-documentatie, gedeelte over de projectstructuur, https://docs.astro.build/en/basics/project-structure/
Met andere woorden: `src/pages` is de map met de pagina’s van de site: de startpagina, “over ons” en contactpagina’s. `src/components` (herbruikbare onderdelen zoals kopteksten en knoppen), `src/layouts` (de gedeelde pagina-indeling) en de map `public` voor afbeeldingen en bestanden staan meestal in de buurt. Je hoeft de indeling niet uit je hoofd te leren — onthoud alleen dat pagina’s in `src/pages` staan en verwijs ernaar wanneer je Claude vraagt: “voeg een contactpagina toe.” ## Hoe bouw je de site zelf via Claude Code?
Belangrijkste punten Open de projectmap in VS Code, start Claude Code en leg vervolgens in woorden uit wat je op de site nodig hebt. Claude bewerkt zelf de bestanden in `src/pages` en de aangrenzende mappen. Het werkt het best met kleine, duidelijke taken: “maak een startpagina met een kop, een korte beschrijving en een knop”, daarna “voeg een dienstenpagina toe” en vervolgens “maak de kleuren donker”. Bekijk na elk verzoek het resultaat in de browser en verduidelijk je verzoek zo nodig. Je hoeft hier niet te programmeren. Het is jouw taak om duidelijke instructies te geven en te controleren wat eruit komt.
De basisstructuur staat klaar; nu bouw je de site ermee en neemt Claude Code het over. Open de projectmap in VS Code, start Claude Code en beschrijf in woorden wat je nodig hebt. Claude bewerkt zelf de bestanden in `src/pages` en aangrenzende mappen — jij geeft alleen taken en bekijkt het resultaat. Naar mijn ervaring werkt het het best om in kleine stappen te werken. Eén groot verzoek als “maak een bedrijfswebsite voor me” levert een rommeltje op dat moeilijk te herstellen is. Verdeel het daarom in korte, duidelijke taken en geef die één voor één: 1. “Maak een startpagina: een grote kop, een paar zinnen over wat ik doe en een knop die naar de contactpagina linkt.” 2. “Voeg een dienstenpagina toe met een lijst van drie onderdelen.” 3. “Voeg een contactpagina toe met een telefoonnummer en een link naar Telegram.” 4. “Pas de vormgeving aan: een lichte achtergrond en een groot, goed leesbaar lettertype.” Controleer elke stap voordat je verdergaat — zo merk je makkelijker wanneer er iets misgaat en kun je teruggaan. Waarom kleine taken betrouwbaarder zijn en hoe je AI op koers houdt, hoort bij context engineering: hoe duidelijker de taak en de projectstructuur, hoe voorspelbaarder het resultaat. Astro geeft AI hiervoor een handige structuur: de pagina-inhoud staat los van de vormgeving en pagina’s worden volgens gedeelde regels opgebouwd. Met deze structuur raakt Claude minder vaak in de war en is de kans kleiner dat het iets in de buurt stukmaakt wanneer het één plek bewerkt. Als Claude je bestanden plotseling niet meer ziet of niet-relevant antwoordt, bekijk dan de handleiding over [waarom Claude Code projectbestanden niet kan zien](https://ailoot.ai/blog/nl/claude-code-cant-see-project-files/). Astro is maar één bouwsteen in het werken met AI. Om Claude consequent te laten bouwen wat je nodig hebt, zonder terug te vallen op aannemelijke gissingen, bestaat de volledige inrichting van je project uit: **AI-kloon + Second Brain + Context Engineering**. ## Hoe kun je de site bekijken voordat je die publiceert?
Belangrijkste punten Om de site te bekijken voordat die online staat, heeft Astro een ontwikkelserver. Voer in de terminal in de projectmap het commando `npm run dev` in; Astro start dan een lokale preview — meestal op localhost op poort 4321. Open dit adres in een browser en bekijk je site live. Wijzigingen die Claude in bestanden aanbrengt, zijn direct zichtbaar: verander wat tekst en de pagina wordt vanzelf bijgewerkt. Deze server is alleen voor jou zichtbaar op je computer; hij publiceert de site niet op internet.
Voordat je de site aan de wereld laat zien, bekijk je die op je eigen computer. Astro heeft hiervoor een ontwikkelserver — die toont de site live op je computer. Start die met een commando in de terminal, binnen de projectmap: ```bash npm run dev ``` Astro start een lokale preview en toont het adres in de terminal. Standaard is dat `localhost:4321`. Kopieer het adres en open het in je browser; dan zie je je site. Voorlopig kun alleen jij dit adres openen — niemand van buitenaf kan erbij; dit is je concept. Handig is dat de preview live is: Claude bewerkt een bestand en de pagina in de browser wordt vanzelf bijgewerkt; je hoeft die niet handmatig opnieuw te laden. Dat gaat snel — vraag Claude iets, kijk in de browser, breng een correctie aan en kijk opnieuw. In deze fase werk je de site verder af. Ben je tevreden met het resultaat, publiceer het dan online. ## Hoe publiceer je een Astro-site gratis online?
Belangrijkste punten De eenvoudigste gratis route loopt via GitHub. Upload eerst het project naar een repository op GitHub (een online codeopslagplaats). Koppel daarna een hostingdienst die Astro kan bouwen: Netlify, Vercel of GitHub Pages zelf. De hostingdienst herkent Astro, bouwt de site met het buildcommando en publiceert die op een eigen adres. Telkens wanneer je een nieuwe wijziging naar de repository stuurt, wordt de site opnieuw gebouwd en automatisch bijgewerkt. Claude Code kan je ook helpen dit allemaal met woorden in te stellen.
Je moet de voltooide site ergens neerzetten, zodat andere mensen die via een link kunnen openen. De eenvoudigste gratis route loopt via GitHub: upload eerst de projectcode naar een repository en koppel daarna een hostingdienst die de site bouwt en publiceert. Zo werkt het: 1. **Maak een repository aan op GitHub.** Een repository is een online opslagplaats voor code waar je projectbestanden naartoe stuurt. Claude Code kan je hierbij helpen met instructies in gewone taal: vraag “upload het project naar een nieuwe GitHub-repository” en Claude stelt commando’s voor. Heb je GitHub nog nooit gebruikt, houd dan instructies voor het registreren en aanmelden bij de hand. 2. **Koppel hosting.** Ga naar een van de diensten (Netlify, Vercel), meld je aan via je GitHub-account en kies je repository. De Astro-documentatie beschrijft deze methode zo: de hostingdienst houdt je repository in de gaten, bouwt de site en publiceert die. 3. **Controleer de buildinstellingen.** Meestal herkent de hostingdienst Astro en vult die in wat nodig is. Als je wordt gevraagd dit handmatig in te voeren, is het buildcommando in de documentatie `astro build` (of `npm run build`) en wordt de voltooide site in de map `dist` geplaatst. 4. **Klik op “Publiceren”.** De dienst bouwt de site en geeft je een link zoals `site-name.netlify.app`. Iedereen kan de site op dat adres openen. Dit is de exacte formulering in de documentatie over het koppelen van een repository aan een hostingdienst:

Veel populaire hostingdiensten herkennen je project als een Astro-site en kiezen automatisch de juiste build- en deploymentinstellingen. De hostingdienst houdt de hoofdbranch van je repository in de gaten, bouwt je site opnieuw en publiceert die opnieuw bij elke nieuwe wijziging.

— Astro-documentatie, gedeelte over deployment, https://docs.astro.build/en/guides/deploy/
Daarna verloopt publiceren automatisch: stuur een nieuwe wijziging naar de repository en de site wordt vanzelf opnieuw gebouwd en bijgewerkt; je hoeft verder nergens op te klikken. Er is ook een tweede gratis optie — **GitHub Pages**, waar de site rechtstreeks vanuit de repository wordt gepubliceerd met de eigen tools van GitHub. Astro heeft hiervoor een officiële starter:

Astro ondersteunt een officiële GitHub Action om een project met bijna geen configuratie op GitHub Pages te publiceren; dit is de aanbevolen manier om op GitHub Pages te deployen.

— Astro-documentatie, gedeelte over deployment op GitHub Pages, https://docs.astro.build/en/guides/deploy/github/
Met deze optie is de site te openen op een adres zoals `your-name.github.io/repository-name`, en later kun je er je eigen domein aan koppelen. Ook dit kun je via Claude Code instellen: beschrijf de taak in woorden en Claude maakt het benodigde bestand klaar. ## Hoeveel kost het om een Astro-site te bouwen?
Belangrijkste punten Astro zelf is gratis en opensource — je hoeft er niet voor te betalen. Basis-hosting kan ook gratis zijn: GitHub Pages en de starterabonnementen van Netlify en Vercel, die genoeg zijn voor een lichte Astro-site. De werkelijke kosten zijn voor de AI-tool waarmee je de site bouwt (Claude) en eventueel voor een eigen domein in plaats van het gratis adres van de hostingdienst. De minimale route om een site te bouwen en te publiceren kan dus zonder hostingkosten: je betaalt alleen voor AI.
Laten we het nu over geld hebben. Astro zelf is een gratis, opensource tool; er hangt geen apart prijskaartje aan. Basis-hostingdiensten bieden ook gratis opties: GitHub Pages en de starterabonnementen van Netlify en Vercel, die meestal genoeg zijn voor een lichte Astro-site (gratis abonnementen hebben verkeerslimieten, maar zijn meestal voldoende voor een eenvoudige visitekaartjessite of landingspagina). In de praktijk zijn er dus twee dingen waarvoor je mogelijk betaalt, en zelfs dat hoeft niet altijd. Het eerste is de AI-tool waarmee je de site bouwt. Het tweede is een eigen domein in plaats van een adres zoals `name.netlify.app`; dat is optioneel en kost weinig per jaar. Je kunt het hele traject “een site bouwen en online publiceren” doorlopen door alleen voor Claude te betalen. ## Wat vragen mensen nog meer over Astro-sites en Claude Code?
Belangrijkste punten Korte antwoorden op veelgestelde vragen. Je hoeft niet te kunnen programmeren: Claude schrijft de code, en jij geeft taken in woorden en controleert het resultaat. De voltooide site blijft uit je eigen bestanden bestaan en kan bij elke hostingdienst staan; je zit niet vast aan het platform van iemand anders. Astro is geschikt voor een contentsite — een visitekaartjessite, landingspagina, blog of showcase; voor een complexe persoonlijke accountomgeving kun je beter naar iets anders kijken. En je kunt de voltooide site gratis publiceren via GitHub.
### Veelgestelde vragen Moet je kunnen programmeren om met Claude Code een site te bouwen met Astro? Nee. Ik schrijf al lang geen code meer met de hand; ik doe alles via AI. Je geeft Claude een taak in woorden — “maak een startpagina met dit soort kop” — en Claude Code schrijft en bewerkt de bestanden voor je. Je hoeft de syntaxis niet te kennen. Je moet begrijpen wat voor soort site je wilt en in de browser controleren wat je krijgt. Moet je de projectmap vooraf aanmaken? Nee. Het commando `npm create astro@latest` start een wizard die de map zelf aanmaakt als die nog niet bestaat. Je kunt het commando overal op je computer uitvoeren. Ga na het aanmaken met het commando `cd` naar de projectmap en werk daarin. Hoe kun je de site bekijken voordat die online staat? Voer het commando `npm run dev` uit in de projectmap. Astro start een lokale preview, meestal op localhost:4321, en je kunt de site in de browser op je eigen computer openen. Alleen jij kunt deze preview zien; wijzigingen worden meteen zichtbaar en je hoeft de pagina niet handmatig opnieuw te laden. Kun je een Astro-site gratis publiceren? Ja. De eenvoudigste route is het project uploaden naar een GitHub-repository en gratis hosting koppelen: GitHub Pages, Netlify of Vercel. De hostingdienst bouwt de site en publiceert die op een eigen adres. Je hoeft niet apart te betalen om een lichte site te hosten; er ontstaan alleen kosten als je een eigen domein wilt. Is Astro geschikt voor elk type site? Astro is ontworpen voor contentsites: visitekaartjessites, landingspagina’s, blogs, portfolio’s en showcases voor webwinkels. Daar komt het goed tot zijn recht. Als de kern van het project een complexe webapplicatie is met een persoonlijke accountomgeving en veel acties op elke knop, wordt dat deel meestal met een ander hulpmiddel gebouwd. Ik bespreek de sterke en zwakke kanten van Astro uitgebreider in het artikel over wat Astro is. Waarom is Astro voor vibe-coding beter dan een websitebouwer zoals Tilda? Het verschil zit in wat je eraan overhoudt. Een Astro-site bestaat uit je eigen bestanden, die je zelf bewaart en op elke hostingdienst kunt publiceren; geen externe dienst houdt ze voor je vast. Als je zes maanden later wilt verhuizen of wijzigingen wilt aanbrengen, kun je alles met elk hulpmiddel openen. De keuze tussen Astro en andere tools hangt af van de algemene aanpak van vibe-coding: kies een tool die bij de taak past. De kaart met tools vind je in de handleiding over alternatieven voor Claude Code.
### Bronnen - [Astro-documentatie, installatie en vereisten](https://docs.astro.build/en/install-and-setup/) - [Astro-documentatie, opdrachtregelinterface](https://docs.astro.build/en/reference/cli-reference/) - [Astro-documentatie, projectstructuur](https://docs.astro.build/en/basics/project-structure/) - [Astro-documentatie, een site deployen](https://docs.astro.build/en/guides/deploy/) - [Astro-documentatie, deployment op GitHub Pages](https://docs.astro.build/en/guides/deploy/github/) - [Astro-documentatie, “Waarom Astro?”](https://docs.astro.build/en/concepts/why-astro/)
De complete vibe-codingconfiguratie: **AI-kloon + Second Brain + Context Engineering**. Maak kennis met [Ailoot](https://ailoot.ai/). ## Vragen en antwoorden ### Publiceert de lokale Astro-preview de site online? Nee. npm run dev start een lokale ontwikkelpreview en toont het adres, gewoonlijk localhost:4321. Publicatie is een afzonderlijke stap via een hostingdienst of de implementatieworkflow van GitHub Pages. ### Welke buildinstellingen controleer ik bij een Astro-host? Controleer voor de hier beschreven statische route of de host astro build of npm run build uitvoert en de map dist publiceert. Open na implementatie de openbare URL van de host en controleer de pagina’s daar; alleen een lokale preview bewijst geen publicatie. ## Ailoot · Het bedrijf en zijn projectenportefeuille Ailoot bouwt op opgebouwde operationele ervaring, een groot klantenbestand, een stabiele dienst en doorlopende KPI-controle. Het bedrijf en zijn projectenportefeuille: miljoenen klanten; maandelijkse verkopen in de miljarden. Ailoot gebruikt die operationele ervaring voor API-toegang tot AI-functies in klantproducten, agents, applicaties en automatiseringen.