Website bouwen met Codex: zo bouw en beheer je je bedrijfssite

Routes

Website bouwen met Codex: vier routes en hoe je kiest

Met "codex website" bedoelt de één de website van Codex zelf en de ander een site die je met Codex bouwt. Deze pagina gaat over het tweede. Er zijn vier routes, en de keuze hangt af van één vraag: wil je dat de code van jou is en bij een host naar keuze staat, of wil je zo snel mogelijk iets online zonder technische opzet?

Waarom wij de route met een eigen repo aanraden

Drie redenen. De code staat in jouw GitHub-account, dus je kunt morgen van host of van tool wisselen. Elke wijziging wordt een pull request met een eigen previewadres, zodat je ziet wat er verandert voordat een bezoeker het ziet. En Codex cloud kan aan die repo werken terwijl je laptop dicht is: je geeft een opdracht vanaf je telefoon en keurt het resultaat later goed. Dat laatste is het verschil met de meeste tutorials, die stoppen zodra de site één keer live staat.

Astro of Next.js?

Voor een brochuresite met diensten, over ons, contact en een blog kies je Astro. Waarom: Astro levert standaard gewone HTML-pagina's op, zonder server die kan haperen of geld kost, en Codex hoeft minder bewegende delen te begrijpen. Kies Next.js als je site later inlogfuncties, een klantportaal of veel dynamische data krijgt, of als je developer Next.js al kent. Codex werkt met allebei; op 30 oktober 2026 staan op npm Astro 7.4.4 en Next.js 16.4.3. Twijfel je, begin met Astro: een brochuresite later omzetten is minder werk dan een te zware opzet onderhouden.

Werk je met Claude?

Dan is website beheren met Claude Code je pagina, met een Next.js-route en CLAUDE.md in plaats van AGENTS.md. Twijfel je tussen de twee tools, lees dan eerst Codex vs Claude Code. Wil je een site zonder code en zonder Codex, bijvoorbeeld als artifact, dan staat dat in de tutorial website bouwen met Claude.

Benodigdheden

Wat je nodig hebt en wat het kost

Voor de aanbevolen route heb je vijf dingen nodig. Alleen het ChatGPT-abonnement en eventueel het domein kosten geld; de rest kan op een gratis plan, mits je het juiste plan kiest. De europrijzen van ChatGPT komen uit onze Nederlandse prijssnapshot van 31 juli 2026; de actuele bedragen en limieten staan op wat Codex kost.

Plus of Business?

Kies Plus als je de site alleen bijhoudt en er geen klantgegevens in de chat komen. Kies Business zodra meerdere collega's meewerken of je klantinformatie in Codex plakt. Waarom: op Plus en Pro kunnen gesprekken standaard gebruikt worden om modellen te verbeteren, tenzij je dat uitzet in de data controls; op Business gebeurt dat standaard niet. De hele afweging staat op privacy en zakelijk gebruik.

Waarom niet Vercel Hobby

Vercel definieert commercieel gebruik breed: al het aanprijzen van een product of dienst valt eronder, net als betaald worden om de site te bouwen. Een bedrijfssite op Hobby zet je dus tegen de voorwaarden in. Netlify zegt in zijn eigen FAQ dat het gratis plan voor commerciële projecten en bedrijven gebruikt mag worden. Daarom gebruikt deze pagina Netlify; wil je Vercel, reken dan met Pro.

Wat je verbruik opdrijft

De eerste bouw van een site kost de meeste Codex-ruimte, omdat Codex veel bestanden schrijft en de build herhaaldelijk draait. Beheer daarna is lichter: een tekstwijziging raakt een paar bestanden. Bouw je de eerste versie op een middag, verdeel dan het werk over meerdere sessies als je een limiet raakt. Hoe de vensters werken staat op Codex-limieten; welk model je voor welke klus kiest staat op Codex-modellen.

Stappenplan

Van lege map tot live: een website bouwen met Codex in acht stappen

Volg de stappen in deze volgorde; bij elke stap staat waarom. Je werkt in de Codex-weergave van de ChatGPT desktop-app voor macOS of Windows. Werk je liever in de terminal, dan installeer je de CLI met npm install -g @openai/codex en start je hem met codex in je projectmap. De installatie per besturingssysteem staat op Codex installeren.

De startprompt

#CONTEXT
Je bouwt een bedrijfswebsite voor [bedrijfsnaam], een [soort bedrijf] in [plaats]. De lezer is een potentiële klant die op zijn telefoon wil weten of wij zijn probleem oplossen en hoe hij ons bereikt.
#DOEL
Een snelle Astro-site met de pagina's home, diensten, over ons, contact en blog, die ik zelf kan beheren.
#WERKWIJZE
Stel eerst maximaal vijf vragen over wat je echt nodig hebt. Maak daarna een plan met paginalijst en mappenstructuur. Bouw pas na mijn akkoord.
#INFORMATIE VAN MIJ
Diensten: [lijst]. Werkgebied: [regio]. KVK-nummer: [nummer]. Bezoekadres: [adres]. Telefoon en e-mail: [gegevens].
#OUTPUT
Nederlandse teksten in de je-vorm, korte zinnen, één H1 per pagina, KVK-nummer en adres in de footer, een contactformulier dat werkt met Netlify Forms.
#BELANGRIJKE REGELS
Verzin geen feiten, prijzen, reviews of certificaten. Zet [AANVULLEN] waar je informatie mist. Plaats geen scripts die cookies of tracking toevoegen. Controleer aan het eind of elke pagina een title, meta description en H1 heeft.
#BEPERKINGEN
Geen externe lettertypen of trackers zonder mijn akkoord.

Welke regel het verschil maakt

"Verzin niets, zet [AANVULLEN] neer" voorkomt het vaakste probleem bij een AI-site: overtuigende teksten met een certificaat, jaartal of klantaantal dat niet klopt. "Geen scripts die cookies plaatsen" houdt je site buiten de cookieregels tot jij bewust kiest voor analytics. Verwacht na de eerste ronde een bruikbare opzet, geen eindversie: de teksten moet je zelf nalopen op feiten en toon.

AGENTS.md

AGENTS.md: de huisregels van je website

AGENTS.md is het bestand dat Codex bij elke run leest. Codex begint in de hoofdmap van je project en loopt omlaag naar de map waarin je werkt; een bestand dichter bij je werk telt zwaarder. Samen mogen de bestanden standaard 32 KiB zijn (de instelling project_doc_max_bytes), dus houd het kort. Een AGENTS.md voor een website kun je ook als Codex-reviewer gebruiken: regels onder een kop Code Review Rules gebruikt Codex als het je pull requests op GitHub beoordeelt.

Een AGENTS.md voor een MKB-website om aan te passen

# Website [bedrijfsnaam]

## Bedrijfsfeiten (alleen deze gebruiken)
- Handelsnaam: [naam], KVK [nummer], bezoekadres [adres]
- Telefoon [nummer], e-mail [adres], werkgebied [regio]
- Diensten: [lijst]. Prijzen noemen we niet op de site.

## Schrijfstijl
- Nederlands, je-vorm, zinnen onder de 15 woorden
- Geen Engelse termen als er een gewoon Nederlands woord is
- Geen superlatieven en geen verzonnen cijfers; ontbreekt iets, zet [AANVULLEN]

## Techniek
- Astro, build met npm run build, controleer met npm run build voordat je klaar meldt
- Afbeeldingen als WebP in src/assets, maximaal 200 KB, met Nederlandse alt-tekst
- Geen nieuwe pakketten, lettertypen of scripts zonder akkoord

## Code Review Rules
### Inhoud
- Markeer elk nieuw cijfer, jaartal, certificaat of klantcitaat dat niet in Bedrijfsfeiten staat
### Privacy
- Markeer elk script of pakket dat cookies plaatst of gegevens naar een derde stuurt
### Vindbaarheid
- Markeer een pagina zonder title, meta description of precies één H1

Welke regels het meeste doen

De sectie Bedrijfsfeiten met "alleen deze gebruiken" voorkomt dat Codex een oud telefoonnummer uit een eerdere tekst overneemt of een plaatsnaam verzint. De regel "controleer met npm run build" zorgt dat Codex een kapotte build zelf ziet voordat jij hem ziet. En de Code Review Rules werken als vangnet: OpenAI schrijft dat Codex op GitHub alleen ernstige problemen meldt (P0 en P1), dus de regels die jij daar zet, bepalen wat voor jouw site als ernstig telt. Ze vervangen geen eigen controle van de preview.

Controleer wat Codex heeft ingelezen

Draai in de hoofdmap: codex --ask-for-approval never "Summarize the current instructions." Klopt de samenvatting niet met je bestand, dan staat AGENTS.md op de verkeerde plek of is hij leeg. Codex bouwt de instructies bij elke run opnieuw op, dus na een aanpassing start je gewoon een nieuwe sessie. Waar Codex het bestand zoekt, een algemeen sjabloon en hoe je het met CLAUDE.md deelt, staat op AGENTS.md voor Codex.

Beheren

Website beheren met Codex: elke wijziging via een pull request

Hier zit wat Codex eigen heeft. Met Codex cloud geef je een opdracht vanaf het web, de desktop-app of je telefoon. Codex werkt in een eigen omgeving met een kopie van je repo, toont de diff en opent op jouw verzoek een pull request. Netlify bouwt daar automatisch een preview van, op een adres als deploy-preview-42--jouwsite.netlify.app. Ziet het er goed uit, dan merge je en staat de wijziging live. Dit richt je één keer in; environments, secrets en kosten staan uitgebreid op Codex cloud.

Codex aanspreken in de pull request zelf

Faalt de build of wil je een kleine correctie, dan schrijf je in de pull request een reactie die met @codex begint, bijvoorbeeld "@codex fix de mislukte build" of "@codex maak de koppen op de dienstpagina korter". Codex start dan een cloud-taak met de pull request als context (die draait nog op Codex Cloud (Legacy)) en kan een fix naar die branch pushen. Met @codex review vraag je los een review aan. Waarom dit handig is: je hoeft voor een correctie niet terug naar je laptop.

Kleine wijzigingen kunnen ook lokaal

Zit je toch achter je computer, dan is een lokale chat sneller: je ziet de wijziging meteen in de ingebouwde browser. Werk dan op een eigen branch en push die, zodat je dezelfde preview en review krijgt. Het verschil tussen Local, Worktree en Cloud staat bij de Codex-functies.

Iets kapot op de live site? Eerst terug, dan zoeken

Zet in Netlify onder Deploys de vorige werkende versie terug en zoek daarna pas uit wat er misging. Waarom die volgorde: bezoekers zien binnen een minuut weer een werkende site, en Codex kan daarna rustig de oorzaak in de foute commit zoeken. Vraag bijvoorbeeld: Vergelijk de laatste twee commits en leg uit waarom het formulier niet meer verstuurt. Wijzig nog niets.

Sites

Website maken met ChatGPT Sites: de route zonder repository

Sites laat je een website bouwen, hosten en delen door hem in ChatGPT of Codex te beschrijven. Volgens het Help Center (bijgewerkt eind oktober 2026) is Sites beschikbaar voor Plus en Pro en in Business- en Enterprise-werkruimtes; Free en Go staan er niet bij. De uitsluiting van de EER, Zwitserland en het Verenigd Koninkrijk die bij de lancering in juni gold, staat niet meer in het artikel. Zie je Sites niet in een zakelijke werkruimte, dan bepalen de werkruimte-instellingen en je rol of je erbij kunt.

Wat Sites kost

Bouwen en bewerken telt mee voor je Codex-verbruik. Hosten is apart. Volgens de documentatie is hosting gratis tot en met 31 december 2026; vanaf 1 januari 2027 betaal je in credits voor gebruik boven de hostingruimte van je plan. Indicaties uit de documentatie: ongeveer 16 credits per 100.000 requests, ongeveer 25 credits per maand voor een eigen domein en een database tot 10 GB per site. Op Plus en Pro maak je onbeperkt Sites, maar opslag- en gebruikslimieten gelden over al je Sites samen. Wat een credit in euro kost, publiceert OpenAI niet in de documentatie.

Wat Sites niet doet

Verkopen mag, maar alleen als een externe betaalprovider alle betaalkaartgegevens verwerkt; afhandeling, retouren, support en belastingen blijven jouw verantwoordelijkheid. Andere financiële transacties zijn niet toegestaan, net als gezondheidsgegevens, sites voor kinderen onder 13 en het nabootsen van personen of organisaties. Sommige frameworks, databases, achtergronddiensten en hostingpatronen worden niet ondersteund. In de Codex CLI en de IDE-extensie bewerk je alleen het lokale project; aanmaken, deployen en beheren doe je in ChatGPT op het web of in de desktop-app.

Waar de data staat

Werkruimtes met data residency in de EU of de VS krijgen volgens het Help Center bij nieuwe Sites automatisch hosting en opslag in die regio. Bestaande Sites verhuizen niet mee. Voor persoonlijke Plus- en Pro-accounts noemt OpenAI geen hostingregio. Sla je via een formulier gegevens van bezoekers op, kies dan een zakelijke werkruimte met EU-residency of de route met een eigen host.

Kies Sites of je eigen repo

Kies Sites voor een campagnepagina, een evenementsite of een interne tool die je in een middag wilt delen, en waarbij het niet uitmaakt dat OpenAI host. Kies je eigen repo voor je hoofdwebsite. Waarom: je hoofdwebsite moet jaren meegaan, en met eigen code bij een eigen host ben je niet afhankelijk van hoe een product in beta zich ontwikkelt. Op onze andere Codex-pagina's stond Sites nog als niet beschikbaar in Nederland; dat werken we bij.

WordPress en Shopify

Codex en WordPress of Shopify: wat wel en niet kan

Heb je al een site op WordPress of een winkel op Shopify, dan hoef je niet opnieuw te bouwen. Codex koppel je dan via MCP of een plugin. Het verschil met de repo-route: je werkt in een live systeem, dus begin altijd met leesrechten.

Thema- en plugin-code van WordPress

Staat je WordPress-thema in Git, dan werkt Codex daaraan zoals aan elke andere repo: lokaal, op een branch, met een review. Laat Codex nooit via FTP of de thema-editor op je live site wijzigen. Waarom: daar is geen versie om naar terug te gaan, en een fout in functions.php kan je hele site op wit zetten.

Plugins voor je host

In de officiële pluginrepository van OpenAI staan op 30 oktober 2026 onder meer plugins voor Vercel, Cloudflare, GitHub, Shopify en Stripe. Een Netlify-plugin vonden we daar niet; voor Netlify heb je die ook niet nodig, omdat de GitHub-koppeling het publiceren doet. Wat een plugin is en hoe je er een installeert, staat op Codex-skills en plugins.

Nederland

Nederlandse regels voor je website: cookies, AVG, KVK, iDEAL en toegankelijkheid

Codex bouwt wat je vraagt. Welke regels gelden, weet het niet uit zichzelf, en de meeste Engelstalige tutorials slaan dit deel over. Dit is de taakverdeling.

Cookies: zonder trackers heb je geen banner nodig

Volgens Ondernemersplein vraag je toestemming voor privacygevoelige cookies zoals tracking cookies. Toestemming is een actieve keuze: geen vooraf aangevinkte vakjes, geen cookiewall, en intrekken moet even makkelijk zijn als geven. De Autoriteit Persoonsgegevens controleert cookiebanners. Bouwt Codex je site zonder trackers, dan heb je geen banner nodig, maar vermeld wel in je privacyverklaring welke cookies er zijn. Let op met ingesloten video's en kaarten: een YouTube-video plaatst cookies van YouTube. Vraag Codex daarom: Zoek alle scripts, iframes en pakketten die cookies plaatsen of gegevens naar een derde sturen, en maak een lijst. Wijzig nog niets.

API-sleutels horen niet in je repo

Bouw je een checkout met Mollie of Stripe, zet de API-sleutel dan als omgevingsvariabele in Netlify en nooit in een bestand in je repo. Begin met de testsleutel. Waarom: een sleutel in je Git-geschiedenis blijft daar ook na verwijdering vindbaar, en met een livesleutel kan iemand betalingen aanmaken of inzien. In Codex cloud geldt hetzelfde principe: een secret dat je aan een omgeving toevoegt, geeft de agent ook toegang tot de domeinen van die dienst. Voeg alleen toe wat de taak echt nodig heeft.

Verwerkers vastleggen

Netlify en OpenAI verwerken gegevens voor jou. Netlify biedt een verwerkersovereenkomst; OpenAI biedt er een voor Business, Enterprise en de API. Leg ze vast in je verwerkingsregister. Wat dat voor Codex betekent, staat op Codex privacy en veiligheid.

Valkuil

Waar website bouwen met Codex misgaat: wijzigingen die zonder preview live gaan

De fout die we in trainingen het vaakst zien: Codex werkt rechtstreeks op main, of met volledige toegang, en niemand kijkt naar het resultaat voordat het live staat. Het gaat meestal pas mis bij de tiende wijziging, niet bij de eerste. Een contactformulier verstuurt niets meer na een update, er staat een Engelse placeholdertekst op de homepage of een oud telefoonnummer duikt weer op.

Waarom het gebeurt

Codex meldt "klaar" als de taak volgens de opdracht af is en de build slaagt. Of het formulier in de praktijk aankomt, of de tekst klopt met wat je klant moet weten, ziet het niet altijd. Zonder pull request en preview is er geen moment waarop een mens dat controleert. En omdat het de eerste weken goed gaat, sluipt het "even direct doen" erin.

De oplossing in vier vaste checks

Zet de regel in GitHub dat main alleen via een pull request verandert, en loop in elke preview dezelfde vier punten langs: 1. verstuur het formulier en kijk of het aankomt, 2. tik op het telefoonnummer op je telefoon, 3. bekijk de gewijzigde pagina op mobiel, 4. kijk of er geen nieuwe cookies of scripts bij zijn gekomen. Dat kost een paar minuten per wijziging en vangt de fouten die een review van de code mist.

De tweede valkuil: internet en secrets in de cloud

OpenAI waarschuwt dat internettoegang voor de agent het risico op prompt injection vergroot: een webpagina of issue kan instructies bevatten die Codex volgt. Laat internettoegang in je cloudomgeving uit. Heb je het toch nodig, kies dan een lijst met toegestane domeinen en beperk de methoden tot GET, HEAD en OPTIONS, zoals de documentatie aanraadt.

Ons oordeel

Ons oordeel: wanneer je dit zelf doet en wanneer niet

Een eigen website bouwen en beheren met Codex is voor veel MKB-bedrijven haalbaar. De bouw is niet het lastige deel. Het lastige deel is dat iemand de site daarna maandenlang bijhoudt, previews controleert en weet hoe je terugzet als het misgaat.

Doe het zelf als

je een brochuresite hebt met een handvol diensten en een blog, er één vaste persoon is die elke week een kwartier voor de site heeft, en die persoon bereid is een preview te controleren voordat hij op merge drukt. Waarom die drempel: een site waar niemand naar kijkt, veroudert met of zonder Codex, en de winst van Codex zit in dat bijhouden.

Doe het niet zelf als

je een webshop met honderden producten en eigen afrekenlogica wilt, je site klantgegevens opslaat achter een inlog, of niemand in het team de preview wil controleren. Kies dan voor een webbouwer, of houd Shopify of WordPress en gebruik Codex alleen voor teksten. Wil je dat een offerteaanvraag van je site direct in AFAS of Exact belandt, dan is dat een koppeling met eigen beveiligingseisen; dat bouwen we in een Agent Sprint.

Nederlandse taal en je Microsoft 365-omgeving

Codex schrijft goed Nederlands, maar wisselt zonder instructie tussen je en u en neemt Engelse termen over uit code en documentatie. Leg de aanspreekvorm en verboden woorden daarom vast in AGENTS.md. Werk je met Microsoft 365, laat Netlify Forms de aanvragen dan mailen naar je gedeelde mailbox in Outlook. Waarom: dan komen aanvragen binnen waar je team al werkt, zonder extra koppeling.

Een voorbeeld: een installatiebedrijf met acht medewerkers

Stel: een installatiebedrijf heeft een site van acht pagina's die al twee jaar niet is bijgewerkt, omdat elke wijziging via een webbouwer liep. De officemanager laat Codex de site opnieuw bouwen in Astro, met de bedrijfsfeiten in AGENTS.md. Daarna gaat het zo: op maandag verandert de storingsdienst, de officemanager typt de nieuwe tijden op de telefoon in de ChatGPT-app, Codex opent een pull request, Netlify maakt een preview, de officemanager loopt de vier checks langs en drukt op merge. De eigenaar krijgt de reviewmelding van Codex mee in GitHub. Wat Codex hier niet doet: bepalen of de nieuwe tekst klopt met wat de monteurs echt doen. Dat blijft mensenwerk.