Martijn Stegink

Onze volleybalvereniging draaide op WordPress. Dat was ooit de logische keuze, en voor wat wij ermee deden was het veel te veel geworden. We plaatsen om de paar weken een nieuwsbericht, we houden een lijst met teams bij en we zetten de trainingstijden online. Daarvoor hadden we een database, een thema, een stapel plug-ins en een hostingrekening van een paar honderd euro per jaar.

De complexiteit zat in het werk zelf. De teams er een beetje netjes op krijgen betekende rommelen met tabellen. Nieuwsberichten en agenda-items hadden allebei hun eigen configuratie, en geen van beide was eenvoudig. De inschrijfformulieren waren een combinatie van Google Spreadsheets en formulieren in WordPress, dus twee plekken om te onderhouden en twee plekken waar iets stilletjes kon ophouden met werken. De site was dynamisch terwijl niets aan onze content daarom vraagt.

Wat ik wilde was het andere uiterste. Een site van gewone bestanden, goedkoop te hosten en makkelijk over te dragen. En ik wilde publiceren met AI: een paar steekwoorden geven, het bericht laten schrijven, en het na mijn akkoord op de site laten zetten. Dat laatste was de eigenlijke reden om eraan te beginnen.

De site draait nu op Hugo met het Blowfish-thema, in een privérepository op GitHub, gebouwd en gepubliceerd door Cloudflare Pages. Elke push naar de hoofdbranch staat binnen twee minuten live. Er is nergens een server van ons, en sinds half september staat er ook geen werkkopie meer op een Mac. GitHub is de bron, dus de site is vanaf elke machine te beheren.

De content ging als eerste over. Vier beleidsstukken en twintig nieuwsberichten, uit een kopie van de WordPress-pagina’s gehaald en omgezet naar markdown. De pagina’s die in WordPress omslachtig waren, werden kleine eigen bouwstenen: een voor een teamkaart, een voor een trainingsdag, een voor een agenda-item, een voor een foto. Een teamkaart krijgt een naam, een trainingstijd, een link naar de competitiepagina van de bond en de spelers als rij namen achter komma’s. De agenda staat in één databestand dat zowel de agendapagina als het blok op de voorpagina voedt, en wat geweest is verdwijnt vanzelf.

De inschrijfformulieren zijn er nu één in plaats van vier. Je kiest waarvoor je je inschrijft en het formulier toont alleen de velden die daarbij horen. Een beachinschrijving gaat naar een andere mailbox dan de rest, en dat wisselt het formulier zelf om. Een statische site kan geen mail versturen, dus het versturen loopt via een externe dienst.

Functioneel is het geworden wat ik zocht. Ik geef Claude een paar steekwoorden, het schrijft het bericht, kiest de bestandsnaam en de datum en plaatst het. Schrijf ik iets over de clubactie die op een bepaalde datum begint, dan herkent het dat dit in het nieuws hoort én in de agenda, en maakt het allebei. Een item weghalen is één opdracht. Ik hoef ook niet vooraf een structuur te bedenken, want ik kan om een voorstel vragen, dat in één zin bijsturen en akkoord geven. Vanavond voegde ik de locatie van een vergadering toe aan een nieuwsbericht en een agenda-item, en het stond live voordat ik de bevestiging uit had gelezen.

Er ging onderweg genoeg mis, en een deel daarvan door mezelf.

Het ergste was een formulier dat de helft van een inschrijving stilletjes opslokte. Iemand vulde het in terwijl de browser de pagina vertaalde. Het script dat bepaalt welke velden zichtbaar zijn vergelijkt de gekozen optie met het Nederlandse woord, en de browser had het Engelse gestuurd. Alle velden die bij die keuze hoorden bleven verborgen en uitgeschakeld, dus ze kwamen nooit in de mail. Verborgen velden worden ook niet gecontroleerd op verplicht, dus het formulier liet zich gewoon versturen. We kregen een inschrijving met een woonplaats en een geboortedatum, zonder naam, zonder adres en zonder enige manier om diegene te bereiken.

Ik heb ook een installatiescript gedocumenteerd dat alleen op mijn eigen iMac bestond. Het was nooit gecommit, de documentatie wees naar een raw-URL op GitHub, en die werken niet op een privérepository. Een verwijzing in documentatie is geen bewijs dat een bestand er is.

Dan was er nog een witte balk over de volle breedte achter de header, die ik met een clip-path had gemaakt. Die knipte ongemerkt het mobiele menu weg, want dat menu is technisch een kind van de header. Op een telefoon ging het menu open en zag je alleen een streepje.

Het verhuizen van de repository naar het clubaccount brak de koppeling met Cloudflare Pages, en een Pages-project heeft geen instelling om naar een andere repository te wijzen, ook niet via de API. De enige route is een nieuw project, opnieuw bouwen, de domeinen verhuizen en het oude weggooien. Daar ben ik een avond mee bezig geweest.

En een kleine domme: nieuwskaartjes worden bijgesneden op drie bij twee, dus het vierkante logo van de clubactie dat ik als voorbeeldplaatje had gezet verloor zijn hoofd en zijn voeten.

Wat ik anders zou doen is bij de data beginnen in plaats van bij de pagina’s. Teams en trainingstijden gingen erin als geneste bouwstenen, wat er goed uitzag maar geen formulier kan worden. Voor een beheeromgeving moet die inhoud alsnog naar databestanden, dus nu wordt het achteraf omgezet. De agenda stond vanaf het begin zo en hoefde niets.

Ik had ook alles meteen op de accounts van de club moeten zetten. Bouwen op mijn eigen GitHub en mijn eigen Cloudflare-account was de snelle route, en het later verhuizen kostte meer dan het meteen goed doen. Nu staat alles bij de club: de repository, de hosting, het domein en de mailbox waar dat allemaal aan hangt. Wie het overneemt krijgt die mailbox en kan de rest zelf opnieuw instellen. Dat is de toets waar ik elke keuze langs leg.

De moeite waard als je zelf een club of vereniging draaiende houdt: vvouderkerk.nl. De techniek eronder is dezelfde die grote sites gebruiken.

Wat je nodig hebt. Een GitHub-account, een Cloudflare-account, en een AI die een shell kan gebruiken. En een domeinnaam. Dat domein kost ongeveer tien euro per jaar. De rest is op deze schaal gratis en blijft gratis, want de site is gewoon een verzameling bestanden en er is geen server om voor te betalen.

Maak mijn fouten niet. Zet alles vanaf de eerste dag op het account van de vereniging en niet op het jouwe. En beslis vóór je begint wie er publiceert. Met één persoon die zich thuis voelt in een gesprek heb je niets anders nodig. Anders heb je er iets bij nodig, en dat is het werk.

Laat de AI het daarna voor je doen. Geef hem de context, zeg wat je wil bereiken en welke onderdelen je wil gebruiken, en vraag om een plan en een eerste opzet voordat hij iets bouwt.

Gebaseerd op mijn eigen projectmap voor de VVO-website, september 2026.