Eine gratis Website mit GitHub und KI bauen — und sie für immer besitzen

Jahrelang lebte deine Website bei deinem Hosting-Anbieter. Webflow, Framer, WordPress.com — dein Inhalt, dein Design, deine Domain-Einstellungen, deine Dateien, alles auf deren Servern gespeichert und in deren System eingesperrt. Ein Wechsel bedeutete, alles zu migrieren, und irgendetwas ging dabei immer kaputt. Ich kenne das aus erster Hand. Ich habe eine Website auf Webflow gebaut, ein Template gekauft, echte Arbeit hineingesteckt, und als ich umziehen wollte, war die einzige realistische Option, von vorne anzufangen. Man kann den Code technisch exportieren, aber was man zurückbekommt, gehört einem kaum. Davor habe ich Website-Dateien manuell per FTP hochgeladen. Keine der beiden Optionen gab mir etwas, das ich wirklich besass.

So muss das heute nicht mehr laufen. Deine Website kann in einem GitHub-Repository leben, und Hosting wird nur noch der Teil, der sie der Welt zeigt — austauschbar. Wenn du morgen mit deinem Hosting-Anbieter unzufrieden bist, richtest du einfach einen anderen auf dasselbe Repository aus, und fertig. Nichts muss migriert werden. Nichts geht kaputt.

Dieser Guide führt dich durch dieses Modell. Am Ende verstehst du, wie du mit KI-Tools den Code für eine moderne Website schreiben lässt, wie GitHub sie speichert und wie Cloudflare Pages sie gratis veröffentlicht.

Warum GitHub? Was ist ein Repository überhaupt?

Wenn du noch nie mit GitHub gearbeitet hast, klingt das Wort «Repository» wahrscheinlich technisch. Ist es eigentlich nicht. Ein GitHub-Repository ist ein Ordner für dein Projekt, der im Internet liegt und jede Änderung mitverfolgt, die je daran gemacht wurde.

Stell es dir wie Google Docs für Code vor — nur dass es statt einem Dokument ein ganzer Projektordner ist. Jede Datei ist dort: der Code, der deine Website baut, die Inhalte, die du schreibst, die Bilder, die Konfiguration. Und jede Änderung wird festgehalten, mit Zeitstempel und Beschreibung. Wenn etwas kaputtgeht, siehst du genau, was sich wann geändert hat.

Das andere, was GitHub macht: Es ist der Auslöser für deine Website. Verbindest du GitHub mit einem Hosting-Anbieter wie Cloudflare Pages, wird deine Website bei jedem Update deines Main-Branch automatisch neu gebaut und veröffentlicht. Neuen Inhalt schreiben, zu GitHub pushen, deine Website ist innerhalb einer Minute aktualisiert. Kein FTP, kein Admin-Panel, kein manueller «Veröffentlichen»-Knopf.

Deine Website lebt im eigentlichen Sinn nicht auf Cloudflares Servern. Sie lebt in deinem GitHub-Repository. Cloudflare liest sie nur aus und zeigt sie der Welt.

Was ist eine statische Website — und warum ist das wichtig?

Die meisten klassischen gehosteten Website-Plattformen — WordPress, Webflow, viele CMS — sind dynamisch. Lädt eine besuchende Person eine Seite, führt der Server Code aus, fragt eine Datenbank ab, setzt das HTML zusammen und schickt es zurück. Das ist mächtig, bedeutet aber: Du brauchst einen Server, der 24/7 läuft, eine Datenbank, Software-Updates, Sicherheits-Patches.

Eine statische Website ist anders. Sie wird einmal gebaut — HTML, CSS, etwas JavaScript — und dann als reine Dateien ausgeliefert. Kein Server, der bei jedem Besuch Code ausführt. Keine Datenbank. Nichts, das aktualisiert oder gepatcht werden muss. Die Dateien liegen einfach da, und Cloudflare liefert sie an Besucherinnen und Besucher aus, von Servern in ihrer Nähe, wo auch immer auf der Welt sie sind.

Das Ergebnis: schnellere Ladezeiten, nichts zu hacken, nichts zu warten, und Hosting, das komplett gratis sein kann, weil das Ausliefern statischer Dateien im grossen Massstab für Cloudflare fast nichts kostet.

Moderne statische Websites wirken für Besuchende nicht «statisch». Diese Website — goodaiguide.com — ist als statische Website gebaut. Sie hat Suche, Filter, dynamisch wirkende Seiten, responsives Design. Was sie nicht hat: eine Datenbank, eine monatliche Server-Rechnung oder ein CMS, in das ich mich einloggen muss.

Der KI-Teil: Du schreibst den Code nicht selbst

Das ist es, was die Rechnung für Nicht-Entwickler und Nicht-Entwicklerinnen verändert.

Vor ein paar Jahren brauchte es für eine statische Website noch genug HTML, CSS und ein bisschen JavaScript, damit alles funktioniert. Oder man bezahlte jemanden, der das konnte. KI hat diese Voraussetzung praktisch abgeschafft.

Du beschreibst, was du willst. Die KI schreibt den Code. Du prüfst ihn, forderst Änderungen in normaler Sprache an, und die KI passt an. Das technische Wissen ist immer noch da — es steckt einfach in der KI, nicht in dir.

Drei Tools eignen sich dafür besonders gut, und alle arbeiten mit GitHub:

Claude Code ist das fähigste. Es läuft in deinem Terminal (der Kommandozeile auf deinem Computer), verbindet sich mit deinem Projektordner, liest alle deine Dateien und macht Änderungen selbstständig. Du beschreibst, was du willst, in normaler Sprache — «füge der Startseite einen Newsletter-Anmeldebereich hinzu» oder «erstelle eine Seite für mein Portfolio» — und Claude Code schreibt, testet und committet die Änderungen. Es versteht dein ganzes Projekt als Context, was bedeutet: Änderungen sind konsistent, und nichts geht kaputt. Der Haken: Du musst dich mit einem Terminal wohlfühlen, was ein paar Minuten Einrichtung braucht, aber schnell zur Routine wird.

Google Antigravity ist eine browserbasierte Entwicklungsumgebung, angetrieben von Googles Gemini-Modellen. Keine Installation nötig — Browser öffnen, Projekt starten, und Antigravitys Agenten planen und bauen für dich. Es ist hervorragend, um eine Website schnell von null auf eine funktionierende erste Version zu bringen. Gut für visuell denkende Menschen und für Projekte, bei denen du zuerst etwas Funktionierendes sehen willst, bevor du es verfeinerst.

Google Jules verfolgt einen asynchronen Ansatz. Du verbindest es mit deinem GitHub-Repository und vergibst Aufgaben — «prüfe diese Seite auf Accessibility-Probleme» oder «füge einen Blogpost mit diesem Inhalt hinzu». Jules arbeitet im Hintergrund und präsentiert dir ein Ergebnis zur Prüfung. Kein Terminal, keine IDE — nur eine Aufgabenbeschreibung und ein Ergebnis. Es funktioniert vom Handy genauso wie vom Notebook aus. Gut für Wartung und leichte Anpassungen, sobald die Website steht.

Ich nutze auf dieser Website alle drei, je nachdem, was ich brauche. Komplexe strukturelle Änderungen laufen über Claude Code. Schnelle visuelle Experimente laufen über Antigravity. Inhaltsupdates unterwegs laufen über Jules. Sie kommen sich nicht in die Quere — und das liegt an GitHubs Branching-System.

Branches: Warum sich mehrere KI-Tools nicht gegenseitig im Weg stehen

Das lohnt sich zu verstehen, selbst wenn du nie vorhast, mehr als ein Tool zu nutzen.

GitHub kennt ein Konzept namens Branches. Stell sie dir als parallele Versionen deines Projekts vor. Der Main-Branch ist deine live geschaltete, veröffentlichte Website. Jeder andere Branch ist eine Arbeitskopie, in der du Änderungen machst, ohne die Live-Website zu beeinflussen.

Wenn ein KI-Tool — oder du selbst — Änderungen macht, passieren sie auf einem separaten Branch. Bist du damit zufrieden, werden sie in den Main-Branch gemerged, was ein neues Deployment auslöst. Sind die Änderungen schlecht oder unvollständig, verwirfst du den Branch. Der Main-Branch bleibt unangetastet, bis du bereit bist.

So arbeiten professionelle Software-Teams seit Jahren. Und deshalb kann ich an einem Tag Claude Code nutzen, am nächsten Antigravity und Jules auf dem Handy — alles am selben Projekt —, ohne dass sich die Tools gegenseitig stören. Jedes Tool arbeitet auf seinem eigenen Branch. Der Main-Branch bleibt sauber.

Hosting einrichten: GitHub mit der Welt verbinden

Sobald deine Website in einem GitHub-Repository existiert, musst du sie mit einem Hosting-Anbieter verbinden. Das ist der Schritt, der sie tatsächlich veröffentlicht.

Mehrere Anbieter bieten das gratis an:

Anbieter	Gratis-Tarif	Eigene Domain	Build-Minuten
Cloudflare Pages	Unbegrenzte Websites, unbegrenzte Bandbreite	Ja, gratis SSL	500/Monat
Vercel	Unbegrenzte persönliche Projekte	Ja, gratis SSL	6000/Monat
Netlify	1 Website pro Projekt	Ja, gratis SSL	300/Monat
GitHub Pages	1 Website pro Konto	Ja (mit Konfiguration)	Via GitHub Actions

Alle vier beobachten dein GitHub-Repository und deployen neu, wenn sich der Main-Branch ändert. Alle bringen automatisch HTTPS mit (das Vorhängeschloss im Browser). Für eine persönliche Website oder ein kleines Projekt funktioniert jedes davon.

Ich nutze Cloudflare Pages, weil Cloudflare bei mir auch das DNS meiner Domain verwaltet, was die Einrichtung der eigenen Domain einfacher macht. So geht’s.

Cloudflare Pages einrichten: Schritt für Schritt

Bevor du startest: Du brauchst ein GitHub-Konto (gratis auf github.com) und ein Cloudflare-Konto (gratis auf cloudflare.com). Der Code deiner Website sollte bereits in einem GitHub-Repository liegen. Fängst du bei null an, bitte ein KI-Tool, das Projekt zu erstellen und zu GitHub zu pushen — das ist eine vernünftige erste Aufgabe zum Auslagern.

Schritt 1 — GitHub mit Cloudflare verbinden

Logg dich bei Cloudflare ein. In der linken Seitenleiste zu «Workers & Pages» → «Pages» gehen. Auf «Create a project» → «Connect to Git» klicken. Cloudflare den Zugriff auf dein GitHub-Konto erlauben, wenn du danach gefragt wirst, dann das Repository auswählen, das du deployen willst.

Schritt 2 — Build konfigurieren

Cloudflare muss wissen, wie es deine Website bauen soll. Die Einstellungen hängen davon ab, welches Framework dein KI-Tool verwendet hat. Übliche Optionen:

• Astro: Build-Befehl npm run build, Output-Verzeichnis dist
• Next.js: Cloudflare erkennt das meist automatisch
• Reines HTML: kein Build-Befehl nötig, Output-Verzeichnis ist dein Root-Ordner oder public

Bist du unsicher, frag dein KI-Tool: «Was sind die Cloudflare-Pages-Build-Einstellungen für dieses Projekt?» Es sagt dir genau, was einzutragen ist.

Auf «Save and Deploy» klicken. Cloudflare führt den ersten Build aus. Das dauert ein bis zwei Minuten. Ist er fertig, hast du eine funktionierende URL unter [etwas].pages.dev.

Schritt 3 — Eigene Domain hinzufügen

Hast du eine eigene Domain (z. B. deinemarke.com), kannst du sie in den Pages-Projekteinstellungen unter «Custom domains» verbinden. Cloudflare führt dich durch das DNS-Setup — meist das Hinzufügen eines CNAME-Records, der deine Domain auf die Pages-URL zeigen lässt.

Ist deine Domain woanders registriert, musst du entweder die Nameserver auf Cloudflare umstellen oder CNAME-Records bei deinem Registrar hinzufügen. Ich nutze Gandi — klares Interface, transparente Preise, keine Dark Patterns — und das Setup dauerte etwa fünf Minuten. Ist dieser Schritt trotzdem verwirrend, egal bei welchem Registrar, kopiere die Cloudflare-Anleitung in dein KI-Tool und lass es dir genau für deinen Fall erklären.

Schritt 4 — Das war’s

Jedes Mal, wenn du Änderungen auf deinen Main-Branch auf GitHub pushst, baut und deployt Cloudflare deine Website automatisch neu. Keine manuellen Schritte. Der ganze Prozess dauert von Commit bis live etwa eine Minute.

Von überall aus aktualisieren

Ist die Pipeline einmal eingerichtet, bleibt die Website erstaunlich leicht aktuell zu halten.

Vom Notebook aus: Claude Code ist das Tool der Wahl für alles, was über einfache Inhaltsupdates hinausgeht. Du kannst es bitten, Features hinzuzufügen, Bereiche neu zu gestalten, das Styling zu aktualisieren oder ganz neue Seitentypen zu erstellen. Es versteht dein ganzes Projekt und hält Änderungen konsistent.

Von jedem Browser aus: Antigravity oder Jules über den Browser. Besonders Jules eignet sich für fokussierte Aufgaben: «Füge einen Blogpost über [Thema] hinzu», «behebe den defekten Link auf der About-Seite», «aktualisiere die Preise auf der Tools-Seite». Du beschreibst die Aufgabe, Jules erledigt sie, du prüfst und bestätigst.

Vom Handy aus: Das übernimmt Jules gut. Sein asynchrones Modell — Aufgabe einreichen, später zum Ergebnis zurückkommen — passt perfekt zum Handy-Workflow. Ich nutze es für Inhaltsergänzungen und leichte Anpassungen, wenn ich nicht am Schreibtisch bin. Es funktioniert problemlos im mobilen Browser.

Und willst du noch weitergehen: Ich habe einen WhatsApp-basierten Assistenten namens Clawdia gebaut, mit dem ich eine Sprachnachricht mit einer gewünschten Änderung schicke, einen Vorschau-Link zurückbekomme und sie mit einer einzigen Antwort live schalte. Das ist ein eigener Guide, aber er zeigt, wo bei diesem Setup tatsächlich die Grenze liegt — oder eher, dass es kaum eine gibt.

Speziell für Inhalte: Nutzt deine Website Markdown-Dateien für Inhalte (wie die meisten modernen Static-Site-Frameworks), ist das Aktualisieren von Inhalten so einfach wie das Bearbeiten einer Textdatei. KI-Tools können neue Inhalte entwerfen, bestehende Seiten aktualisieren und das Frontmatter-Metadata automatisch handhaben. Du schreibst wie in jeder Notiz-App; die KI übernimmt das Format.

Eine Sache lässt KI-gestützte Inhalte tatsächlich funktionieren: Du musst deine eigene Stimme aufgeschrieben haben. Wie du klingst, woran du glaubst, wie du Dinge erklärst, was du nie sagen würdest. Ich habe ein Dokument, das das für goodaiguide.com festhält — es umfasst meine Werte, das Publikum, für das ich schreibe, konkrete Formulierungen, die ich vermeide, Beispiele für den Ton, den ich will. Bevor KI irgendetwas für diese Website schreibt, liest sie dieses Dokument. Das Ergebnis ist Inhalt, der wirklich nach mir klingt statt nach einem generischen Newsletter. Baust du eine Website, bei der das Schreiben zählt, lohnt sich diese eine Stunde für das Briefing, bevor du im grossen Stil Inhalte generierst.

Wenn du an eine Wand stösst: Frag die KI

Du wirst an Wände stossen. Etwas funktioniert nicht, eine Fehlermeldung wirkt unverständlich, ein Schritt in einer Anleitung passt nicht zu dem, was du auf dem Bildschirm siehst. Das ist normal — es passiert auch Leuten, die das seit Jahren machen.

Der Unterschied ist heute: Du hast eine KI zur Hand, die es erklärt.

«Ich habe diese Fehlermeldung beim Deployen bekommen — was bedeutet sie, und wie behebe ich sie?» Fehler einfügen. Die KI sagt es dir.

«Cloudflare sagt, mein Build ist fehlgeschlagen. Hier das Log — was ist schiefgelaufen?» Log einfügen. Die KI findet das Problem.

«Meine eigene Domain ist eingerichtet, aber das SSL-Zertifikat zeigt einen Fehler. Hier, was Cloudflare anzeigt — was muss ich tun?» Die KI führt dich durch.

So baust du Verständnis auf, statt es zu umgehen — indem du dich durch echte Probleme im Kontext arbeitest statt abstrakte Anleitungen zu lesen. Ich habe den grössten Teil dieser Website gebaut, indem ich beschrieben habe, was ich wollte, und basierend auf dem Ergebnis iteriert habe. Die Lücken in meinem eigenen Wissen wurden dabei gefüllt, Problem für Problem.

Noch etwas, das sich lohnt, sobald deine Website steht: Bitte dein KI-Tool um einen Security-Review. «Prüfe diese Website auf gängige Sicherheitsprobleme — offengelegte API-Keys, falsch konfigurierte Header, unsichere Dependencies.» Statische Websites haben eine viel kleinere Angriffsfläche als dynamische, aber ein Durchgang lohnt sich trotzdem. Er dauert fünf Minuten und findet gelegentlich etwas, auf das du nie gekommen wärst.

Was du am Ende tatsächlich hast

Um es konkret zu machen: Das hier gibt dir dieses Setup tatsächlich.

Null laufende Hosting-Kosten. Cloudflare Pages ist für statische Websites bei jedem vernünftigen Traffic gratis. GitHub ist gratis. Die KI-Tools sind Abo-basiert, aber die würdest du sowieso bezahlen. In der Praxis zahle ich für goodaiguide.com nur die Domain — rund 30 Dollar im Jahr.

Kein Lock-in. Deine Website — jede Seite, jeder Post, jedes Bild — lebt in einem GitHub-Repository, das du besitzt. Ändert Cloudflare seine Preise, oder findest du eine bessere Option, verbindest du einfach einen anderen Anbieter mit demselben Repository. Nichts bewegt sich.

Versionsverlauf. Jede Änderung wird in GitHub festgehalten. Geht etwas kaputt, siehst du genau, was sich geändert hat, und kannst zu jedem früheren Zustand zurück.

Von überall aktualisieren. Die Kombination aus Claude Code (Notebook, volle Power), Antigravity (Browser, visuell) und Jules (Browser, asynchron, mobil) sorgt dafür, dass immer ein Tool zu deiner aktuellen Situation passt.

Eine Website, die tatsächlich schnell lädt. Statische Websites, ausgeliefert über Cloudflares globales Netzwerk, laden überall auf der Welt schnell. Kein Shared Hosting, keine überlastete Datenbank, kein Plugin, das bei jedem Seitenaufruf nach Hause telefoniert.

Die Alternative: Warum nicht Webflow, Framer oder WordPress?

Das sind alles legitime Tools mit echten Stärken. Aber sie machen Kompromisse, die dieses Setup vermeidet.

Webflow und Framer sind designstark und liefern schöne Ergebnisse. Aber du arbeitest innerhalb von deren System. Das visuelle Design ist an deren Plattform gebunden. Code exportieren ist technisch möglich, aber das Ergebnis ist kaum portabel — es ist um deren Rendering-Pipeline herum gebaut, nicht um deine. Als ich Webflow verlassen habe, habe ich nicht migriert. Ich habe neu gebaut. Das ist keine Migrationsgeschichte, das ist eine Geiselnahme mit höflichem Ausgang.

WordPress ist enorm flexibel, braucht aber Hosting (meist kostenpflichtig), eine Datenbank, Software-Updates, Plugin-Management und laufende Sicherheitswartung. Plugins geraten sich gegenseitig in die Quere. Themes müssen aktualisiert werden. Es gibt ganze Agenturen, deren Geschäftsmodell die Verwaltung von WordPress-Websites ist. Dieser Aufwand ist real, und er summiert sich über die Zeit.

Das Modell aus GitHub, statischer Website und KI-Tools gibt dir die Flexibilität einer massgeschneiderten Website bei einem laufenden Wartungsaufwand von fast null.

---

Diese Website — goodaiguide.com — ist genau so gebaut und wird genau so gepflegt. Alle Guides, alle Tool-Reviews, die ganze Gestaltung: Claude Code, Antigravity und Jules arbeiten am selben GitHub-Repository, Cloudflare Pages veröffentlicht Änderungen automatisch. Willst du es in der Praxis sehen, bevor du deine eigene Website baust — das Ganze hier ist das Beispiel.

Baust du speziell mit Claude Code, sieh dir den Guide zum Einstieg mit Claude Code an. Und willst du verstehen, wie KI-Tools in ein grösseres Toolkit passen, deckt der Guide zur Nutzung von Jules den asynchronen Workflow ab.