Wo du die Webseite deiner KI veröffentlichst (kostenlos und kostenpflichtig)

Der schnellste kostenlose Weg, eine von der KI gebaute Webseite zu veröffentlichen, ist Netlify Drop: Du ziehst den Ordner mit deinen Dateien auf eine Webseite, und sie ist live, ganz ohne Konto. Willst du etwas Dauerhaftes mit eigener Adresse wie deinname.de, ist ein Hosting-Paket wie Bluehost (bezahlter Link) der einfache kostenpflichtige Weg. In beiden Fällen brauchst du zuerst alle Dateien beisammen in einem Ordner, und die kostenlose Erweiterung AI Code Harvester erledigt das mit einem Klick.

Zuerst: Was du eigentlich hast

Wenn ChatGPT oder Gemini eine Webseite baut, bekommst du Code: meist eine HTML-Datei (die Seite selbst), oft eine CSS-Datei (Farben und Layout) und eine JavaScript-Datei (Buttons und Aktionen). Im Moment existieren sie nur in deinem Chat oder auf deinem Computer. Damit andere die Seite sehen können, müssen die Dateien auf einem Webserver liegen. Das ist einfach ein Computer, der immer eingeschaltet ist und deine Seite jedem zeigt, der ihre Adresse eintippt. Mehr bedeutet „Veröffentlichen“ nicht.

Gute Nachricht: Eine solche Seite ist „statisch“. Das heißt, es sind nur Dateien, ohne Datenbank und ohne Logins, die dahinter laufen. Statische Seiten sind am leichtesten zu veröffentlichen, und mehrere Dienste machen das kostenlos. Muss deine Seite sich Besucher merken, Bestellungen annehmen oder Daten speichern, ist das ein größeres Projekt, und ein einfacher Dateihost reicht nicht.

Welche Option passt zu dir?

• Du willst sie heute jemandem zeigen: Netlify Drop (kostenlos, am schnellsten).
• Du willst sie kostenlos und dauerhaft, ein paar Schritte mehr sind okay: Cloudflare Pages oder GitHub Pages (kostenlos).
• Du willst eine eigene Adresse und alles an einem Ort: ein Hosting-Paket, zum Beispiel Bluehost (kostenpflichtig).
• Du willst lieber gar keine Dateien anfassen: ein Website-Baukasten (kostenpflichtig).

Schritt null: Dateien in einen Ordner legen

Was du auch wählst, fang hier an. Die Hauptdatei muss index.html heißen, denn diese Datei zeigt ein Server zuerst. Die anderen Dateien (CSS und JavaScript) kommen in denselben Ordner, mit denselben Namen, die das HTML nennt. Hat dir die KI den Code in mehreren Stücken gegeben, ist das Abtippen oder Kopieren von Hand die Stelle, an der man hängen bleibt.

Die Abkürzung ist AI Code Harvester, eine kostenlose Chrome-Erweiterung (ein kleines Zusatzprogramm, das dem Browser eine neue Funktion gibt). Sie findet den Code im Chat und macht daraus benannte Dateien. Drück ZIP herunterladen für einen Ordner mit Dateien, oder öffne den Workspace und nimm Einzelne Seite (.html), die Stile und Skripte zu einer Datei verbindet, die sich schwer kaputt machen lässt. Das kurze Video zeigt, wie.

1. Hol die Dateien. Lade das ZIP aus AI Code Harvester und entpacke es in einen neuen Ordner.
2. Nenne die Hauptdatei index.html. Hat die KI sie anders genannt, benenne sie um.
3. Teste es auf deinem Computer. Doppelklick auf index.html. Sieht die Seite richtig aus, bist du bereit.
4. Nimm alles Private heraus. Such im Code nach Passwörtern oder API-Schlüsseln. Den Code einer veröffentlichten Seite kann jeder lesen.

Option 1: Netlify Drop (kostenlos, am schnellsten)

Netlify Drop ist eine Webseite, auf die du einen Ordner ziehst, und deine Seite ist live. Netlify sagt, dass dafür kein Konto nötig ist, was es zur besten Wahl für „ich will das nur schnell jemandem zeigen“ macht.

1. Öffne app.netlify.com/drop in deinem Browser.
2. Zieh deinen Ordner (oder ein ZIP davon) auf die Seite.
3. Warte einen Moment. Du bekommst eine Live-Adresse, die auf netlify.app endet.
4. Öffne diese Adresse in einem privaten Fenster zur Kontrolle und teile sie dann.

Der Haken: Wenn du einen Ordner ohne Anmeldung ablegst, schützt Netlify das Projekt mit einem vorläufigen Passwort, bis du es durch eine (kostenlose) Anmeldung übernimmst. Willst du also, dass andere es sehen, leg das Konto an, übernimm die Seite und prüfe, dass sie auf öffentlich steht. Für spätere Änderungen legst du den Ordner erneut ab. Netlify empfiehlt, eine Veröffentlichung unter etwa 50 MB zu halten.

Option 2: Cloudflare Pages (kostenlos, für lange)

Cloudflare ist ein großes Unternehmen, das einen Teil der Internet-Infrastruktur betreibt, und sein Dienst Pages hostet statische Seiten kostenlos. Du lädst einen Ordner oder ein ZIP in seinem Dashboard hoch (der Kontrollseite auf seiner Webseite). Du brauchst ein kostenloses Cloudflare-Konto, und deine Adresse sieht aus wie deinprojekt.pages.dev.

1. Lege ein kostenloses Cloudflare-Konto an und öffne Workers & Pages.
2. Wähl Create application, dann Get started und dann Drag and drop your files.
3. Gib dem Projekt einen Namen, zieh deinen Ordner oder dein ZIP hinein und drück Deploy site.

Der Haken: Die Menüs ändern sich ab und zu, die Buttons heißen also beim Nachsehen vielleicht etwas anders. Das Upload-Limit liegt bei 1000 Dateien und 25 MiB pro Datei, mehr als genug für eine KI-Seite. Aktualisieren heißt, erneut hochzuladen.

Option 3: GitHub Pages (kostenlos, wenn du GitHub magst)

GitHub ist die Webseite, auf der Entwickler ihren Code in „Repositories“ aufbewahren, also in Ordnern mit Dateien, die online gespeichert sind. GitHub Pages macht aus einem Repository eine Webseite. Es ist kostenlos und ein alter Favorit, hat aber die meisten Schritte unter den kostenlosen Optionen.

1. Lege ein kostenloses GitHub-Konto und ein neues Repository namens deinbenutzername.github.io an.
2. Lade deine Dateien hoch, mit index.html auf der obersten Ebene.
3. Öffne die Settings des Repositorys, dann Pages, und wähl unter Build and deployment Deploy from a branch und deinen Hauptzweig.
4. Warte ein paar Minuten und öffne https://deinbenutzername.github.io.

Der Haken: Änderungen können bis zu 10 Minuten brauchen, bis sie erscheinen. Denk auch daran, dass alles in einem öffentlichen Repository für jeden sichtbar ist. Prüf die Dateien also vor dem Hochladen.

Option 4: Eigenes Hosting und eigene Domain (Bluehost)

Zwei Wörter, die dir hier begegnen. Webhosting heißt, Platz auf einem Webserver zu mieten, damit deine Dateien rund um die Uhr online sind. Eine Domain ist deine Adresse, wie deinname.de. Mit Hosting und Domain bestimmst du selbst, wie deine Seite heißt, kannst sie für ein Geschäft nutzen und bist nicht an die Regeln eines kostenlosen Dienstes gebunden.

Bluehost (bezahlter Link) ist ein Hosting-Anbieter, mit dem viele anfangen. Auf der Seite zu Shared Hosting stehen kostenloses SSL (das Schloss, durch das deine Adresse mit https beginnt), eine kostenlose Domain im ersten Jahr (du musst sie innerhalb von 90 Tagen einlösen, und sie gilt für bestimmte Endungen) und eine 30-tägige Geld-zurück-Garantie auf das Hosting. Prüf vor dem Kauf das aktuelle Angebot und den Verlängerungspreis auf ihrer Seite.

1. Wähl ein Hosting-Paket und deine Domain.
2. Öffne die Hosting-Verwaltung und such den Ordner mit den Hauptdateien deiner Seite (er heißt oft public_html). Die Hilfeseiten deines Hosters zeigen, wo er liegt.
3. Lade dort deine Dateien hoch, mit index.html oben, und öffne deine Domain in einem privaten Fenster.

Der Haken: Das ist die einzige Option hier, die Geld kostet, und Preise nach dem ersten Zeitraum können sich ändern, lies also die Verlängerungsbedingungen. Dafür bekommst du eine eigene Adresse, Platz für weitere Seiten später und eine einfache Möglichkeit, E-Mail auf deiner Domain einzurichten.

Du willst eine eigene Adresse? So funktioniert eine Domain

Eine Domain ist der Name, den Leute eintippen, um dich zu finden, zum Beispiel deinname.de. Sie hat einen Namensteil und eine Endung (.de, .com und viele andere). Du kaufst sie nicht für immer: Du mietest sie, meist für jeweils ein Jahr, und verlängerst sie.

Es gibt drei übliche Wege, eine zu bekommen:

• Zusammen mit dem Hosting. Bluehost (bezahlter Link) nennt zu seinem Hosting eine kostenlose Domain für das erste Jahr (du musst sie innerhalb von 90 Tagen einlösen, und sie gilt für bestimmte Endungen). Das ist der einfachste Weg, wenn du ohnehin Hosting kaufst.
• Bei einem Domain-Anbieter (einem „Registrar“). Du kaufst nur den Namen und verbindest ihn mit dem Ort, an dem deine Seite liegt. Manche Registrare sind günstiger als andere: Cloudflare Registrar sagt, dass es keinen Aufschlag auf Domainpreise macht, und auch Netlify verkauft Domains.
• Eine, die du schon hast. Dann brauchst du nur den Verbindungsschritt unten.

Musst du für Hosting zahlen, um eine eigene Domain zu nutzen? Nicht unbedingt. Netlify, Cloudflare Pages und GitHub Pages lassen dich alle eine eigene Domain mit einer kostenlosen Seite verbinden. Schau auf der Preisseite jedes Anbieters nach, was dein Tarif enthält.

1. Hol dir die Domain bei einem Registrar oder mit einem Hosting-Paket.
2. Füge die Domain im Dashboard deines Hosts hinzu. Bei Netlify nimm Domains, bei Cloudflare Pages öffne dein Projekt und wähl Custom domains, bei GitHub Pages nimm die Pages-Einstellungen des Repositorys.
3. Lege den Eintrag an, den der Host verlangt. Das ist eine kleine Zeile in den DNS-Einstellungen deiner Domain (dem Adressbuch, das sagt, auf welchen Computer ein Name zeigt). Meist ist es ein CNAME-Eintrag für die Version mit www und ein A- oder ALIAS-Eintrag für das einfache deinname.de. Der Host zeigt dir die genauen Werte zum Kopieren.
4. Warte, dann teste. Es kann bis zu 48 Stunden dauern, bis es funktioniert, oft geht es schneller. Öffne deine Domain in einem privaten Fenster.

Zwei Hinweise. Cloudflare Pages verlangt, dass deine Domain die Nameserver von Cloudflare nutzt, wenn du die Version ohne www willst. Und wenn Domain und Hosting beide bei Bluehost liegen, gibt es meist weniger einzurichten, weil sie im selben Konto sind; die Hilfeseiten zeigen die Schritte.

Option 5: Ein Website-Baukasten (ganz ohne Dateien)

Wenn dich schon das Lesen über Ordner, Uploads und Dateinamen müde macht, lässt dich ein Website-Baukasten per Klick zu einer Seite kommen: Du wählst Blöcke, tippst deinen Text und drückst auf Veröffentlichen. Mit einem Baukasten baust du die Seite meist aus seinen eigenen Blöcken neu auf, statt den Code der KI hochzuladen. Bluehosts Website Builder (bezahlter Link) und Weblium (bezahlter Link) sind zwei, die du dir ansehen kannst. Es ist der langsamste Weg, wenn du die Seite der KI schon hast, aber der leichteste, wenn du ständig von Hand weiter ändern willst.

Vier Prüfungen, bevor du den Link teilst

• Öffne sie in einem privaten Fenster. So siehst du, was ein Fremder sieht, ohne gespeicherte Logins und ohne Dateien im Cache.
• Prüf Bilder und Links. Zeigt etwas auf einen Pfad wie C:\Users auf deinem Computer, geht es bei allen anderen kaputt. Nimm Dateien, die neben index.html liegen.
• Sieh sie dir auf dem Handy an. Die meisten Besucher werden dort sein. In der Vorschau von AI Code Harvester kannst du vorher zwischen den Breiten Desktop, Tablet und Handy wechseln.
• Halte Geheimnisse draußen. Veröffentliche nie eine Seite, die ein Passwort oder einen API-Schlüssel enthält, denn jeder kann den Code lesen.

Hol dir die Erweiterung

AI Code Harvester ist kostenlos und funktioniert mit ChatGPT und Gemini. Es findet den Code im Chat, lässt dich die Seite in einer sicheren Sandbox ansehen und lädt alles als ZIP, als eine Seite oder zusammen mit dem Chat herunter. Es läuft auf deinem Computer: Dein Code wird nie zu uns hochgeladen. Füge es aus dem Chrome Web Store hinzu.

Gut zu wissen, bevor du loslegst

FAQ