Je eigen website.
Rustig, stap voor stap.

Eerst: welk onderdeel doet wat?

De route: jouw opdracht → lokale bestanden → GitHub → Cloudflare Pages → bezoeker. Een contactbericht volgt een andere route: bezoeker → formulierdienst → jouw mailbox.

1. Leg de basis klaar

1. Installeer de officiële desktopapp met Codex, log in en open een eigen lokale projectmap. Gebruik voor een nieuwe site een aparte map. Voor deze site is dat GPTChats test project.
2. Zorg dat je zelf kunt inloggen bij GitHub en Cloudflare. Bewaar accounts onder jouw eigen beheer. Kies in Codex de geopende map als werkplek en vertel wat je wilt laten maken.
3. Heb je al een domein gekocht? Bewaar ook de toegang tot die leverancier. Je hebt die pas bij stap 6 nodig.

Een browserlogin geeft een terminal niet automatisch toegang. Codex kan daarom apart om toestemming of een veilige login vragen. Deel geen wachtwoorden of geheime tokens in de chat.

Bron: OpenAI: desktopapp, inloggen en een projectmap openen.

Voorbeeldopdracht: “Maak in deze map een kleine Nederlandstalige website met HTML en CSS. Zet de openbare bestanden in dist. Laat eerst een lokale preview zien en publiceer pas na mijn akkoord.”

Vraag om één wijziging tegelijk. Je kunt met GPT teksten bedenken en ze door Codex in de website laten zetten. Voor deze gewone HTML-site hoeven bezoekers geen AI te gebruiken en is geen OpenAI API-sleutel in de site nodig.

2. Maak en bekijk de bestanden

In dit project staan de webpagina’s in dist: index.html is de homepage, daarnaast zijn er gedichten.html, verhalen.html, contact.html en deze handleiding.html. De vormgeving staat in de HTML-bestanden zelf.

1. Laat Codex de pagina maken of aanpassen.
2. Vraag: “Start de lokale preview en open hem.” Een lokale preview draait alleen op jouw computer.
3. Bekijk de tekst, klik de links en maak het venster smal om een telefoon na te bootsen. Ververs na een wijziging.

Wil je de preview zelf starten? Open een terminal in de projectmap en gebruik, als Python 3 geïnstalleerd is:

python3 -m http.server 8765 --bind 127.0.0.1 --directory dist

Open daarna http://127.0.0.1:8765/. Is de poort bezet, gebruik de al draaiende preview of laat Codex een andere poort kiezen. Stop jouw server met Ctrl+C. Een lokaal adres is geen link die je vriendin op haar eigen computer kan gebruiken.

3. Bewaar het project op GitHub

Voor dit project is dit al geregeld: SNKL-Holding/proefproject, branch main. Een branch is een ontwikkellijn; main is hier de versie die gepubliceerd wordt.

1. Voor een nieuwe site: maak op GitHub een lege privérepository. Laat Codex Git initialiseren en die repository als origin koppelen. Origin betekent hier: de online bestemming.
2. Stel toegang in. Wil je toegang tot slechts één repository, gebruik dan een fine-grained personal access token: GitHub Settings → Developer settings → Personal access tokens → Fine-grained tokens → Generate new token.
3. Kies de juiste eigenaar, een vervaldatum en Only select repositories. Selecteer alleen jouw site. Voor deze HTML-upload: Contents read/write; Metadata read-only. Organisatiebeleid kan extra goedkeuring vereisen.
4. Laat Codex de push klaarzetten. Plak het token alleen in een verborgen wachtwoordprompt. Gebruik een credential helper; op deze Mac is dat de sleutelhanger met opslag per repositorypad.

Een brede GitHub CLI OAuth-login is geen garantie op toegang tot slechts één repository. Een token hoort nooit in een bestand, remote-URL of chat. Bij verlopen toegang vervang je het veilig; geef niet zomaar ruimere rechten.

Bron: GitHub: beperkte tokens maken en beheren.

4. Zet de site online met Pages

1. Ga naar Cloudflare → Workers & Pages → Create application → Pages → Import an existing Git repository.
2. Koppel GitHub. Kies bij toegang voor de Cloudflare GitHub-app alleen de repository van deze website.
3. Selecteer de repository en kies Begin setup. Vul onderstaande waarden in.
4. Klik Save and Deploy wanneer je wilt publiceren. Wacht tot de deployment gelukt is en open het toegewezen adres.

Deze site hoeft niet te worden omgezet door een bouwprogramma. Pages publiceert de bestanden uit dist. Het huidige adres is proefproject.pages.dev. Kies voor een nieuw project een beschikbare naam. Controleer actuele abonnementsgrenzen; koop geen extra’s alleen om deze basisstappen te volgen.

Bron: Cloudflare: statische HTML publiceren.

5. Van aanpassing naar nieuwe live versie

Commit betekent: een versie lokaal vastleggen. Push betekent: die versie naar GitHub sturen. Deployment betekent: Cloudflare zet die versie online.

1. Vraag Codex bijvoorbeeld: “Verander de hoofdkleur en laat mij eerst de lokale preview zien.”
2. Bekijk het resultaat. Geef daarna duidelijk akkoord: “Publiceer deze wijziging.”
3. Codex slaat op en pusht naar main. In deze bestaande setup start Cloudflare dan automatisch een nieuwe deployment.
4. Controleer in Pages → Deployments of de nieuwe versie succesvol is. Open de live website en ververs.

Zelf uitvoeren kan ook, vanuit de projectmap en met Git-toegang al ingesteld:

git status
 git add dist
 git commit -m "Pas website aan"
 git push origin main

Lees bij git status welke bestanden meegaan. Hier mogen alleen openbare webbestanden in dist staan. Een privé-GitHub-repository maakt de gepubliceerde HTML niet privé. Bij een fout kun je Codex vragen de laatste wijziging terug te draaien met een nieuwe commit en opnieuw te publiceren.

Vraagt een automatische controle om rechtstreeks akkoord in de uitvoeringstaak? Geef dat daar zelf. Een bericht dat door een andere taak is doorgegeven kan onvoldoende zijn.

6. Koppel je al gekochte domeinnaam

Je hoeft de domeinnaam niet opnieuw te kopen of te verhuizen. De registrar is de leverancier bij wie je hem kocht. Die blijft de registratie en verlenging regelen. Voorbeelden hieronder gebruiken example.com; vervang dat door jouw eigen domein.

Kies eerst je adres

example.com is het hoofddomein (apex). www.example.com is een subdomein. Voor het hoofddomein moet de DNS-zone in hetzelfde Cloudflare-account als Pages staan. Alleen een subdomein kan ook met DNS bij je huidige leverancier.

A. Hoofddomein via Cloudflare DNS

1. Voeg het domein toe aan Cloudflare. Maak eerst een kopie/export van de bestaande DNS-records bij je huidige DNS-provider; vergelijk die met de scan van Cloudflare en vul ontbrekende records aan.
2. Controleer vóór de overstap alle website- én mailrecords. De scan kan gegevens missen.
3. Volg de Cloudflare-instructies voor nameservers: dit zijn de beheerders van je DNS. Bij actieve DNSSEC moet je de overstap volgens de officiële instructies voorbereiden; een oude DS-verwijzing kan het domein onbereikbaar maken.
4. Vervang bij je registrar de huidige nameservers door de twee die Cloudflare voor jouw domein aanwijst. Wacht op status Active. Herstel daarna DNSSEC met de nieuwe Cloudflare-gegevens volgens de instructies.

Bron: Cloudflare: nameservers overstappen en DNSSEC.

Het domein aan Pages verbinden

1. Open Pages → proefproject → Custom domains → Set up a custom domain. Vul je domein in en volg de voorgestelde DNS-koppeling.
2. Voor een subdomein met externe DNS: voeg het eerst in Pages toe, maak daarna bij de DNS-provider een CNAME voor bijvoorbeeld www naar proefproject.pages.dev. Gebruik bij een andere site de eigen Pages-naam.
3. Wacht totdat de domeinstatus en het HTTPS-certificaat actief zijn. Test https://. DNS- en certificaatverwerking kan tijd kosten; omzeil geen browserwaarschuwing.

Alleen een CNAME toevoegen is niet genoeg: Pages moet de domeinnaam ook kennen. Voor zowel www als zonder www koppel je beide en kies je daarna één voorkeursadres met een redirect. Zie www doorsturen naar het hoofddomein.

Bron: Cloudflare Pages: eigen domeinen.

7. Houd website en e-mail uit elkaar

Een gekocht domein is een adres, geen gevulde mailbox. Pages host de website, maar levert in deze setup geen mailbox. Je kunt formulierberichten laten aankomen in een bestaande mailbox. Voor een adres als hallo@example.com maak je die mailbox of alias eerst aan bij een e-mailprovider die je gebruikt.

Verwijder deze gegevens niet om een website te koppelen. Gebruik exact de waarden van je mailprovider. Mailserver-hostnamen horen DNS-only te blijven als de provider dat vereist; zet geen webproxy voor een gewone mailserver. Controleer na de DNS-overstap óók inkomende en uitgaande gewone e-mail.

Bron: Cloudflare: e-mailrecords instellen.

8. Laat een contactformulier echt bezorgen

Onze contactpagina is bewust een demo. mauriceenclaire@test.nl is fictief. Er wordt niets verstuurd. Een knop of een mailto-link maakt nog geen betrouwbare formulierverwerking; mailto opent slechts de mailapp van de bezoeker.

Eenvoudige route: Formspree

1. Maak zelf een Formspree-account en een nieuw formulier. Controleer de actuele inzendlimieten en kies wat bij je site past.
2. Kies een echte ontvangende mailbox die je beheert. Voeg die toe en bevestig de verificatiemail. Stel dit adres in als ontvanger in de formulierinstellingen of e-mailactie van de workflow.
3. Kopieer de unieke formulier-URL uit het dashboard. Deze ziet eruit als https://formspree.io/f/FORMULIER_ID. De formulier-URL is openbaar; het is geen geheime API-sleutel.
4. Laat Codex het demoformulier vervangen door een echt HTML-formulier met method="POST" en die URL als action. Geef velden een name, bijvoorbeeld name, email en message. Verwijder de demo-handler die verzending nu tegenhoudt.
5. Gebruik type="email" voor het e-mailadres en verplichte velden waar nodig. Het veld name="email" kan als Reply-To dienen: zo gaat je antwoord naar de bezoeker, terwijl de ontvangende mailbox apart in Formspree is ingesteld.

Bronnen: Pages + Formspree, HTML-formulier aansluiten, geverifieerde ontvanger en Reply-To.

Laat de dienst spamfiltering en servercontrole afhandelen en stel de beschikbare bescherming in. Browservalidatie helpt bezoekers, maar houdt bots niet zelfstandig tegen. Laat alleen succes zien nadat de dienst de inzending heeft geaccepteerd; bij een fout moet de bezoeker kunnen herstellen. Vraag alleen noodzakelijke gegevens en leg kort uit dat de formulierdienst ze verwerkt.

Optioneel: een eigen klein stukje servercode

Meer controle nodig? Laat Codex een Pages Function maken, bijvoorbeeld functions/api/contact.js in de repository-hoofdmap, buiten dist. Het formulier stuurt dan naar /api/contact. Die servercode controleert velden en lengtes, begrenst misbruik en vraagt een e-maildienst zoals Resend om te verzenden. Dit vraagt meer onderhoud dan een formulierdienst.

Bewaar de mail-API-sleutel als secret in de Pages-instellingen en lees hem alleen op de server. Stop hem nooit in HTML, browser-JavaScript of Git. Gebruik een vaste ontvanger; laat bezoekers niet kiezen naar wie je server mailt. Bij Turnstile moet de server de token via Siteverify controleren; alleen het zichtbare vinkje is niet voldoende.

Bronnen: Pages Functions en secrets en Turnstile servervalidatie.

Bij een eigen maildienst verifieer je het verzenddomein met de voorgeschreven DNS-records, waaronder SPF en DKIM. Gebruik een gecontroleerde afzender en zet het bezoekersadres in Reply-To, niet zomaar in From. Stem DMARC af op je mailconfiguratie. Voeg niet blind een tweede SPF-record toe en vervang geen bestaande ontvangst-MX: volg de providerinstructies, liefst voor een apart verzendsubdomein.

Bron: Resend: verzenddomein verifiëren.

9. Test de hele keten — tot in je inbox

1. Open de echte website op je eigen domein, op een telefoon en in een privévenster. Controleer HTTPS, de homepage en alle links.
2. Vul een testbericht in met een herkenbare tekst zoals “Formuliertest 12 september 14:30” en een e-mailadres dat je zelf kunt controleren.
3. Controleer de bevestiging op de website én de inzending in het dashboard van de formulierdienst. Een bevestiging betekent nog niet dat de e-mail al in je inbox ligt.
4. Open de bedoelde mailbox. Zoek het testbericht ook in spam. Controleer naam, e-mailadres en volledige berichttekst.
5. Klik Antwoorden. Controleer dat het antwoord naar het gebruikte bezoekersadres gaat en stuur een testantwoord. Kijk of dat daar aankomt.
6. Test ook een leeg verplicht veld en ongeldig e-mailadres. Een fout mag niet als succesvolle verzending worden getoond.

Als iets niet werkt

• Oude website? Controleer of de push gelukt is en Pages de juiste commit heeft uitgerold. Ververs zonder cache.
• Eigen domein werkt niet? Controleer Custom domains, nameservers, DNS-doel en certificaatstatus. Werkt pages.dev wel, dan zit het probleem waarschijnlijk bij de domeinkoppeling.
• Geen inzending in het formulierdashboard? Controleer de action-URL en of de oude demo-code verzending nog blokkeert.
• Wel inzending, geen mail? Controleer de geverifieerde ontvanger, e-mailactie, spammap, limieten en afleverlog van de dienst.
• Gewone mail stuk na DNS-overstap? Vergelijk de bewaarde mailrecords met de nieuwe DNS-zone en laat de mailprovider meekijken.

Handige opdracht voor Codex: “Controleer de live site en het formulier stap voor stap. Toon waar de keten stopt. Wijzig geen domein- of mailinstellingen zonder mij eerst de concrete wijziging te laten zien.”

Pas wanneer het bericht in de juiste mailbox staat en antwoorden werkt, is je contactroute echt klaar.