So veröffentlichst du eine mit ChatGPT erstellte Website

Einleitung

Viele Leute nutzen ChatGPT, um Websites zu erstellen. Standardmäßig erhältst du eine einzelne React- oder HTML-Datei. Aber sobald du den Code hast, ist der nächste Schritt nicht offensichtlich. Du musst die Seite trotzdem irgendwo hosten, eine Domain verbinden, sie auf Mobilgeräten zum Laufen bringen und einen Weg finden, sie später weiter zu bearbeiten.

Traditionelle Entwicklertools wie GitHub und Netlify können HTML-Dateien online hosten, aber dann erfordert jede Änderung das Verwalten von Code-Dateien, Deployments und technischen Details. Die meisten Leute möchten sich damit lieber nicht beschäftigen.

In dieser Anleitung zeige ich dir, wie du eine mit ChatGPT erstellte Website mithilfe eines neuen KI-Tools namens Repaint in eine echte, veröffentlichte Website verwandelst. Damit kannst du von deinem Code aus starten, die Seite veröffentlichen und Änderungen per Chat mit KI vornehmen.

Warum das Veröffentlichen von ChatGPT-Websites schwierig ist

ChatGPT kann Code-Vorschauen generieren, ist aber kein vollwertiger Website-Builder. Es verweist dich auf andere Plattformen, wenn du versuchst, deine Seite zu veröffentlichen. Es empfiehlt Entwicklertools wie GitHub, Netlify und Vercel oder schlägt vor, alles in einem traditionellen Website-Builder neu zu erstellen. Keines von beidem ist ideal.

Entwicklertools sind praktisch, weil sie den von ChatGPT generierten Code direkt ausführen können. Der Nachteil ist, dass jede Änderung das Bearbeiten bestimmter Code-Dateien erfordert. Für Leute, die nicht programmieren, bedeutet das, dass sie ständig Dateien in und aus ihrem deployten Code schieben müssen, nur um einfache Änderungen mit KI vorzunehmen.

Die meisten Leute vermeiden Code-Komplexität, indem sie einen Website-Builder wie WordPress, Wix oder Webflow nutzen. Diese Plattformen machen das Veröffentlichen von Änderungen einfacher. Das Problem ist, dass sie ChatGPT-generierte Seiten nicht ausführen können, sodass du alles manuell neu aufbauen musst. Und danach musst du alles von Hand bearbeiten.

Deshalb solltest du einen KI-Website-Builder wie Repaint nutzen. Er bietet dir die Flexibilität, eigenen Code auszuführen, und den Komfort, an einem Ort zu bearbeiten und zu veröffentlichen.

Was ist Repaint?

Repaint ist eine KI-Plattform zum Erstellen von Websites. Sie basiert auf demselben chat-basierten Workflow, der ChatGPT so nützlich macht. Du kannst Änderungen in normaler Sprache anfordern, das Ergebnis prüfen und so lange iterieren, bis die Seite richtig aussieht.

Aber Repaint ist eine vollständige Website-Plattform, nicht nur ein Ort, um Code zu generieren. Das heißt, es übernimmt die Teile des Website-Betriebs, die ChatGPT nicht abdeckt:

• Es veröffentlicht deine Seite, damit Besucher sie tatsächlich online aufrufen können.
• Es ermöglicht dir, eine eigene Domain zu verbinden, damit die Seite unter deiner echten URL lebt.
• Es hält die Seite mit KI bearbeitbar, sodass du später Änderungen vornehmen kannst.
• Es hilft dabei, SEO-Details wie Seitentitel, Beschreibungen und Seitenstruktur zu verwalten.
• Es kann neue Seiten erstellen, wenn deine Website wachsen muss.

Das ist der Unterschied zwischen dem Generieren einer Website-Vorschau und einem echten Ort, an dem du sie langfristig verwalten kannst.

Schritt 1: Code aus ChatGPT importieren

Wenn ChatGPT eine Website erstellt, generiert es eine einzelne Code-Datei und zeigt sie auf einer Canvas an. Normalerweise ist es React, aber es kann auch HTML sein. So oder so kannst du die Buttons oben auf der Canvas verwenden, um den Code zu kopieren oder die Datei herunterzuladen.

Um loszulegen, gehe zu ChatGPT und kopiere den Code, der für dich erstellt wurde. Gehe dann zum Repaint Code-Importer und füge ihn dort ein. Damit startet der Website-Erstellungsprozess. Repaint verwendet deinen Code, um eine vollständige Website zu erstellen, die du veröffentlichen und weiter bearbeiten kannst.

Wenn du noch keine Website in ChatGPT erstellt hast, empfehle ich, nach React zu fragen. Es ist näher am Format, das Repaint verwendet, sodass die Wahrscheinlichkeit geringer ist, dass kleine Design-Details bei der Übersetzung verloren gehen. HTML funktioniert auch, allerdings können auftretende Probleme später per Chat mit Repaint behoben werden.

Schritt 2: Planen, was Repaint bauen soll

Nachdem du deinen Code eingefügt hast, stellt Repaint einige Fragen, bevor es die Website baut. Das gibt dir die Möglichkeit zu entscheiden, ob du die ChatGPT-Version exakt übernehmen, sie als grobe Inspiration nutzen oder daraus eine größere Seite mit mehr Seiten machen möchtest.

Den Inhalt planen

ChatGPT erstellt oft One-Page-Sites, bei denen die Links zu Abschnitten scrollen, anstatt neue Seiten zu öffnen. Aber die meisten Unternehmen brauchen mehr als nur eine Seite. Wenn du also eine One-Page-Site hast, solltest du in Betracht ziehen, sie von Repaint als mehrere Seiten bauen zu lassen.

Du kannst diesen Moment auch nutzen, um mehr Inhalt hinzuzufügen. ChatGPT erstellt normalerweise keine großen Seitenmengen wie Blog-Beiträge. Wenn du die Seite in Repaint importierst, kannst du den Umfang erweitern, um alles aufzunehmen, was du möchtest.

Alle neuen Seiten werden zu dem Stil passen, den du bereits hast.

Den Stil planen

Standardmäßig kopiert Repaint den Stil deiner ChatGPT-Seite. Das bedeutet, dass dasselbe Erscheinungsbild erhalten bleibt: Farben, Layout, Typografie und Abstände.

Aber du musst den Stil nicht beibehalten. Wenn du damit nicht zufrieden bist, kannst du Repaint bitten, deine Website neu zu gestalten. Repaint kann:

• Das Original so genau wie möglich nachbauen
• Den Stil einer anderen Website übernehmen, die dir gefällt
• Einen individuellen Stil für deine Inhalte erstellen
• Einen Stil aus der Repaint Stil-Bibliothek auswählen
• Die Wahl für dich treffen

Mach dir darüber nicht zu viele Gedanken. Wenn dir nicht gefällt, was erstellt wird, kannst du später um neue Versionen bitten.

Den Plan prüfen

Bevor irgendetwas generiert wird, schreibt Repaint genau auf, was es bauen wird: welche Seiten, welche Inhalte und welchen Stil. Schau es dir an und nimm letzte Änderungen vor. Es ist viel schneller, den Plan anzupassen, als die gesamte Seite neu zu generieren.

Sobald du bestätigst, baut Repaint deine neue Website!

Schritt 3: Website generieren

Sobald du den Plan bestätigst, beginnt Repaint mit dem Aufbau deiner Seite. Du siehst Fortschrittsmeldungen, während es jede Seite bearbeitet. Eine einfache Startseite kann ein bis zwei Minuten dauern. Eine größere Website mit mehr Seiten kann länger dauern.

Repaint hostet nicht einfach den Code, den du eingefügt hast. Es verwendet die ChatGPT-Version als Ausgangsmaterial und baut dann die in deinem Plan beschriebene Seite. Wenn du nach einer exakten Nachbildung gefragt hast, versucht es, das Original genau zu treffen. Wenn du mehr Seiten oder einen anderen Stil angefordert hast, nutzt es die ChatGPT-Version stattdessen als Ausgangspunkt.

Manchmal gehen Details bei der Übersetzung während der Generierung verloren. Das passiert häufiger, wenn deine ursprüngliche Datei HTML ist, da React näher an dem ist, was Repaint verwendet. Wenn wichtige Details verloren gehen, kannst du sie im nächsten Schritt korrigieren.

Schritt 4: Website mit KI bearbeiten

Sobald Repaint die erste Version generiert, siehst du sie auf der rechten Seite deines Bildschirms. Jetzt kannst du Änderungen genauso vornehmen, wie du es in ChatGPT tun würdest. Du tippst, was geändert werden soll, Repaint aktualisiert die Seite, und dann prüfst du das Ergebnis.

Du kannst Repaint zum Beispiel bitten:

• Eine neue Seite hinzuzufügen
• Die Farben oder Schriften zu ändern
• Ein Kontaktformular hinzuzufügen
• Bilder zu generieren
• Den Text neu zu schreiben

Du kannst so lange Änderungen vornehmen, bis sich die Seite veröffentlichungsreif anfühlt.

Schritt 5: Website veröffentlichen

Wenn die Seite fertig ist, klicke auf den Veröffentlichen-Button. Repaint stellt die Seite online und gibt dir eine Live-URL, die du mit jedem teilen kannst. Sie sieht in etwa so aus: https://xxxxxx-xxxxxx-xxxxxx.sites.repaint.com

An diesem Punkt wird dein ChatGPT-Code zu einer echten Website im Internet. Du kannst sie auf deinem Telefon öffnen, an jemanden senden oder in einem echten Browser testen.

Du musst auch keinen Code exportieren oder Dateien woanders deployen. Von nun an ist Repaint der Ort, an dem du die Seite bearbeitest und veröffentlichst. Wenn du später Änderungen vornehmen möchtest, kannst du Repaint bitten, die Website zu aktualisieren, und dann die neue Version mit demselben Button veröffentlichen.

Schritt 6: Domain verbinden

Wenn du bereit bist, deine eigene URL zu nutzen, gehe zu Website-Einstellungen > Domains und klicke auf Eigene Domain verbinden. Dies erfordert einen kostenpflichtigen Plan. Preisdetails findest du hier.

Deine Domain wird auf einer Plattform außerhalb von ChatGPT und Repaint verwaltet. Sie ist bei einem Domain-Anbieter wie GoDaddy, Namecheap oder Cloudflare registriert. Du musst sie nirgendwo hin verschieben. Du aktualisierst einfach die Einstellungen bei deinem Domain-Anbieter, sodass die Domain auf deine Repaint-Seite zeigt.

Wenn du das noch nie gemacht hast, keine Sorge. Bitte Repaint, dich Schritt für Schritt durch den Prozess zu führen. Es sagt dir genau, was zu tun ist.

Die Änderung kann ein paar Stunden dauern, bis sie wirksam wird. Sobald Repaint deine Domain als verifiziert anzeigt, ist deine Website unter deiner eigenen Domain live.

Fazit

ChatGPT macht es einfach, eine erste Version einer Website zu erstellen, aber diesen Code online zu bringen und zu pflegen, ist immer noch schwierig. Repaint bietet dir eine Möglichkeit, diesen Code in eine echte Website zu verwandeln, die du veröffentlichen, mit einer Domain verbinden und mit KI weiter bearbeiten kannst. Es ist jetzt einfacher denn je, generierten Code in eine veröffentlichte Seite zu verwandeln.

Häufig gestellte Fragen

Wie lange dauert es, eine ChatGPT-Website mit Repaint zu veröffentlichen?

Wenn deine Seite bereits fertig ist, sollte es nur ein paar Minuten dauern. Das Teilen deines Codes, das Planen der Seite und das Generieren der Website dauern in der Regel 2-5 Minuten. Danach hängt die Zeit bis zur Veröffentlichung davon ab, wie viele Anpassungen du vornimmst.

Was kostet die Veröffentlichung mit Repaint?

Es ist kostenlos, deinen Code in Repaint zu importieren, eine Seite zu generieren, Änderungen vorzunehmen und zu veröffentlichen. Die wichtigsten Einschränkungen im kostenlosen Plan sind ein begrenztes Kontingent, keine eigene Domain und ein Repaint-Badge auf der Seite. Kostenpflichtige Pläne beginnen bei 20 $/Monat bei jährlicher Abrechnung oder 25 $/Monat bei monatlicher Abrechnung. Das beinhaltet erweitertes Kontingent, Unterstützung für eigene Domains und entfernt das Repaint-Badge.

Warum nicht einfach GitHub Pages, Netlify oder Vercel nutzen?

Du kannst das tun, besonders wenn du dich mit der Verwaltung von Code wohlfühlst. Diese Tools sind gut darin, Dateien online zu stellen. Aber jede bedeutsame Änderung schickt dich wieder zurück in den Code, was bedeutet, dass du ständig Dateien zwischen ChatGPT, deinem Editor und deinem Hosting-Tool hin- und herkopierst.

Repaint ist anders, weil es eine vollständige Website-Plattform ist, nicht nur ein Ort, um Dateien auszuliefern. Das heißt, du kannst weiter mit KI bearbeiten, Änderungen vom selben Ort aus veröffentlichen, Seiten verwalten, SEO-Einstellungen aktualisieren, Bilder optimieren, Formulare verbinden und deine eigene Domain nutzen. Es ist für die langfristige Website-Verwaltung gebaut, nicht nur für das erste Deployment.

Muss ich programmieren können, um Probleme zu beheben?

Nein. Repaint ist für Leute gemacht, die nicht programmieren. Nachdem du deinen Code aus ChatGPT importiert hast, musst du nie wieder Code verwalten. Wenn etwas falsch aussieht, kannst du es per Chat mit KI beheben. Programmierkenntnisse können helfen, wenn du sehr spezifisch sein möchtest, sind aber nicht erforderlich.

Wird die Seite genauso aussehen wie die ChatGPT-Version?

Wenn du Repaint sagst, das Original nachzubauen, sollte sie fast genauso aussehen. Gelegentlich gehen einige Details verloren, weil Repaint den Code in sein eigenes Website-Format übersetzt. Übersetzungsprobleme treten häufiger auf, wenn das Original von ChatGPT HTML war. Wenn das passiert, solltest du alles mit wenigen Eingaben beheben können.

Was passiert, wenn die KI einen Fehler macht?

Während du Änderungen vornimmst, speichert Repaint jede Version deiner Seite. Du kannst Repaint bitten, zurückzugehen, und es kehrt zu einer früheren Version zurück. Oder wenn du zu einem bestimmten Zeitpunkt zurückkehren möchtest, kannst du frühere Versionen manuell wiederherstellen. So kannst du Änderungen frei vornehmen, ohne das Risiko, deine Seite zu ruinieren.

Funktionieren Formulare und Buttons nach dem Import?

Ja. Kontaktformulare haben in deiner ursprünglichen ChatGPT-Seite wahrscheinlich nicht funktioniert. Aber wenn du die Seite zu Repaint überträgst, kann es das Formular in ein echtes Kontaktformular verwandeln, das E-Mail-Benachrichtigungen sendet, wenn du Einsendungen erhältst. Buttons sollten funktionieren, wenn sie auf echte Seiten oder Abschnitte verlinken. Wenn ein Button ins Leere zeigt, kannst du Repaint bitten, ihn zu verbinden.

Kann Repaint Bilder, Icons und andere Assets aus meiner ChatGPT-Seite verarbeiten?

Seiten, die in ChatGPT erstellt wurden, speichern Bilddateien normalerweise nicht intern. Sie verlinken in der Regel auf Bilder, die anderswo gehostet sind. Wenn du deinen Code importierst, kann Repaint Kopien dieser Bilder abrufen und speichern, sodass sie für deine neue Seite dauerhaft verfügbar bleiben. Repaint kann auch Bilder generieren, falls du noch welche hinzufügen musst.

Kann ich SEO-Einstellungen, Analytics und Metadaten hinzufügen?

Ja. Du kannst eigenen Code, Analytics und Metadaten einfach hinzufügen, indem du Repaint darum bittest. Es kann technisches SEO für dich einrichten und Skripte und Einbettungen von anderen Plattformen hinzufügen. Um Google Analytics hinzuzufügen, teile einfach deine GA-ID.

Ersetzt Repaint Hosting, oder brauche ich noch einen separaten Host?

Repaint ist eine Hosting-Plattform. Es betreibt deine Website. Du brauchst keine separate Hosting-Plattform wie GitHub Pages, Netlify, Vercel oder einen anderen Website-Builder.