izoard.be is een statische site in HTML en CSS, met ruim zeventig pagina's per taal in het Nederlands, Frans en Engels. We bouwden ze met Claude, vanuit één design system en één stylesheet. Elke wijziging gaat via GitHub vanzelf live op Cloudflare, en elke week wordt de site één punt beter.
De basis is dezelfde als wanneer je bij ons een website laten maken wil: statische HTML en CSS, gebouwd met AI, code op GitHub en live op Cloudflare. Hieronder staat het proces, van huisstijlregel tot wekelijkse verbetering: wat Claude doet, en wat een mens blijft doen.
Leg de regels vast in een design system
Alles op izoard.be volgt één set regels. Ons design system heet Editorial en legt vast welke kleuren, lettertypes en componenten bestaan, en wat nooit mag. We maakten het in Claude Design, en hetzelfde systeem stuurt ook onze decks en advertenties.
Een voorbeeld: kanariegeel (#FFD60A) gebruiken we alleen als vlak, nooit als tekstkleur op papier. Tekstaccenten krijgen goud (#756A0E). Claude hoeft die keuze dus niet bij elke pagina opnieuw te maken.
Hoe je zo'n systeem opbouwt en waarom het werkt, lees je in een design system voor Claude.
Geef Claude een vaste briefing
Claude Code begint elke sessie met een leeg contextvenster. Een bestand CLAUDE.md in de projectmap wordt bij de start van elke sessie ingeladen en geeft blijvende context [1]. In het onze staat hoe de site gebouwd is, welke designregels gelden, hoe publiceren werkt en welke fouten we niet opnieuw willen maken.
Ook de toon staat erin: "je" in het Nederlands, "vous" in het Frans, "you" in het Engels. Anthropic schrijft er zelf bij dat Claude die instructies als context behandelt, niet als afgedwongen configuratie [1]. Nakijken blijft dus nodig.
Bouw statisch, zonder plugins
De site heeft geen CMS, geen database en geen bouwstap. Eén stylesheet geeft alle pagina's hun uiterlijk. Dat houdt ze snel en maakt elke wijziging voorspelbaar.
Een paar keuzes die we met Claude uitwerkten:
- Lettertypes op de eigen server. Ze kwamen eerst van Google Fonts, een extern verzoek dat de weergave ophield. Op mobiel kostte dat volgens onze meting zo'n 780 milliseconden.
- Animaties zonder JavaScript. Blokken schuiven in beeld met de CSS-functie
view(), die een animatie koppelt aan het moment waarop een element in beeld komt [2]. - Een donkere modus met een knop, die standaard de instelling van je toestel volgt.
- Video via Cloudflare Stream, in een lightbox die pas opent als je klikt.
- Een eigen contactformulier dat zijn gegevens via de API naar HubSpot stuurt, zonder het script van HubSpot te laden.
Waarom we statisch verkiezen boven WordPress, en wanneer niet, lees je in WordPress of een statische website.
Verhuis zonder je verkeer te verliezen
De oude WordPress-site had het Frans op de root. De nieuwe zet het Nederlands op de root, het Frans op /fr/ en het Engels op /en/. Een bestand _redirects stuurt elke oude URL met een 301 naar zijn nieuwe tegenhanger.
Cloudflare past dat bestand rechtstreeks toe en aanvaardt tot 2.000 vaste en 100 dynamische redirects [3]. Voor de homepage staat er bewust geen: die is nu de Nederlandse home. Het volledige stappenplan staat in website migreren zonder SEO-verlies.
Test eerst, dan pas live
De code staat in een privé-repository op GitHub. Cloudflare Workers Builds bouwt en publiceert automatisch bij elke push naar de hoofdbranch [4]. Productie komt dus alleen uit die branch, nooit rechtstreeks van een laptop.
Moet een wijziging eerst bekeken worden, dan maakt Claude een testversie met wrangler versions upload. Die krijgt een eigen URL, terwijl productie ongewijzigd blijft [5]. Pas na het akkoord van Bert volgt de commit.
De hosting zelf weegt nauwelijks door: verzoeken naar statische bestanden zijn bij Cloudflare gratis en onbeperkt [6].
| Taak | Claude | Mens |
|---|---|---|
| Designregels | past ze toe op elke pagina | bewaakt het systeem en past het aan |
| Verbeterpunten | voert er één per week uit | kiest doen, niet of later, en de volgorde |
| Testversie | maakt ze en controleert schermbreedtes en thema's | bekijkt ze en geeft akkoord |
| Live zetten | commit en pusht na het akkoord | geeft de go |
Maak de site elke week één punt beter
Op 16 september 2026 volgde een audit van de hele site, met 148 nagekeken verbeterpunten. Bert kiest per punt doen, niet doen of later, en bepaalt de volgorde. Elke week voert Claude één punt uit.
De vaste regels van die verbeterlus:
- Eén punt per week, niet gebundeld met andere wijzigingen.
- Controle op drie schermbreedtes, 375, 768 en 1280 pixels, in het lichte en het donkere thema.
- Nederlands, Frans en Engels tegelijk.
- Geen nieuwe claims of cijfers die niemand aanleverde.
Ook meten hoort bij een site. izoard.be heeft een eigen toestemmingsvenster in drie talen. Hoe toestemming en meting samenhangen, legt Cédric uit in Consent Mode v2 in de praktijk.
Wil je weten hoe jouw site ervoor staat op snelheid, techniek en vindbaarheid? De gratis websitescan zet het op een rij.
Veelgestelde vragen
Kan je een website bouwen met Claude?
Ja. Claude schrijft HTML, CSS en vertalingen, en past ze aan op vraag. Het oordeel neemt het niet over: iemand kiest, kijkt na en keurt goed voor iets live gaat. Werk daarom met versiebeheer en een testversie, zodat elke wijziging zichtbaar en terug te draaien is.
Heb je een CMS nodig om zo'n site aan te passen?
Niet per se. Bij izoard.be past Claude de bestanden aan en zet een push naar GitHub ze live. Publiceert een team elke dag, met meerdere redacteurs en goedkeuringsstappen, dan is een klassiek CMS vaak handiger.
Wat kost hosting op Cloudflare voor een statische site?
Verzoeken naar statische bestanden zijn bij Cloudflare Workers gratis en onbeperkt, en de opslag kost niets extra. Code die bij een verzoek draait, zoals een serverfunctie voor een formulier, valt daar niet onder.
Hoe voorkom je dat een wijziging meteen live staat?
Met een testversie. Cloudflare maakt met wrangler versions upload een versie met een eigen URL, zonder productie te raken. Bij ons gaat een wijziging pas naar de hoofdbranch, en dus live, nadat Bert de testversie goedkeurde.
Bronnen
- How Claude remembers your project — Claude Code Docs (Anthropic), geraadpleegd op 27 sep 2026
- view() (CSS function) — MDN Web Docs, geraadpleegd op 27 sep 2026
- Redirects (Workers static assets) — Cloudflare Docs, geraadpleegd op 27 sep 2026
- Builds (Workers CI/CD) — Cloudflare Docs, geraadpleegd op 27 sep 2026
- Version URLs — Cloudflare Docs, geraadpleegd op 27 sep 2026
- Static Assets: billing and limitations — Cloudflare Docs, geraadpleegd op 27 sep 2026