Begin hier

Welkom bij de handleiding van je website

Alles wat je moet weten om de website van Café 't Huchie zelf bij te houden. Geschreven voor iemand die dit nog nooit eerder gedaan heeft. Geen voorkennis nodig.

Hoe je dit leest

Links staat de inhoudsopgave. Je hoeft niet alles te lezen. Zoek het hoofdstuk dat bij je vraag past, of typ bovenin een woord in het zoekvak.

Je kunt bijna niets kapot maken

De website bewaart van elke pagina een geschiedenis. Ga je de fout in, dan zet je een oudere versie in twee klikken terug. Zie Versies terugzetten.

En zolang je op Bewaar concept klikt in plaats van op Publiceren, ziet niemand je werk. Je kunt dus rustig rondkijken en dingen uitproberen.

Als je er niet uitkomt

Wat er in deze handleiding staat

• Begin hier en De eerste keer: wat dit is, hoe je inlogt, waar alles staat.
• Tekst en foto's aanpassen: het dagelijkse werk. Waarschijnlijk het enige deel dat je echt nodig hebt.
• Gevonden worden in Google: wat SEO is en wat jij eraan kunt doen.
• Toernooien en biljart: het biljartarchief, speciaal voor dit café gebouwd.
• Als er iets misgaat: veelvoorkomende problemen en de oplossing.
• Voor je websitebouwer: de technische kant. Alleen nodig voor wie programmeert.
• Overdracht: wat er nog geregeld moet worden en welke toegang je nodig hebt.

Klik op elke schermafbeelding om hem groot te bekijken. De rode rondjes in de plaatjes horen bij de genummerde stappen in de tekst eronder.

Begin hier

Wat is deze website

Café 't Huchie in Veenendaal bestaat sinds 1897. De website vertelt dat verhaal, laat de kaart zien, toont de openingstijden, en bewaart het complete biljartarchief.

De website heeft twee helften

Alles wat je in het beheerscherm verandert en publiceert, staat meteen op de website. Je hoeft niemand te bellen en er is geen wachttijd.

De pagina's die er nu zijn

Hoe hij eruitziet op een telefoon

Meer dan de helft van de bezoekers komt op een telefoon. De site past zich daar vanzelf op aan.

Begin hier

Woordenlijst

Twaalf woorden die je in het beheerscherm tegenkomt. Meer hoef je niet te kennen.

De eerste keer

Wat is Payload en waarom is het er

Vroeger moest je voor elke tekstwijziging op een website een programmeur bellen. Payload lost dat op.

Payload is een beheerscherm waarin je zelf de teksten en foto's aanpast, zonder ook maar één regel code. Het doet drie dingen:

1. Het bewaart alle tekst en alle foto's in een database.
2. Het geeft jou een scherm om die tekst en foto's aan te passen.
3. Het geeft de website die informatie, zodat de bezoeker hem ziet.

De inhoud zit niet in de website zelf

Waarom Payload en niet WordPress

Payload is gemaakt voor sites die precies moeten doen wat de eigenaar wil. Anders dan bij een kant en klaar systeem staat elk invulvakje er met opzet, met een uitleg eronder, en zonder honderd knoppen die je toch nooit gebruikt. Wat jij ziet is speciaal voor dit café gemaakt: een tabblad voor poules, een vinkje voor het aankomende toernooi, een veld voor het te maken aantal caramboles. Dat scheelt jou tijd en het scheelt fouten.

De eerste keer

Alle adressen op een rij

Bewaar deze pagina. Hier staat alles wat je ooit nodig hebt om ergens te komen.

De eerste keer

Inloggen

Het beheerscherm zit achter een wachtwoord. Zo kom je erin.

1. Ga naar https://dev.cafehuchie.driezie.studio/admin en typ in het bovenste vakje je emailadres.
2. Typ in het vakje eronder je wachtwoord. Met het oogje rechts kun je zien wat je typt.
3. Klik op Inloggen. Je komt nu op het overzichtsscherm.
4. Wachtwoord kwijt? Klik hier. Zie Wachtwoord vergeten.

Blijf ingelogd

Je blijft een tijd ingelogd. Als je lang niets doet, verschijnt een venstertje met de vraag of je ingelogd wilt blijven. Klik dan op Ingelogd blijven. Doe je dat niet, dan word je uitgelogd en ben je niet opgeslagen werk kwijt.

Nog geen account

De eerste keer

Wachtwoord vergeten

Kom je er niet meer in, dan is dat zo opgelost.

1. Vul je emailadres in. Dat moet hetzelfde adres zijn als waarmee je inlogt.
2. Klik op Indienen. Je krijgt een email met een link. Klik erop en kies een nieuw wachtwoord.

Komt er geen email

Je eigen wachtwoord veranderen

Ben je gewoon ingelogd en wil je een ander wachtwoord? Klik dan rechtsboven op het rondje, kies je eigen account, en pas het wachtwoord daar aan.

De eerste keer

Rondleiding door het scherm

Je bent ingelogd. Dit zie je, en dit is waar alles staat.

Zie je het menu links niet? Klik dan op het vierkantje links van het woord Dashboard. Dat klapt het menu open en dicht.

De vijf plekken die je het meest gebruikt

1. Pagina's: alle teksten en secties van de website. Hier ben je het vaakst.
2. Media: alle foto's.
3. Evenementen: de biljarttoernooien met poules en uitslagen.
4. Instellingen: openingstijden, adres, telefoon, sociale media. Geldt voor de hele site.
5. Hoofdmenu: welke links bovenaan en onderaan de site staan.

De rest van het menu

Het menu rechtsboven

De eerste keer

De vijf gouden regels

Houd je hieraan en er gaat vrijwel nooit iets mis.

Tekst en foto's aanpassen

Een tekst aanpassen

Dit is verreweg wat je het vaakst doet. In zes stappen.

1. Klik links in het menu op Pagina's.
2. Klik op de naam van de pagina die je wilt aanpassen.
3. Ga naar het tabblad waar de tekst staat. Meestal is dat Secties.
4. Klik op de sectie die je wilt veranderen, zodat hij openklapt. Pas de tekst aan.
5. Klik rechtsboven op Bewaar concept als je nog niet klaar bent.
6. Klaar? Klik op Publiceer wijzigingen. Ververs de website en je ziet het.

Tekst en foto's aanpassen

Concept en publiceren

Het verschil tussen je kladblok en de echte website.

Waar je ziet in welke toestand je zit

Bovenaan het scherm staat altijd de toestand van de pagina:

• Gepubliceerd: wat je ziet staat ook op de website.
• Concept: deze pagina staat nog nergens online.
• Gepubliceerd met wijzigingen: er staat iets online, maar jij hebt daarna nog iets veranderd dat nog niet gepubliceerd is.

De knop Publicatie ongedaan maken zit achter de drie puntjes rechtsboven, naast de publiceerknop.

Tekst en foto's aanpassen

Live preview, meteen zien hoe het wordt

Naast je invulvelden kun je een venster openen dat de pagina laat zien terwijl je typt.

1. Open een pagina.
2. Klik rechtsboven op het kleine schermpictogram naast de publiceerknop.
3. Typ iets in een veld. Het venster rechts werkt vanzelf bij.
4. Klik op Mobiel om te zien hoe het op een telefoon staat.

Tekst en foto's aanpassen

Versies terugzetten

Payload bewaart elke opgeslagen toestand van een pagina. Heb je per ongeluk een tekst weggegooid, dan haal je hem zo terug.

1. Open de pagina.
2. Klik rechtsboven op Versies. Het getal ernaast zegt hoeveel er zijn.
3. Klik op de datum van de versie die je terug wilt.
4. Je ziet nu wat er veranderd is. Klik op Herstel deze versie.
5. De pagina staat weer zoals hij was. Vergeet niet opnieuw te publiceren.

Tekst en foto's aanpassen

De vier tabbladen van een pagina

Elke pagina is verdeeld over vier tabbladen. Zo weet je waar je moet zijn.

1. Algemeen: titel, slug (het adres), ondertitel en onder welke pagina deze hangt.
2. Kop: het blok bovenaan de pagina. De grote foto, de titel eroverheen en eventueel knoppen.
3. Secties: de inhoud van de pagina, opgebouwd uit bouwstenen. Hier ben je het meest.
4. SEO: hoe de pagina eruitziet in Google en op sociale media. Zie SEO per pagina invullen.

Tabblad Algemeen

Tabblad Kop

Tekst en foto's aanpassen

Waarom de site uit blokken bestaat

Elke pagina is opgebouwd uit losse bouwstenen in plaats van uit één groot tekstvak. Dat is een bewuste keuze. Hier lees je waarom, zodat je snapt waarom het beheerscherm eruitziet zoals het eruitziet.

De twee manieren om een website te vullen

Wat dat voor jou betekent

Je hoeft nooit na te denken over lettertypes, kleuren, marges of hoe iets op een telefoon valt. Dat is één keer goed ontworpen en zit in de blokken. Jij levert de inhoud: de tekst, de foto, de prijs, het jaartal.

Het gevolg is dat de site over vijf jaar nog steeds strak oogt, ook als er in de tussentijd honderd wijzigingen zijn gedaan door verschillende mensen.

Waarom er 22 blokken zijn en niet drie

Elk blok lost één soort verhaal op. Een citaat vraagt om een ander beeld dan een lijst met prijzen. Door voor elk soort verhaal een eigen blok te maken, hoef je nooit iets te forceren.

Drie blokken vullen zichzelf

Waarom de openingstijden niet in een blok staan

De openingstijden staan op drie plaatsen op de site: bovenin de balk, op de contactpagina en in de gegevens die Google leest. Zou je ze per blok invullen, dan moet je ze drie keer aanpassen en vergeet je er gegarandeerd één.

Daarom staan ze één keer bij Instellingen, en halen alle blokken ze daar op. Datzelfde geldt voor het adres, het telefoonnummer en de sociale media.

Waarom je de volgorde zelf mag bepalen

De blokken staan onder elkaar in precies de volgorde waarin ze in het beheerscherm staan. Sleep je een blok naar boven, dan staat het op de website ook hoger. Zo kun je de opbouw van een pagina veranderen zonder dat er een programmeur aan te pas komt.

Tekst en foto's aanpassen

Secties, de bouwstenen van een pagina

Een pagina is een stapel bouwstenen boven elkaar. Je kunt ze slepen, toevoegen en weggooien.

Wat je met een sectie kunt doen

Een blok kiezen

Elk blok heeft twee tabbladen

Klap je een blok open, dan zie je binnenin meestal twee tabbladen: Inhoud en Instellingen.

Tekst en foto's aanpassen

Alle 22 blokken

De volledige lijst. Bij elk blok staat waar het voor is en wat je invult.

Openen en tekst

Beeld

Vertellen en overtuigen

Praktisch

Toernooien en sponsoren

Welke blokken geen achtergrondkleur hebben

Veertien van de 22 blokken hebben een tabblad Instellingen met een achtergrondkleur. Acht blokken hebben dat niet en staan altijd op hun eigen kleur: Hero, Content, Menu blok, Beeldband, Tijdlijn, Hoofdsponsor, Sponsorenwand en Archief per jaar.

Tekst en foto's aanpassen

Foto's en Media

Alle foto's van de website staan bij elkaar in Media. Een foto staat daar één keer en je gebruikt hem op zoveel plekken als je wilt.

Een foto uploaden

1. Klik links in het menu op Media.
2. Klik rechtsboven op Nieuw(e) Media toevoegen.
3. Sleep je foto in het vak, of klik erop en kies een bestand van je computer.
4. Vul de Alt tekst in. Eén zin die beschrijft wat je op de foto ziet.
5. Klik op Opslaan.

De drie velden bij een foto

Het focuspunt

Op een grote foto zie je een klein kruisje dat je kunt verslepen. Dat is het focuspunt. De website snijdt foto's bij voor verschillende schermen, en snijdt altijd rond dat punt. Staat er een gezicht op? Sleep het kruisje naar het gezicht, dan wordt dat nooit weggesneden.

Tekst en foto's aanpassen

Het menu aanpassen

Welke links er bovenaan de site staan, en welke onderaan, stel je in bij Hoofdmenu.

Een link toevoegen

1. Klik links onder Instellingen op Hoofdmenu.
2. Klik op de knop om een menu item toe te voegen.
3. Vul bij Label in wat de bezoeker leest, bijvoorbeeld "Feestzaal".
4. Kies bij Link eerst of het naar een pagina van deze site gaat of naar een ander adres. Kies daarna de pagina.
5. Wil je er een uitklapmenu onder? Voeg dan Subitems toe.
6. Sleep het item op de goede plek en klik op opslaan.

Tekst en foto's aanpassen

Instellingen van de hele site

Hier staan de gegevens die op meerdere plekken tegelijk gebruikt worden: het adres, het telefoonnummer, de openingstijden en de sociale media.

Wat er in de tabbladen staat

Tekst en foto's aanpassen

Een nieuwe pagina maken

Bijvoorbeeld een pagina over de feestzaal, of een pagina met vacatures.

1. Klik links op Pagina's en dan rechtsboven op Nieuw(e) Pagina toevoegen.
2. Vul bij Titel de naam in, bijvoorbeeld "Feestzaal".
3. Vul bij Slug het adres in, bijvoorbeeld feestzaal. Kleine letters, geen spaties.
4. Moet de pagina onder een andere hangen? Kies rechts een Bovenliggende pagina.
5. Ga naar Kop en vul de bovenkant van de pagina in.
6. Ga naar Secties en bouw de pagina op met blokken.
7. Vul het tabblad SEO in. Zie SEO per pagina invullen.
8. Klik op Bewaar concept, kijk met live preview of het klopt, en klik dan op Publiceren.
9. Ga naar Hoofdmenu en zet de pagina in het menu, anders vindt niemand hem.

Tekst en foto's aanpassen

Contactberichten lezen

Als iemand het contactformulier invult, komt dat bericht in het beheerscherm te staan bij Contactberichten.

Gevonden worden in Google

Wat is SEO

SEO betekent zoekmachineoptimalisatie. Simpel gezegd: alles wat je doet zodat mensen je website vinden als ze iets in Google typen.

Waarom het bestaat

Stel: iemand in Veenendaal heeft trek in een biertje en typt in Google café veenendaal. Google moet dan uit miljoenen websites kiezen welke tien hij bovenaan zet. Google is een computer, dus hij kan de sfeer van je café niet proeven. Hij kan alleen lezen wat er op je website staat.

SEO is niets anders dan: zorgen dat Google begrijpt waar jouw pagina over gaat, zodat hij hem laat zien aan de juiste mensen.

Wat Google van een pagina ziet

Als Google jouw pagina bezoekt, ziet hij ongeveer dit:

Hoe je pagina in Google verschijnt

Een resultaat in Google bestaat uit drie regels: de blauwe klikbare titel, het groene webadres eronder, en een grijs tekstje. Die eerste en die derde regel bepaal jij.

Wat de website al automatisch voor je doet

Veel is al geregeld. Je hoeft er niets voor te doen.

De vijf dingen die jij wel moet doen

1. Geef elke pagina een duidelijke titel. Niet "Info" maar "Zaalverhuur in Veenendaal".
2. Vul de SEO omschrijving in. Eén zin, ongeveer 150 tekens, die iemand overhaalt om te klikken.
3. Vul de alt tekst bij foto's in. Dat helpt Google én blinde bezoekers.
4. Noem waar je zit. Het woord Veenendaal mag rustig een paar keer in je teksten staan, zolang het natuurlijk klinkt.
5. Houd de openingstijden kloppend. Google laat ze zien. Kloppen ze niet, dan staan mensen voor een dichte deur en dat kost je een slechte recensie.

Wat je vooral niet moet doen

• Woorden stapelen. "Café Veenendaal café bier Veenendaal café" leest niet en Google straft het af.
• Dezelfde titel op elke pagina. Dan kan Google ze niet uit elkaar houden.
• Het adres van een pagina veranderen zonder doorverwijzing. Zie Doorverwijzingen.
• Tekst in een foto zetten. Google kan een plaatje niet lezen. Zet belangrijke tekst als echte tekst op de pagina.

Wat nog meer helpt, buiten de website om

Gevonden worden in Google

SEO per pagina invullen

Elke pagina heeft een tabblad SEO. Zo vul je het in.

1. Open een pagina en klik bovenaan op het tabblad SEO.
2. Vul bij Meta titel in wat er als blauwe regel in Google moet staan. Houd het onder de 60 tekens.
3. Vul bij Meta omschrijving één wervende zin in. Ongeveer 150 tekens.
4. Kies bij Meta afbeelding een mooie liggende foto. Die verschijnt als iemand de link deelt op WhatsApp of Facebook.
5. Kijk of de balkjes groen zijn en publiceer.

Gevonden worden in Google

Doorverwijzingen

Een doorverwijzing stuurt iemand die een oud adres opvraagt automatisch naar het nieuwe adres. Zo raak je geen bezoekers kwijt.

Wanneer je er een nodig hebt

• Je verandert de slug van een pagina die al online staat.
• Je gooit een pagina weg en er is een andere pagina die er dicht bij komt.
• Er staat ergens een oude link, bijvoorbeeld op Facebook of in een gedrukte folder.

1. Klik links in het menu op Redirects.
2. Vul bij Van het oude adres in, bijvoorbeeld /biljart.
3. Kies bij Naar de pagina waar het naartoe moet, of typ een adres.
4. Sla op. De doorverwijzing werkt meteen.

Toernooien en biljart

Hoe de toernooien in elkaar zitten

Dit is het stuk dat speciaal voor Café 't Huchie gebouwd is. Het bewaart het complete biljartarchief: elk toernooi met zijn poules, uitslagen, finales en sponsoren.

Drie dingen vormen samen een toernooi

Waarom een speler per toernooi apart staat

Omdat zijn naam of zijn te maken aantal caramboles per jaar anders kan zijn. Het archief moet precies bewaren wat er destijds stond, ook als dat inmiddels anders is. Wil je toch weten wie iemand is en hoe je hem bereikt, koppel de speler dan aan een Persoon.

Waarom je eerst spelers registreert

Je typt een naam maar één keer. Daarna kies je hem overal uit een keuzelijst: in de poules én in de finalepartijen. Dat scheelt tikwerk en voorkomt schrijffouten waardoor dezelfde man twee keer anders in het archief staat.

Toernooien en biljart

Een nieuw toernooi invoeren

Volg deze volgorde. Wijk je ervan af, dan werken de keuzelijsten voor spelers nog niet.

Stap 1: het toernooi aanmaken

1. Klik links op Evenementen en dan op Nieuw(e) Evenement toevoegen.
2. Vul de Titel in, bijvoorbeeld "Libre toernooi 2026".
3. Vul de Slug in, bijvoorbeeld libre-2026. Dit wordt het adres /toernooien/libre-2026.
4. Vul het Jaar in. Dit is tekst, want bij een competitie staat er soms "2019 tot 2020".
5. Kies de Soort: Libre toernooi, Driebanden of Teamcompetitie.
6. Klik op Bewaar concept. Dit is belangrijk, want pas nu bestaat het toernooi en kun je er spelers aan koppelen.

Stap 2: de spelers registreren

1. Ga naar het tabblad Spelers.
2. Klik op de knop om een speler toe te voegen.
3. Vul de Naam in, precies zoals hij op de site moet staan.
4. Vul Te maken in: het aantal caramboles dat deze speler moet maken. Mag leeg bij een teamcompetitie.
5. Het veld Toernooi staat al goed omdat je vanaf het toernooi werkt.
6. Optioneel: koppel een Persoon als je zijn contactgegevens wilt bewaren.
7. Herhaal voor alle deelnemers en sla op.

Stap 3: de poules invullen

1. Ga naar het tabblad Uitslagen.
2. Wil je een andere kop dan "Groepsfase", vul dan Kop boven de poules in. Bij een teamcompetitie bijvoorbeeld "De teams".
3. Klik op Voeg Poule toe en geef de poule een Naam, bijvoorbeeld "Groep A".
4. Klik binnen de poule op Voeg Regel toe voor elke speler.
5. Per regel: Nr. is het volgnummer (of "C" voor teamcaptain), Speler kies je uit de lijst, Gesp en Ptn zijn de gespeelde partijen en de punten.

Stap 4: de finaleronde invullen

1. Klik onder Poules op Voeg Partij toe.
2. Vul de Ronde in, bijvoorbeeld "Kwartfinale". De volgorde waarin je de partijen zet, is de volgorde op de site. Partijen met dezelfde rondenaam die op elkaar volgen komen onder één kop.
3. Kies bij Thuis een speler uit de lijst en vul zijn Score in.
4. Doe hetzelfde bij Uit.
5. Staat er in de bron geen naam maar een code zoals "W1" of "Winnaar groep 12"? Laat Speler dan leeg en vul de Plaatscode in.
6. Optioneel: Beurten, Doorgangscode en Speeldag, datum of tijd.

Stap 5: sponsoren en verslag

Op het tabblad Verslag schrijf je een uitgebreid verhaal bij het toernooi. Op het tabblad Sponsoren zet je de sponsoren van dat jaar. Een sponsor zonder logo mag: van oude jaargangen zijn soms alleen de namen bewaard.

Stap 6: publiceren

Klik op Publiceer wijzigingen. Het toernooi verschijnt nu in het archief op /toernooien en heeft een eigen pagina op /toernooien/jouw-slug. Je hoeft daarvoor geen enkele pagina aan te passen.

Toernooien en biljart

Een aankomend toernooi tonen

Wil je een toernooi aankondigen dat nog moet komen, dan zet je dat aan op het tabblad Aankomend.

Toernooien en biljart

Spelers en personen beheren

De spelerslijst is het adresboek van het archief. De personenlijst is het echte adresboekje.

Je kunt hier rechtstreeks werken, maar het is bijna altijd handiger om het vanaf het toernooi zelf te doen. Dan staat het veld Toernooi meteen goed.

Personen

De lijst Personen is een intern adresboekje met email, telefoonnummer en woonplaats. Die gegevens komen niet op de website. Ze staan er zodat je iemand kunt bereiken die zich voor een toernooi inschrijft.

Als er iets misgaat

Veelvoorkomende problemen

Negen van de tien keer is het één van deze dingen.

Als er iets misgaat

Wat je beter niet aanraakt

Vier dingen waar je van af moet blijven, en waarom.

Als er iets misgaat

Hulp vragen

Kom je er niet uit, dan is dat geen probleem. Daar is de bouwer voor.

Wat je in je bericht zet

Hoe meer van deze vier dingen je noemt, hoe sneller het opgelost is.

1. Wat wilde je doen. Bijvoorbeeld: "de openingstijden op tweede kerstdag aanpassen".
2. Waar was je. Welke pagina of welk scherm, het liefst met het adres uit de adresbalk.
3. Wat gebeurde er. Wat zag je op het scherm, en wat had je verwacht.
4. Een schermfoto. Op Windows druk je op de Windows toets plus Shift plus S. Plak het plaatje in de mail.

Wat je zelf niet kunt doen

Deze dingen gebeuren op de server en kun je niet vanuit het beheerscherm regelen. Vraag ze aan via de mail.

• Een wachtwoord opnieuw instellen als je er niet meer in komt.
• Nieuwe gebruikers met een hoge rol aanmaken.
• De site naar een ander domein verhuizen.
• Het versturen van email aanzetten.
• Een nieuw soort blok laten bouwen.
• Een reservekopie terugzetten.

Voor je websitebouwer

Wat zit erin

Vanaf hier gaat het over de code. Ben je alleen redacteur, dan hoef je dit niet te lezen. Dit deel is voor de programmeur die de site overneemt.

Twee dingen die het gedrag bepalen

• Alles is force dynamic. Er wordt niets vooraf klaargezet. Elke bezoeker haalt de pagina vers uit de database. Gevolg: een wijziging in de admin is meteen zichtbaar zonder cache te legen, en next build heeft geen database nodig.
• Het schema komt uit migraties. In src/payload.config.ts staat push: false. Verander je een veld, dan maak je zelf een migratie.

Mappenstructuur

src/
├─ payload.config.ts   De kern: collecties, globals, plugins, database.
├─ payload-types.ts    Automatisch gegenereerd. Niet handmatig aanpassen.
├─ collections/        Pagina's, Media, Evenementen, Spelers, enzovoort.
├─ globals/            SiteSettings en MainMenu.
├─ blocks/             De 22 sectiedefinities.
├─ components/         De React componenten (blocks, cards, gallery,
│                      interactive, seo, ui, admin).
├─ app/(frontend)/     De publieke website.
├─ app/(payload)/      Het beheerscherm en de API.
├─ access/             Rollen en rechten.
├─ lib/                Hulpcode en de seed functies.
├─ migrations/         Databasewijzigingen op datum.
├─ scripts/            Onderhoudsscripts.
├─ seed/               Eerste vulling van een lege database.
└─ config/site.ts      Merknaam, beschrijving, email afzender.

Voor je websitebouwer

Lokaal draaien vanaf nul

Zo krijg je de site draaiend op een lege computer.

Wat je nodig hebt

• Node 24.15 of hoger
• pnpm: npm install -g pnpm@10.33.2
• Docker Desktop, of een eigen PostgreSQL 16
• Optioneel de PostgreSQL client tools voor pg_dump en psql

Stap voor stap

git clone <de repo> cafehuchie
cd cafehuchie
pnpm install

Kopieer .env.example naar .env en vul in:

PAYLOAD_SECRET=<lange willekeurige tekst>
DATABASE_URI=postgres://cafehuchie:<wachtwoord>@127.0.0.1:5433/cafehuchie
NEXT_PUBLIC_SERVER_URL=http://localhost:3100
NEXT_PUBLIC_SITE_NAME=Café 't Huchie
NEXT_PUBLIC_SITE_SHORT_NAME='t Huchie
PREVIEW_SECRET=<willekeurige tekst>

Start een database in Docker op poort 5433, want 5432 is vaak al bezet:

docker run --name cafehuchie_dev_db -d -p 5433:5432 \
  -e POSTGRES_USER=cafehuchie \
  -e POSTGRES_PASSWORD=<wachtwoord> \
  -e POSTGRES_DB=cafehuchie \
  postgres:16-alpine

pnpm migrate
pnpm dev

De site draait op http://localhost:3100, het beheerscherm op /admin.

Alle commando's

Voor je websitebouwer

Omgevingsvariabelen

Lokaal in .env, op de server in Coolify onder Environment Variables.

Wat er nu op de server staat

Aanwezig: NODE_ENV, PORT, HOSTNAME, PAYLOAD_SECRET, DATABASE_URI, PREVIEW_SECRET, NEXT_PUBLIC_SERVER_URL, de drie NEXT_PUBLIC_SITE_* waarden, EMAIL_FROM_NAME, EMAIL_FROM_ADDRESS, SMTP_PORT en RECAPTCHA_MIN_SCORE.

Ontbreekt: SMTP_HOST, SMTP_USER, SMTP_PASS, CONTACT_NOTIFY_TO, SENTRY_DSN en de reCAPTCHA sleutels. Daardoor verstuurt de site geen email en staan foutmeldingen en reCAPTCHA uit.

Voor je websitebouwer

Database en migraties

De structuur van de database komt uit de bestanden in src/migrations, op volgorde van datum.

Een veld toevoegen of veranderen

1. Pas het veld aan in de collectie.
2. Draai pnpm payload migrate:create naam_van_de_wijziging.
3. Lees het migratiebestand na. Verwijdert het per ongeluk een kolom met data? Pas het aan.
4. Draai pnpm migrate om hem lokaal toe te passen.
5. Draai pnpm generate:types.
6. Zet de migratie in git. Bij de volgende deploy draait hij vanzelf op de server.

Voor je websitebouwer

Rollen en rechten

Drie rollen, gedefinieerd in src/access/roles.ts.

Voor je websitebouwer

Naar productie zetten

De site draait op Coolify. Belangrijk: Coolify bouwt de code niet zelf. Het draait een kant en klare image die jij naar Docker Hub duwt.

De uitrol in vier stappen

1. Zet je wijzigingen in git en controleer met pnpm lint en pnpm typecheck.
2. Bouw de image met de juiste build argumenten:

   docker build \
     --build-arg NEXT_PUBLIC_SERVER_URL=https://dev.cafehuchie.driezie.studio \
     --build-arg "NEXT_PUBLIC_SITE_NAME=Café 't Huchie" \
     --build-arg "NEXT_PUBLIC_SITE_SHORT_NAME='t Huchie" \
     --build-arg "NEXT_PUBLIC_SITE_DESCRIPTION=Café 't Huchie" \
     -t jelte2847523875/cafehuchie:latest .

3. Push naar Docker Hub:

   docker push jelte2847523875/cafehuchie:latest

4. Ga naar Coolify, open de applicatie cafehuchie en klik op Redeploy.

Naar het echte domein verhuizen

1. Zet een A record van www naar het IP van de Coolify server. Bij Cloudflare: wolk op grijs (DNS only).
2. Zet in Coolify het domein op https://www.cafehuchie.nl. Coolify vraagt zelf een certificaat aan.
3. Zet NEXT_PUBLIC_SERVER_URL op het nieuwe adres, als build variabele én als runtime variabele.
4. Bouw de image opnieuw met dat adres als build argument, push, en rol uit. Dit moet echt, want het adres zit in de browserbestanden.
5. Controleer het slotje, /admin en /sitemap.xml.

Zorg dat poort 80 en 443 open staan in de firewall. Let's Encrypt controleert over poort 80.

Voor je websitebouwer

Backup en herstel

Twee dingen moet je bewaren: de database (alle tekst) en de media map (alle foto's). De code staat in git.

De database ophalen

De productiedatabase staat met opzet niet open naar internet. Twee manieren om er toch bij te komen:

1. Via Coolify. Open de database en zet de publieke poort tijdelijk aan. Maak de reservekopie en zet hem meteen weer uit.

   pg_dump -h <server-ip> -p <poort> -U cafehuchie -d cafehuchie \
     --no-owner --no-privileges -Fc -f live-cafehuchie.dump

2. Via SSH. Log in op de server en draai pg_dump in de databasecontainer. Dan hoef je niets open te zetten. Dit heeft de voorkeur.

Terugzetten op je eigen computer

psql -h 127.0.0.1 -p 5433 -U cafehuchie -d postgres \
  -c "DROP DATABASE IF EXISTS cafehuchie;" \
  -c "CREATE DATABASE cafehuchie OWNER cafehuchie;"

pg_restore -h 127.0.0.1 -p 5433 -U cafehuchie -d cafehuchie \
  --no-owner --no-privileges live-cafehuchie.dump

De foto's ophalen

De database bewaart alleen de bestandsnamen. De bestanden staan in het volume op /app/media. Ontbreken er lokaal een paar, dan haal je ze los op:

curl -o media/<bestandsnaam> \
  https://dev.cafehuchie.driezie.studio/api/media/file/<bestandsnaam>

Voor je websitebouwer

Formulieren en email

Twee soorten formulieren, met dezelfde spambescherming.

De volgorde bij een inzending

1. Valstrikveld. Een onzichtbaar invulvakje bovenaan. Ingevuld betekent robot, bericht wordt weggegooid.
2. Teller. Maximaal vijf berichten per tien minuten per IP adres.
3. reCAPTCHA. Alleen als de sleutels ingevuld zijn. Nu overgeslagen.
4. Opslaan in de admin.
5. Twee emails: één naar het café, één bevestiging naar de bezoeker. Alleen als SMTP ingesteld is.

Email aanzetten

In src/payload.config.ts staat: is SMTP_HOST leeg, dan wordt de mailverbinding helemaal niet aangezet. Zet in Coolify:

Deze waarden zijn alleen op runtime nodig. Opnieuw uitrollen is genoeg, opnieuw bouwen hoeft niet. De teksten van de emails staan in de admin bij Instellingen op het tabblad Email.

Voor je websitebouwer

De losse scripts

Draai ze met pnpm payload run <pad>.

Onderhoud, blijven nuttig

Eenmalig, al gedraaid

Deze hebben ooit iets rechtgezet en zijn klaar. Ze blijven staan als naslag. Draai ze niet zomaar opnieuw: fix-adres.ts, hernoem-toernooien-route.ts, hero-eyebrow.ts, rename-biljart.ts, verwijder-demo-media.ts, voeg-demo-toernooi-toe.ts, wis-poule-toelichting.ts, zet-aankomend-blok-op-biljartpagina.ts.

Wachtwoord terugzetten

$env:RESET_EMAIL="contact@driezie.studio"
$env:RESET_PASSWORD="EenNieuwWachtwoord123!"
pnpm payload run src/scripts/reset-password.ts

Het script praat met de database uit DATABASE_URI. Draai je het lokaal, dan verander je alleen je eigen kopie.

Voor je websitebouwer

Vormgeving en animatie

Hoe de site eruitziet staat in src/app/(frontend)/globals.css: een bijna zwartbruine achtergrond, roomwitte tekst, warm goud als accent. Nergens ronde hoekjes en nergens schaduwen. Diepte komt van dunne lijntjes.

Drie lettertypen

De bewegingen

Opgeruimd in augustus 2026

Vijf componenten die nergens gebruikt werden zijn verwijderd: MenuItemRow.tsx, ServiceCard.tsx (de map cards is daarmee weg), SpiralGallery.tsx, DebugFontMenu.tsx en MediaGridClient.tsx (de map admin is daarmee weg). Samen 829 regels.

Ook opgeruimd: de projectnaam in package.json, de naam van het startscript in de Dockerfile, MCP.md, het aantal blokken en de poort in de README.md, en de standaardpoort in .env.example en src/config/site.ts. Verder negeert eslint nu de mappen .claude/worktrees, .ds-sync, ds-bundle en .design-sync, waardoor pnpm lint van 22583 naar 35 meldingen ging.

Voor je websitebouwer

AI koppeling en foutmeldingen

MCP: content bewerken via een AI assistent

De site publiceert een koppeling op /api/mcp waarmee een AI assistent pagina's kan zoeken, aanmaken en bijwerken.

Wel toegestaan: pagina's, toernooien, arrangementen en media zoeken en aanpassen, en de instellingen en het menu lezen en bijwerken.
Niet toegestaan: verwijderen, versies terugzetten, en alles rond gebruikers, contactberichten, personen, formulieren en doorverwijzingen. Dat is met opzet dichtgezet omdat daar persoonsgegevens in staan.

1. Log in op /admin en ga naar Gebruikers.
2. Maak een aparte gebruiker voor de AI, rol Editor of Admin.
3. Zet API sleutel inschakelen aan, sla op en kopieer de sleutel.
4. Zet die sleutel in de AI client. Nooit in git.

Sentry

Foutmeldingen worden doorgegeven aan Sentry, mits er een DSN gezet is. Dat is nu niet zo, dus er wordt niets doorgegeven.

Aanzetten: maak een Sentry project, zet SENTRY_DSN als runtime variabele en NEXT_PUBLIC_SENTRY_DSN ook als build variabele, en bouw opnieuw. Zonder SENTRY_AUTH_TOKEN worden er geen source maps geüpload en zijn de meldingen samengeperst en lastig te lezen.

Overdracht

Wat nog geregeld moet worden

Gevonden tijdens het schrijven van deze handleiding, op volgorde van belangrijkheid.

Belangrijk

Goed om te weten

Overdracht

Overdrachtslijst

Wat een nieuwe beheerder nodig heeft om verder te kunnen.

Wat je nooit deelt

• PAYLOAD_SECRET en PREVIEW_SECRET
• Het wachtwoord van de database
• De Coolify API sleutel
• API sleutels van gebruikers
• De inhoud van Personen en Contactberichten, dat zijn persoonsgegevens