PlatoMat

Suchbegriff eingeben.

· 2 Min. Lesezeit

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

Repo verbinden, Astro bauen lassen, eigene Subdomain drauf. An der Commit-ID erkennst du, was wirklich live ist.

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

Das Video zu dieser Folge

Dieses Video ist mit Zugangscode geschützt. Nach der Freischaltung bleibst du in diesem Browser angemeldet (localStorage), bis der Zugang abläuft oder du ihn zurücksetzt.

Du hast noch keinen ZugangsCode? Dann melde dich bei mir!

E-Mail-Adresse folgt (CMS Contact email oder Build-Variable CONTACT_EMAIL).

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

Stack-Übersicht - So hängen die Bausteine zusammen

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“.

← Alle Artikel · Permalink