Deploy — Cloudflare Pages + domeinen

De site staat in site/ (Astro, vanilla CSS/JS). Hosting = Cloudflare Pages, auto-deploy vanaf main. Primair domein = storybooksandinsights.com; de drie varianten 301-en daarnaartoe.

1. Cloudflare Pages — het project

Workers & Pages → Create → Pages → Connect to Git → repo mark-notifica/storybooks-insights (Cloudflare GitHub-app toegang geven tot deze privé-repo).

Build-instellingen (exact):

Veld	Waarde
Production branch	`main`
Framework preset	`Astro`
Build command	`npm run build`
Build output directory	`dist`
Root directory (advanced)	`site`

Environment variable toevoegen (voorkomt Node-versie-build-fout):

Naam	Waarde
`NODE_VERSION`	`22`

Save & Deploy → eerste build geeft een *.pages.dev-URL.

2. Custom domain koppelen

Pages-project → Custom domains → Set up a custom domain:

storybooksandinsights.com
www.storybooksandinsights.com

Cloudflare maakt de DNS-records automatisch (apex via CNAME-flattening) én regelt het SSL-cert. Conflict? Als Pages klaagt dat er al een record op de apex staat: verwijder in DNS de geïmporteerde STRATO-placeholder A 217.160.0.248 en AAAA op de apex, en laat Pages z’n eigen record zetten.

3. De drie varianten → 301 naar primair

In elk van de drie zones (storybooks-and-insights.com, insights-and-storybooks.com, insightsandstorybooks.com): Rules → Redirect Rules → Create rule

Name: Redirect → primair
When incoming requests match: All incoming requests
Then:
- Type: Dynamic
- Expression: concat("https://storybooksandinsights.com", http.request.uri.path)
- Status code: 301
- Preserve query string: Aan

Voorwaarde: er moet een proxied (oranje wolk) DNS-record voor de apex + www in die zone staan — de van STRATO geïmporteerde records voldoen; de redirect vuurt aan de Cloudflare-edge (het placeholder-IP wordt nooit echt geraakt). Universal SSL provisiont vanzelf zodra de zone Active is.

Volgorde

Nameservers bij STRATO → Cloudflare (gedaan; wacht op registry-propagatie tot ~24u).
Zones Active in Cloudflare (mail per domein).
Pages-project + build (stap 1) → *.pages.dev werkt.
Custom domain koppelen (stap 2) → primair live.
Redirect Rules in de drie varianten (stap 3).

Wijzigingen uitrollen — preview → productie

De site deployt automatisch vanuit Git. Twee kanalen:

Productie = branch main → live op storybooksandinsights.com. Elke push naar main = nieuwe productie-build.
Preview = branch preview → automatische preview-deploy op de vaste URL https://preview.storybooks-insights.pages.dev (branch-alias; een / in een branchnaam wordt een -). Elke push naar preview herbouwt exact die URL; main blijft ongemoeid. (Automatic deployments staan aan voor niet-productie-branches — Cloudflare-default.)

Vaste werkwijze: lokaal werken → npm run build (in site/) groen → commit → push naar preview → checken op de preview-URL (telefoon/incognito) → bevalt het, dan main bijwerken en pushen (= live):

cd ~/projects/storybooks-insights
# ... wijzigingen + commit (op de main-tak lokaal) ...
git branch -f preview main && git push origin preview   # preview bijwerken → verse preview-deploy
# akkoord bevonden? dan live:
git push origin main

Goed om te weten:

Een deploy duurt ~1–2 min; tot de nieuwe build klaar is serveert de URL nog de vórige versie.
Bekende transiënte fout: Cloudflares asset-upload geeft soms HTTP 521 (“Received a malformed response from the API”). Dat is Cloudflare-kant, geen codefout — de build zelf slaagt. Oplossing: in de Deployments-tab bij die deploy → ··· → Retry deployment (of opnieuw pushen).
Controleer in Deployments dat de bovenste rij de juiste commit-hash + groen Success heeft, en open daarna incognito (edge/browsercache). Zit je op de branch-alias (preview.…), niet op een oude per-commit-URL (<hash>.…).

Notities

DNSSEC stond op alle vier uit → geen migratie-risico. Optioneel later weer aanzetten via Cloudflare (DNS → Settings → DNSSEC) mét DS-record terug bij STRATO.
Geen e-mail op deze domeinen in gebruik (mail loopt via notifica.nl). Wil je later mark@storybooksandinsights.com → Cloudflare Email Routing (gratis).
Preview van wijzigingen: zie Wijzigingen uitrollen hierboven (push branch preview → preview.storybooks-insights.pages.dev). Alternatief zonder Git/Cloudflare (lokaal, alleen op het WG-netwerk): astro build → astro preview --host 10.3.152.16 --port 4321 achter een cloudflared quick-tunnel op VPS7.