Folge 011: Von GitHub ins Netz: Cloudflare Pages in echten Schritten

Bisher: lokal und GitHub. Jetzt wird’s öffentlich: Cloudflare Pages baut und hostet die fertige Site.

Begriffe ohne Panik

• „Workers & Pages“ (Workers und Pages) unter „Compute“ (Bereich Compute). „Pages“ (statische Websites) = statische Sites aus Git (dein Frontend), passt zu Astro. Workers = Extra-Logik am Edge (später z. B. CMS-Login; OAuth-Brücke: Folge 014).
• R2 / Databases (Speicher/Datenbanken in der Cloudflare-Navigation): für hautuu erst mal egal, aber gut zu wissen.
• Ask AI (KI-Hilfe im Dashboard): Deutsch geht, hilft bei DNS und Regeln.

Stack-Übersicht

Merksatz:

Cursor → commit → push → GitHub → Cloudflare Build → Live

Push auf main = Production (wenn so eingestellt).

Projekt anlegen

1. Cloudflare Dashboard → „Workers & Pages“ → „Compute“ → „Create“ (Erstellen) → „Pages“ → mit GitHub verbinden („Continue with Pages“ (Mit Pages fortfahren) / Import Git).
2. Repo wählen (z. B. hautuu) → „Begin setup“ (Einrichtung starten).
3. „Production branch:“ (Produktions-Branch) main. „Framework preset:“ (Framework-Voreinstellung) Astro (falls angeboten).
4. „Build command:“ (Build-Befehl) npm run build. „Build output directory:“ (Build-Ausgabeordner) dist.
5. „Save and Deploy“ (Speichern und bereitstellen) — erst Build, dann Live auf *.pages.dev.

Im Setup-Assistenten fehlt oft die Node-Version: danach im Projekt „Settings“ (Einstellungen) → „Environment variables“ (Umgebungsvariablen) (Production und Preview) NODE_VERSION = 22 setzen (Cloudflare Build configuration, package.json verlangt Node ≥ 22.12).

Erfolg prüfen unter „Deployments“ (Bereitstellungen) (Link im Log). npm run build lokal braucht Node (Folge 018).

Eigene Domain

„Custom domains“ (Eigene Domains) → z. B. hautoo.storyofai.net. Cloudflare legt oft CNAME und TLS automatisch an, wenn die Zone schon dort liegt.

Welche Version ist live?

Vergleich die ersten paar Zeichen der Commit-ID (des Hashs) in Cloudflare Pages mit denen auf GitHub. Cloudflare, GitHub und die meisten Git-Tools zeigen nur die kurze Form, oft die ersten sieben Zeichen, z. B. in Sublime Merge. Stimmen sie überein, ist es derselbe Stand.

Burger-Menü nur lokal? Live zeigt’s noch nicht, bis du pushst. Test-Zweige und Preview-URLs: Folge 012.

Bei der Installation der GitHub-App für Cloudflare wählst du „Only select repositories“ (nur ausgewählte Repositories) und gibst nur das hautuu-Repo frei, nicht „All repositories“.