Een website bouwen met AI — Hoe deze site tot stand kwam
Deze website die je nu bezoekt is volledig gebouwd in samenwerking met kunstmatige intelligentie. Niet gegenereerd en online gegooid, maar stap voor stap ontwikkeld in een conversatie. Dit artikel beschrijft hoe dat proces eruitzag — en waarom dit de toekomst is van digitale projecten.
De uitgangspositie
Section titled “De uitgangspositie”Ik had een verouderde website. React-gebaseerd, te complex voor wat het moest zijn: een persoonlijke site die mijn werk in leefstijlgeneeskunde, digitale gezondheid en spiritualiteit samenbrengt. De technische schuld stapelde zich op en elke kleine aanpassing kostte onevenredig veel tijd.
Tijd voor iets nieuws. Maar hoe?
Claude als bouwpartner
Section titled “Claude als bouwpartner”Voor dit project werkte ik met Claude, de AI-assistent van Anthropic. Niet via de chatinterface die de meeste mensen kennen, maar via Claude Code — een command-line tool waarmee Claude direct toegang heeft tot je projectbestanden, terminal en development environment.
Het verschil is fundamenteel. In plaats van code te kopiëren en plakken uit een chatvenster, werkt Claude direct in je project. Het leest bestanden, maakt wijzigingen, runt tests, en commit naar Git. Je hebt een gesprek over wat je wilt bereiken, en Claude voert het uit.
Dit is geen “AI die code genereert”. Dit is samenwerken met een digitale collega die toevallig heel snel kan typen.
De technische keuzes
Section titled “De technische keuzes”Samen kozen we voor een moderne, onderhoudsvriendelijke stack:
Astro Starlight
Section titled “Astro Starlight”Een framework specifiek ontworpen voor documentatie en content-sites. Starlight biedt out-of-the-box:
- Meertaligheid (Nederlands, Engels, Spaans)
- Automatische navigatie en zoekfunctie
- Markdown-gebaseerde content
- Snelle laadtijden door statische generatie
Cloudflare Pages
Section titled “Cloudflare Pages”Hosting via Cloudflare’s edge network. Push naar GitHub, en de site wordt automatisch gebouwd en wereldwijd gedistribueerd. Geen servers beheren, geen deployment scripts onderhouden.
GitHub als backbone
Section titled “GitHub als backbone”Alle code in versiebeheer. Elke wijziging traceerbaar. En door de directe koppeling met Cloudflare: push = live.
Het bouwproces
Section titled “Het bouwproces”De site kwam tot stand in iteraties. Geen watervalmethode met uitgebreide specificaties vooraf, maar een lopend gesprek:
Dag 1 — Fundament
- Migratie van React naar Astro Starlight
- Basisstructuur met drie secties (Leefstijl, SmartHealth, Soefisme)
- Nederlandse content overzetten
Dag 2 — Verfijning
- Engelse vertalingen toevoegen
- Sidebar-navigatie optimaliseren
- Styling aanpassen voor betere leesbaarheid
- Blog-structuur per sectie implementeren
Dag 3 — Uitbreiding
- Spaans als derde taal
- Dit artikel schrijven
- Finetuning van vertalingen en navigatie
Wat opvalt: elke stap was een dialoog. “De sidebar voelt niet logisch” — en Claude paste de structuur aan. “Zingeving moet Soefisme worden” — en alle bestanden werden hernoemd, links bijgewerkt, vertalingen aangepast. In minuten, niet uren.
Wat AI wel en niet doet
Section titled “Wat AI wel en niet doet”Laat me eerlijk zijn over de rolverdeling:
Claude deed:
- Alle technische implementatie
- Bestandsbeheer en refactoring
- Vertalingen naar Engels en Spaans
- Git commits en deployment
- Probleemoplossing bij errors
Ik deed:
- Richting bepalen en prioriteiten stellen
- Inhoudelijke keuzes maken
- Kwaliteitscontrole op vertalingen en teksten
- Beslissen wanneer iets “goed genoeg” was
- De menselijke context leveren die AI mist
Dit is cruciaal: AI vervangt geen menselijke oordeelskunde. Het versnelt de uitvoering van beslissingen die je als mens neemt. De vraag “wat wil ik communiceren?” blijft mensenwerk. Het antwoord technisch realiseren — daar excelleert AI.
Lessen voor je eigen project
Section titled “Lessen voor je eigen project”Als je overweegt om AI in te zetten voor een digitaal project, hier wat ik leerde:
1. Begin met een helder doel
Section titled “1. Begin met een helder doel”AI is geen toverstaf. Je moet weten wat je wilt bereiken. “Maak iets moois” levert niets op. “Een drietalige persoonlijke website met focus op drie thema’s en een blog per sectie” — daar kan AI mee werken.
2. Itereer in kleine stappen
Section titled “2. Itereer in kleine stappen”Vraag niet om alles tegelijk. Bouw op, test, verfijn. Elke iteratie levert feedback die de volgende stap informeert.
3. Blijf kritisch
Section titled “3. Blijf kritisch”AI maakt fouten. Soms subtiel, soms flagrant. Controleer vertalingen. Test functionaliteit. Vertrouw, maar verifieer.
4. Kies de juiste tools
Section titled “4. Kies de juiste tools”Niet elke AI-tool is geschikt voor elk doel. Voor technische projecten werkt een tool met directe toegang tot je codebase (zoals Claude Code) veel effectiever dan copy-paste uit een chatvenster.
5. Documenteer het proces
Section titled “5. Documenteer het proces”Dit artikel is daar een voorbeeld van. Door vast te leggen hoe iets tot stand kwam, creëer je waarde voor anderen én voor je toekomstige zelf.
Wil je dit ook?
Section titled “Wil je dit ook?”Geïnspireerd door deze aanpak? Ontdek of we kunnen samenwerken →
Technische details
Section titled “Technische details”Voor de geïnteresseerden, de volledige stack:
| Component | Technologie |
|---|---|
| Framework | Astro 5 + Starlight |
| Styling | Tailwind CSS 4 |
| Fonts | Fraunces (display), Source Sans 3 (body) |
| Hosting | Cloudflare Pages |
| Repository | GitHub (wim-jlam/wim-tilburgs) |
| CI/CD | Cloudflare GitHub Integration |
| AI-assistent | Claude (Anthropic) via Claude Code |
| Talen | Nederlands, Engels, Spaans |