SOP 04-02 — Website bouwen & live zetten
Doel (uitkomst) Een klant-website staat live op het eigen domein, geverifieerd bereikbaar (HTTP 200), vanuit een eigen repo met auto-deploy.
Wanneer Na een afgetekende brief + direction-lock (SOP 04-01).
Uitvoerder Website-bouwer
Eigenaar Website-lead
Duur Afhankelijk van omvang; setup vóór de bouw ~30 min
Benodigd vooraf WEBSITE-BRIEF.md + page-spec; GitHub- en Cloudflare-toegang; domein/DNS-toegang van de klant
🎥 Video — nog opnemen (repo → CF Pages → domein koppelen)

Klaar = (controleerbaar)

  • Eigen repo BLURR-Marketing/<klant>-site bestaat.
  • Gekoppeld aan een Cloudflare Pages-project (push → auto-deploy).
  • Custom domein gekoppeld in Cloudflare.
  • npm run build geeft exit 0 (output getoond).
  • De live URL geeft HTTP 200 (getest, niet aangenomen).

Stappen (volgorde is verplicht)

Harde regel (AGENTS.md #6 / docs/conventions.md): repo + hosting + domein vóór de eerste regel paginacode. Nooit alleen lokaal bouwen.

  1. Maak de repo BLURR-Marketing/<klant>-site (eigen repo, niet in deze werkbank).
  2. Koppel Cloudflare Pages aan de repo via Git-integratie (push → auto-deploy).
  3. Koppel het custom domein in Cloudflare (DNS bij de klant/registrar).
  4. Bouw de site vanuit WEBSITE-BRIEF.md + page-spec. Stack: Astro 5 + Tailwind 4 (+ React-islands waar nodig). Secties = component-library-slugs, niet zelf verzinnen.
  5. Bouw lokaal / verifieer: npm run build moet exit 0 geven. Draai relevante Playwright-tests (npm run test:local tegen localhost:4321).
  6. Push → auto-deploy. Controleer de deploy in Cloudflare.
  7. Verifieer live: open de custom-domein-URL, controleer HTTP 200 en dat de pagina echt goed rendert (niet alleen "deploy geslaagd").
  8. Zet de status vast in de project-PROGRESS.md / feature_list.json.

Checklist

  • Repo + CF Pages + domein ingericht vóór de bouw
  • npm run build exit 0 (output getoond)
  • Tests groen
  • Live URL HTTP 200 + visueel gecontroleerd (desktop + mobiel)
  • State bijgewerkt (PROGRESS.md, feature_list.json)

Valkuilen / veelgestelde vragen

  • Alleen lokaal / los op een server → code onvindbaar en niet aanpasbaar. Altijd repo + CF Pages.
  • "Deploy geslaagd" = klaar → nee. Done = de live URL geeft 200 én rendert goed. Zie docs/operating-standard.md (done = verifieerbare staat).
  • Eigen layout verzinnen → gebruik de component-library.

Gerelateerd

  • Vorige: SOP 04-01 — Intake → brief
  • Repo-regels: AGENTS.md, docs/conventions.md, docs/verification.md
  • Component-index: tools/component_slugs.json, blurr-prototyper/

Laatst bijgewerkt: 2026-07-11 · Eigenaar: Website-lead