Website bouwen met Claude Code: tutorial in 8 stappen

Een website bouwen met Claude Code doe je in acht stappen. Je zet een betaald Claude-abonnement en de desktop-app klaar, maakt een projectmap met een CLAUDE.md waarin je brandbook staat en geeft een eerste opdracht. Daarna bouw je pagina voor pagina, bekijk je alles op je eigen computer en bewaar je elke goede versie in git en GitHub. Tot slot zet je de website online via Vercel en koppel je je eigen domeinnaam.

Deze Claude Code tutorial gaat over het hoe: van een lege map tot een Claude Code website op je eigen domein. Wat Claude Code is, waar je het gebruikt en wat het kost lees je in de blog over Claude Code. Dat herhaal ik hier niet. Hier lees je in welke volgorde je werkt, wat je bij elke stap doet en waar je op let.

Dit lees je in deze blog:

• Stap 1. Wat je nodig hebt
• Stap 2. Je projectmap en CLAUDE.md met je brandbook
• Stap 3. Je eerste opdracht
• Stap 4. Pagina voor pagina bouwen
• Stap 5. Je website lokaal bekijken
• Stap 6. Versies bewaren met git en GitHub
• Stap 7. Online zetten met Vercel
• Stap 8. Je domeinnaam koppelen
• Veelgemaakte fouten
• Veelgestelde vragen
• De volgende stap

Stap 1. Wat je nodig hebt

Zet dit klaar voordat je begint:

• Een betaald Claude-abonnement. Claude Code zit niet in het gratis abonnement. De actuele abonnementen en prijzen staan op claude.com/pricing.
• De desktop-app van Claude. Voor Mac en Windows. In de app open je het onderdeel Code. Claude Code zit erin, dus je hoeft niets apart te installeren. Lees meer over de desktop-app van Claude.
• Je brandbook. Voor wie je website is, wat je belooft, hoe je klinkt en hoe je eruitziet. Heb je dat nog niet? Begin dan met een brandbook maken.
• Je teksten en foto's. Echte foto's van jou en je werk maken meer verschil dan welk ontwerp ook.
• Een account bij GitHub en bij Vercel. GitHub bewaart je versies, Vercel zet je website online.
• Een domeinnaam. Bijvoorbeeld bij je huidige provider.

Let op bij Vercel: het gratis Hobby-abonnement is volgens Vercel alleen bedoeld voor persoonlijk, niet-commercieel gebruik. Voor een zakelijke website heb je het Pro-abonnement nodig. De prijzen staan op de site van Vercel.

Stap 2. Je projectmap en CLAUDE.md met je brandbook

Maak op je computer een lege map voor je website, bijvoorbeeld website-tuinatelier. Open in de desktop-app het onderdeel Code en kies die map als project. Alles wat Claude Code bouwt komt in deze map.

Daarna maak je het belangrijkste bestand van je project: CLAUDE.md. Dat is een tekstbestand in de hoofdmap van je project dat Claude Code aan het begin van elke sessie leest. Wat erin staat hoef je dus nooit te herhalen. Zet je brandbook er in de kern in:

• voor wie de website is en wat je belooft;
• je tone of voice, met een paar voorbeelden van hoe je wel en niet klinkt;
• je kleuren met kleurcodes en je lettertypes;
• de pagina's die je nodig hebt en het doel van elke pagina;
• vaste werkafspraken.

Een stukje CLAUDE.md kan er zo uitzien:

# Website Tuinatelier Linde

## Voor wie
Gezinnen met een tuin die nooit af lijkt. Ze willen rust, geen showtuin.

## Stem
Je-vorm, rustig en concreet. Geen superlatieven, geen uitroeptekens.

## Uitstraling
Kleuren: #2F4A3A (groen), #F4EFE6 (zand), #C46A3C (accent)
Echte foto's van projecten, geen stockfoto's.

## Werkafspraken
- Werk in kleine stappen en leg elke werkende stap vast in git.
- Vraag het voordat je bestanden verwijdert.
- Controleer elke pagina ook op mobiel.

Houd het bestand kort en specifiek. Volgens de documentatie van Claude Code volgt Claude korte, concrete instructies beter op en blijf je het best onder de 200 regels. Je hoeft het niet zelf te typen: geef Claude je brandbook en vraag om er een CLAUDE.md van te maken. Lees het daarna wel na.

Stap 3. Je eerste opdracht

Begin niet met "bouw mijn website". Laat Claude eerst een plan maken. In de desktop-app kies je hoeveel vrijheid Claude krijgt. In de stand Plan maakt Claude een plan zonder iets te wijzigen. In de stand Manual vraagt Claude toestemming voordat het een bestand aanpast of een opdracht uitvoert en zie je elke wijziging. Dat zijn de rustigste standen om mee te beginnen.

Een goede eerste opdracht ziet er zo uit:

Lees CLAUDE.md. Ik wil een website met een homepage, drie dienstpagina's,
een over-mij-pagina en een contactpagina. Kies een gangbare techniek die
goed werkt op Vercel. Maak eerst een plan: welke techniek, welke mappen
en in welke volgorde je bouwt. Bouw nog niets.

Lees het plan en stel vragen over alles wat je niet begrijpt. Klopt het, dan laat je Claude de basis bouwen: de opbouw van het project, je kleuren en lettertypes, een menu en een footer. Nog geen inhoud.

Stap 4. Pagina voor pagina bouwen

Bouw daarna één pagina tegelijk. Een logische volgorde is homepage, dienstpagina's, over mij en als laatste contact. Geef bij elke pagina mee:

• het doel van de pagina en wat de bezoeker daarna moet doen;
• je eigen teksten of de punten die erin moeten;
• de foto's die je wilt gebruiken.

Heb je eerst een ontwerp gemaakt in Claude Design? Geef dat dan mee. Claude Code bouwt het na in plaats van zelf iets te verzinnen. Zonder ontwerp en zonder duidelijke teksten vult Claude de gaten met het gemiddelde. Dat is de snelste weg naar een website die op alle andere AI-websites lijkt.

Is een pagina klaar? Controleer hem eerst en leg hem vast voordat je aan de volgende begint. Kleine stappen zijn makkelijker te controleren en makkelijker terug te draaien.

Stap 5. Je website lokaal bekijken

Lokaal bekijken betekent dat je website alleen op je eigen computer draait. Niemand anders ziet hem. Vraag Claude om de website te starten. In de desktop-app kan Claude de website openen in een ingebouwd browservenster en zelf controleren of zijn wijzigingen werken. Je kunt het adres ook openen in je eigen browser. Het begint meestal met localhost.

Controleer bij elke pagina:

• kloppen de teksten en staan er geen verzonnen gegevens in;
• werken alle knoppen en links;
• ziet de pagina er goed uit op een smal scherm, zoals een telefoon.

Ontbreekt er iets op je computer om de website te starten? Dan zegt Claude wat er nodig is en helpt het bij het installeren.

Tussenstand: je hebt nu een projectmap met CLAUDE.md, een plan, een basis en je pagina's. Alles draait op je eigen computer. De laatste drie stappen zorgen dat je niets kwijtraakt en dat je website online komt.

Stap 6. Versies bewaren met git en GitHub

Git houdt de geschiedenis van je project bij. Elke keer dat je een stap vastlegt ontstaat er een versie waar je later naar terug kunt. GitHub bewaart die versies online, zodat je project niet verloren gaat als er iets met je computer gebeurt.

Claude Code werkt direct met git. Je vraagt bijvoorbeeld:

Leg deze stap vast in git met een korte beschrijving
en zet hem op GitHub in een privé-repository.

De eerste keer helpt Claude je om je project aan GitHub te koppelen. Maak er een gewoonte van: na elke werkende stap een versie vastleggen. Gaat er daarna iets mis, dan vraag je Claude om terug te gaan naar de laatste goede versie.

Stap 7. Online zetten met Vercel

Vercel haalt je project van GitHub en zet het online. In het dashboard van Vercel kies je een nieuw project, selecteer je je repository en klik je op Deploy. Daarna krijg je een eigen adres dat eindigt op vercel.app.

Vanaf dat moment gaat het automatisch. Zet je een nieuwe versie op de hoofdbranch van GitHub, meestal main, dan zet Vercel die live. Werk je op een aparte branch, dan maakt Vercel een voorbeeldversie met een eigen adres. Die kun je eerst op je telefoon bekijken voordat je de wijziging live zet.

Vergeet niet: voor een zakelijke website heb je bij Vercel het Pro-abonnement nodig. Meer over hosting en de alternatieven lees je in website online zetten.

Stap 8. Je domeinnaam koppelen

Open in Vercel je project, ga naar Settings en dan Domains en klik op Add Domain. Vul je domeinnaam in. Vercel stelt voor om ook de versie met www toe te voegen en een van beide door te sturen naar de andere.

Daarna laat Vercel zien welke instellingen je bij je domeinprovider moet invullen:

• voor je hoofddomein, zoals jouwbedrijf.nl, een A-record;
• voor een subdomein, zoals www.jouwbedrijf.nl, een CNAME-record.

Je kunt ook de nameservers van Vercel gebruiken. Doe dat alleen als je weet wat het betekent. Vercel waarschuwt dat je dan eerst al je bestaande DNS-instellingen moet overnemen, ook die voor je e-mail. Anders komt je mail niet meer aan. Alleen het A-record of CNAME-record aanpassen laat je andere instellingen met rust.

DNS-wijzigingen hebben soms tijd nodig. Zodra Vercel je domein heeft gecontroleerd staat je website live op je eigen adres. Vervang je een bestaande website? Zorg dan dat oude adressen doorverwijzen naar de nieuwe pagina's, zodat je je plek in Google niet verliest.

Veelgemaakte fouten

• Beginnen zonder brandbook. Dan bepaalt Claude hoe je klinkt en eruitziet.
• Alles in één opdracht. Grote opdrachten geven grote fouten die lastig te vinden zijn.
• Geen versies bewaren. Eén verkeerde wijziging en je bent uren werk kwijt.
• Alleen op je laptop controleren. De meeste bezoekers komen via hun telefoon.
• Wachtwoorden in een opdracht plakken. Geheime sleutels horen in de instellingen van Vercel, niet in je code of in een chat.
• Hobby gebruiken voor je bedrijf. Dat is in strijd met de regels van Vercel.

Wil je eerst begrijpen wat er gebeurt als je AI laat bouwen zonder controle? Lees dan de blog over vibe coding.

De volgende stap

Deze tutorial geeft je het overzicht. De stappen zijn niet moeilijk, maar het resultaat hangt af van wat je erin stopt: je merk, je teksten en je controle. Bekijk voor de bredere keuze ook website maken met AI en zelf een website maken.

Wil je het uitgebreid en met kant-en-klare opdrachten voor elke stap? In de training Website bouwen met Claude maak je eerst je brandbook en je paginastructuur, schrijf je teksten die verkopen en ontwerp je in Claude Design. Daarna bouw je met de desktop-app, krijg je een eigen beheersysteem en zet je je website live op je eigen domein. De training heeft 11 modules en een uur persoonlijke sessie voordat je live gaat. Hij kost € 495 excl. btw.