Website mit ChatGPT erstellen: drei Wege, die funktionieren

Um mit ChatGPT eine Website zu erstellen, kannst du es das HTML und CSS der Seite schreiben lassen und die Dateien anschließend selbst bei einem Hosting-Dienst ablegen. Du kannst es auch nutzen, um die Seiten zu planen und die Texte zu schreiben, bevor du in einem Website-Baukasten baust. Oder du verbindest einen KI-Builder wie Mythex mit ChatGPT, damit er die Seite direkt aus demselben Chat heraus baut, hostet und veröffentlicht. Der erste Weg ist kostenlos und für eine einseitige Website gut geeignet. Der dritte ist das Richtige, sobald die Seite Formulare mit Datenspeicherung, Logins oder regelmäßige Aktualisierungen braucht. Dieser Leitfaden zeigt jede Methode mit Prompts und sagt klar, wo sie an ihre Grenzen stößt.

Was ChatGPT allein kann und was nicht

ChatGPT ist sehr gut im Schreiben: Code, Überschriften, Seitentexte und Pläne. Von sich aus ist es aber kein Hosting-Anbieter. Es gibt deiner Seite keine öffentliche Adresse, es betreibt keine Datenbank, und es bewahrt die Dateien deiner Seite nicht zwischen Projekten auf, wie es ein Baukasten tut. Jede der folgenden Methoden ist eine andere Antwort auf diese Lücke.

Methode 1: ChatGPT schreibt den Code, du hostest ihn

Das ist der klassische Ansatz und funktioniert gut für eine einfache, statische Seite: ein Portfolio, eine Landingpage, eine Hochzeitsseite.

Schritt 1: Eine vollständige Einzeldatei-Seite anfordern

Sei konkret, was Inhalt und Aufbau angeht:

Schreibe eine vollständige einseitige Website als eine einzige HTML-Datei, das CSS im style-Tag. Sie ist für Maya Haddad, eine freiberufliche Illustratorin in Amman. Abschnitte: ein Header mit ihrem Namen und „Illustration für Bücher und Marken“, ein Raster mit sechs Portfolio-Bildern (verwende Platzhalter-Pfade, die ich ersetzen kann), ein kurzer Absatz über sie, eine Liste mit drei Leistungen und Startpreisen sowie ein Kontaktbereich mit ihrer E-Mail als mailto-Link. Sauber, modern, viel Weißraum, funktioniert auf Smartphones. Keine JavaScript-Frameworks.

Eine einzelne Datei hält es einfach, sie zu speichern und hochzuladen.

Schritt 2: Speichern und öffnen

Kopiere den Code in einen Texteditor, speichere ihn als index.html und öffne sie im Browser. Wenn etwas nicht stimmt, beschreibe es ChatGPT: „Das Bildraster ist auf dem Desktop einspaltig; mach es oberhalb von 900 Pixeln Breite dreispaltig.“

Schritt 3: Platzhalter ersetzen

Tausche die Platzhalterbilder gegen eigene aus und ersetze Texte, die ChatGPT erfunden hat. Prüfe Preise, E-Mail-Adressen und Namen genau. KI füllt Lücken mit großer Selbstsicherheit.

Schritt 4: Online stellen

Lade die Datei auf einen kostenlosen statischen Hoster wie GitHub Pages oder auf einen Webhoster, den du ohnehin bezahlst. Du bekommst eine öffentliche Adresse. Um deine eigene Domain zu verwenden, folge der Anleitung deines Hosters. Unser Leitfaden zur Verbindung einer eigenen Domain erklärt den DNS-Teil.

Wo Methode 1 an ihre Grenzen stößt

• Formulare, die Daten speichern. Ein Kontaktformular braucht einen Ort, an den die Eingaben geschickt werden. Du brauchst dafür einen Formulardienst oder einen Server.
• Logins und Mitgliederbereiche. Dafür braucht es ein Backend und eine Datenbank.
• Viele Seiten. Header und Menüs über zehn von Hand eingefügte Dateien hinweg konsistent zu halten, wird mühsam.
• Aktualisierungen. Jede Änderung bedeutet, neuen Code anzufordern, einzufügen und erneut hochzuladen.

Methode 2: ChatGPT plant, ein Baukasten baut

Hier übernimmt ChatGPT das Denken und Schreiben, und ein Website-Baukasten übernimmt das Bauen und Hosten.

Schritt 1: Die Seite mit ChatGPT planen

Ich betreibe eine kleine Familienbäckerei in Manchester, die Torten auf Bestellung annimmt. Schlage vor, welche Seiten meine Website braucht, was jede Seite sagen sollte und die eine Aktion, die Besucher auf jeder Seite ausführen sollen. Halte es bei fünf Seiten oder weniger.

Schritt 2: Die Texte schreiben

Lass dir den Text jeder Seite geben und formuliere ihn dann in deiner eigenen Sprache um. Ergänze echte Details, die ChatGPT nicht wissen kann: Öffnungszeiten, Preise, Liefergebiete und was deine Torten besonders macht.

Schritt 3: In einem Baukasten bauen

Füge Plan und Texte in einen Website-Baukasten ein. In einem Drag-and-drop-Tool setzt du die Texte in eine Vorlage. In einem KI-Builder kannst du den gesamten Plan als eine Nachricht geben, und er baut die Seiten; zum Beispiel im Mythex-Website-Builder:

Baue eine Website für eine Familienbäckerei in Manchester anhand dieses Plans und dieser Texte: [einfügen]. Füge ein Bestellformular hinzu, das jede Anfrage speichert (Name, Telefon, Tortenart, gewünschtes Datum, Nachricht), damit ich sie auf einer Admin-Seite sehen kann, in die nur ich mich einloggen kann. Warmes, heimeliges Design, funktioniert auf Smartphones.

Das Bestellformular speichert hier in einer echten Datenbank, was eine eingefügte HTML-Datei nicht könnte. Mehr zu diesem Weg findest du in unserem Leitfaden zu Websites mit KI erstellen.

Methode 3: Direkt in ChatGPT bauen und veröffentlichen

Die neueste Option ist, einen Builder so mit ChatGPT zu verbinden, dass ChatGPT dessen Werkzeuge direkt nutzen kann. Du bleibst in der ChatGPT-Unterhaltung; der Builder stellt das Projekt, die Vorschau, die Datenbank und das Hosting bereit.

Mythex funktioniert so über seine ChatGPT-App (ein MCP-Connector). Du verbindest sie in den Kontoeinstellungen von Mythex; das Verbinden ist in jedem Tarif möglich, die Werkzeuge für die Sandbox deines Projekts brauchen jedoch Pro. Danach kannst du ChatGPT etwa so bitten:

Erstelle mit Mythex eine neue Website für meine Bäckerei mit einer Startseite, einer Menüseite mit Torten und Preisen und einem Bestellformular, das in einer Datenbank speichert. Zeig mir die Vorschau und veröffentliche sie, wenn ich sage, dass sie passt.

ChatGPT legt dann das Projekt an, schreibt den Code, startet ihn und veröffentlicht ihn unter einer öffentlichen URL, sobald du zustimmst. Änderungen sind einfach weitere Nachrichten im selben Chat. Derselbe Connector-Ansatz funktioniert auch mit Claude, Cursor und Codex. Hintergründe dazu und welche Builder das unterstützen, findest du unter KI-App-Builder mit MCP.

Welche Methode solltest du wählen?

Prompt-Tipps, die für jede Methode funktionieren

• Gib echte Fakten gleich am Anfang an. Name, Ort, Leistungen, Preise, Kontaktdaten. Je weniger erfundene Details, desto weniger Nacharbeit.
• Beschreibe den Besucher und das Ziel. „Ein Elternteil, das eine Geburtstagstorte sucht und am Ende eine Bestellanfrage abschicken soll.“
• Verlange Layouts, die zuerst für Smartphones gedacht sind. Die meisten Besucher nutzen ein Smartphone.
• Ändere eine Sache pro Nachricht, sobald die erste Version steht.
• Verlange SEO-Grundlagen ausdrücklich: einen eigenen Titel und eine eigene Beschreibung pro Seite, echte Überschriften, Alt-Texte für Bilder. Siehe SEO für mit KI gebaute Websites.

Unser Leitfaden zum Schreiben von Prompts für KI-App-Builder enthält weitere Muster.

Häufige Probleme und Lösungen

• Das Design wirkt generisch. Gib eine Referenz: „wie ein ruhiges skandinavisches Café, viel Weiß und ein gedämpftes Grün“.
• Der Code wurde abgeschnitten. Bitte ChatGPT, ab der letzten Zeile weiterzumachen, oder die Seite in Abschnitte zu teilen und dir jeweils einen davon zu geben.
• Es hat Referenzen oder Statistiken erfunden. Entferne sie. Gefälschte Bewertungen zerstören Vertrauen, und an vielen Orten verstoßen sie gegen Verbraucherschutzregeln.
• Die Seite bricht nach einer Änderung. Bewahre eine Kopie der letzten funktionierenden Version auf, bevor du neuen Code einfügst. Builder wie Mythex speichern Checkpoints, damit du zurückrollen kannst.

Vor dem Veröffentlichen

Lies jeden Text auf jeder Seite. Prüfe, ob die Kontaktdaten funktionieren. Öffne die Seite auf einem Smartphone. Stelle sicher, dass alle Bilder dir gehören oder korrekt lizenziert sind. Dann veröffentliche und teile die Seite dort, wo deine Besucher ohnehin unterwegs sind. Wenn die ganze Sache nichts kosten soll, erklärt der Leitfaden Website kostenlos erstellen die kostenlosen Hosting-Optionen ausführlicher.

Fragen