KI Build Workshop · Für Fortgeschrittene

Selbst deployen mit GitHub

THE COI

Der Profi Weg mit Versionskontrolle: Dein Code lebt in einem GitHub Repository, Cloudflare Pages hängt daran. Ab dann veröffentlicht dich jeder git push automatisch neu, ganz ohne manuelles Hochladen. Du bekommst gratis eine saubere Historie aller Versionen dazu.

Warum dieser Weg: Einmal eingerichtet, ist Veröffentlichen nur noch git push. Jede Änderung ist als Version gespeichert, du kannst jederzeit zurück, und mehrere Leute können am selben Tool arbeiten. Das ist der Weg, mit dem auch COI selbst arbeitet.

Was du brauchst: ein GitHub Konto (kostenlos, github.com), Git installiert (git-scm.com, hast du aus dem Workshop schon), ein Cloudflare Konto und dein Tool als Ordner mit einer index.html.

Ein Repository anlegen

Auf github.com oben rechts auf +, dann New repository (neues Repository). Vergib einen Repository name (Name), etwa mein-tool. Wähl Private (privat) oder Public (öffentlich), beides geht. Lass die Häkchen bei README und Co. leer und klick Create repository (Repository erstellen).

Dein Tool ins Repository bringen

Öffne dein Terminal (Mac: cmd und Leertaste, Terminal)(Windows: Startmenü, PowerShell) und wechsel in deinen Projektordner (cd, Leerzeichen, Ordner reinziehen, Enter). Dann diese Zeilen nacheinander. Ersetz DEIN-NAME und mein-tool durch deine echten Angaben, die genaue Zeile zeigt dir GitHub direkt nach dem Anlegen an.

Einmalig: Projekt vorbereiten und hochladen

git init
git add .
git commit -m "Erste Version"
git branch -M main
git remote add origin https://github.com/DEIN-NAME/mein-tool.git
git push -u origin main

Beim ersten git push fragt GitHub nach deiner Anmeldung. Am bequemsten ist dafür GitHub Desktop (grafisches Programm, meldet dich einmal an und übernimmt das Hochladen komplett per Klick). Alternativ meldest du dich mit einem Personal Access Token an, das GitHub dir in den Einstellungen erstellt.

Ganz ohne Terminal: Dateien direkt im Browser hochladen

Bei einem kleinen Tool aus wenigen Dateien geht es auch ohne Git: Öffne dein leeres Repository auf github.com, klick uploading an existing file (vorhandene Datei hochladen) und zieh deine Dateien per Drag and Drop hinein, dann Commit changes (Änderungen übernehmen). Für Updates dasselbe, oder du steigst später auf git push um.

Cloudflare Pages mit dem Repository verbinden

Auf dash.cloudflare.com in der linken Leiste unter Build das Feld Compute aufklappen, dann Workers & Pages (Arbeiter und Seiten) und auf Create (erstellen). Ganz oben in den Optionen steht Connect GitHub (mit GitHub verbinden), klick es an. Erlaube Cloudflare den Zugriff auf dein GitHub und wähl dein Repository mein-tool aus.

Wichtig bei den Build Einstellungen: Dein Tool ist reines HTML, es muss nichts gebaut werden. Setz Framework preset (Vorlage) auf None (keine), lass Build command (Build Befehl) leer und lass das Ausgabeverzeichnis auf dem Standard. Dann Save and Deploy (speichern und veröffentlichen). Nach wenigen Sekunden ist deine Adresse mein-tool.pages.dev live.

Ein Update veröffentlichen

Ab jetzt ist es das Schönste am ganzen Weg: Du änderst deine Datei, und drei kurze Zeilen bringen sie live. Cloudflare merkt den push von selbst und deployt automatisch neu, gleiche Adresse, neue Version.

Änderung veröffentlichen

git add .
git commit -m "Update"
git push

Im Cloudflare Projekt kannst du unter Deployments (Bereitstellungen) live zusehen, wie deine neue Version hochkommt.

Eigene Domain verbinden

Wie beim direkten Cloudflare Weg: dein Projekt, Reiter Custom domains (eigene Domains), dann Set up a domain (Domain einrichten) und deine Wunschadresse wie tool.deine-domain.de eintragen. Liegt die Domain schon bei Cloudflare, ein Klick, sonst trägst du einmal den gezeigten CNAME bei deinem Anbieter ein. HTTPS kommt automatisch dazu.

Der Unterschied zum direkten Cloudflare Weg: Dort lädst du bei jedem Update selbst hoch. Hier deployt dich Cloudflare automatisch, sobald du pushst, und du hast jede Version sauber gespeichert. Etwas mehr Einrichtung am Anfang, danach der ruhigste und mächtigste Weg.

Für den Workshop reicht der einfache Weg: sag es Claude, es deployt für dich.
← Zurück zur Landkarte