ChatGPT-Website online stellen: Schritt für Schritt

Eine Website von ChatGPT stellen Sie online, indem Sie den Code aus dem Gespräch als Dateien speichern und bei einem Hosting-Anbieter ablegen. Der Chat und Canvas hosten nichts, die Dateien stellen Sie also selbst online. Sie arbeiten in vier kurzen Schritten: Dateien erstellen, lokal testen, hochladen und Ihre Domain verbinden. Unten steht, wie das geht und was Sie tun, wenn ChatGPT etwas baut, das einen Server braucht.

Vom Chat zu Dateien

ChatGPT liefert Code auf drei Arten. Das Ergebnis ist immer Text, den Sie noch in eine Datei legen müssen.

• Im Chat. Sie bitten um eine Website und erhalten einen Codeblock mit <!DOCTYPE html> ganz oben. Daraus können Sie den Code kopieren.
• In Canvas. Der Code steht neben dem Gespräch in einem eigenen Fenster. Oben rechts gibt es eine Download-Schaltfläche. Ein Code-Canvas wird laut OpenAI mit einer Endung gespeichert, die zur Sprache passt. Prüfen Sie nach dem Download, ob die Datei .html heißt und vollständig ist.
• Über Codex. Das ist ChatGPT als Programmierhilfe, die in einem Projektordner oder einem GitHub-Repository arbeitet. Sie erhalten dann ein ganzes Projekt, keine losen Codeblöcke.

Bitten Sie gleich am Anfang um etwas, das sich leicht online stellen lässt. Ein Satz wie „Erstelle eine einzelne index.html mit dem CSS in einer separaten Datei style.css, ohne Server und ohne Build“ erspart Ihnen später die meiste Arbeit.

Code als Dateien speichern

So machen Sie aus dem Chat eine Website, die Sie öffnen können:

1. Legen Sie auf Ihrem Computer einen neuen Ordner an, zum Beispiel meine-seite.
2. Öffnen Sie einen einfachen Texteditor (Editor, TextEdit im Nur-Text-Modus oder einen kostenlosen Editor wie VS Code).
3. Fügen Sie das HTML ein und speichern Sie es als index.html in diesem Ordner.
4. Hat ChatGPT das CSS separat geliefert, fügen Sie es in style.css im selben Ordner ein. In index.html muss dann eine Zeile wie <link rel="stylesheet" href="style.css"> stehen.
5. Bilder legen Sie in einen Unterordner, zum Beispiel bilder, und der Verweis im Code lautet bilder/foto.jpg.

Die Datei muss genau index.html heißen, in Kleinbuchstaben. So erkennt ein Server die Startseite.

Lokal testen per Doppelklick

Doppelklicken Sie auf index.html. Ihr Browser öffnet die Seite direkt von Ihrem Computer. Prüfen Sie fünf Dinge:

• Sehen Sie die Bilder?
• Haben die Schaltflächen und Menülinks ein Ziel?
• Sieht es auf Ihrem Handy gut aus? Machen Sie das Browserfenster schmal, um das zu sehen.
• Stehen Texte darin, die nicht stimmen, etwa eine erfundene Adresse oder Telefonnummer? ChatGPT füllt so etwas manchmal aus. Entfernen Sie sie oder ersetzen Sie sie durch Ihre eigenen Angaben.
• Steht irgendwo ein Schlüssel oder Passwort im Code? Das gehört nicht hinein.

Funktioniert es lokal, ist die Chance groß, dass es auch online funktioniert, solange Sie die Dateien und Ordner im gleichen Aufbau hochladen.

Ein Projekt mit Codex bauen

Nutzen Sie Codex, arbeiten Sie in einem echten Projektordner. Bitten Sie ausdrücklich um eine statische Website. Ein brauchbarer Auftrag:

Baue eine statische Website mit Vite. Kein Server und keine Datenbank.
Sorge dafür, dass npm run build einen Ordner dist mit index.html im Hauptordner erzeugt.

Führen Sie danach in diesem Ordner aus:

npm install
npm run build

Der Inhalt von dist ist Ihre Website. Bei Next.js ist das der Ordner out, sofern das Projekt mit output: 'export' eingestellt ist. Laden Sie diesen Inhalt hoch, nicht den ganzen Projektordner. Details und Stolperfallen stehen unter React- oder Vite-Website ohne Node-Server hosten.

Ein Projekt, das Sie über GitHub erhalten, können Sie uns auch senden. Wie das funktioniert, lesen Sie unter KI-Website als Zip oder GitHub exportieren.

Wenn ChatGPT eine Node- oder Next-App vorschlägt

ChatGPT entscheidet sich manchmal selbst für Node mit Express oder für eine Next.js-App mit Serverfunktionen. Das kann passieren, wenn Sie nach einem Login, einer Datenbank oder einem Formular fragen, das Nachrichten speichert. Dann haben Sie zwei Möglichkeiten.

Zurück zu statisch. Bitten Sie ChatGPT: „Erstelle davon eine Version mit nur HTML, CSS und JavaScript. Das Formular darf an einen Formulardienst oder eine PHP-Datei senden.“ Für eine Firmenwebsite mit Kontaktformular reicht das fast immer. Wie Sie ein solches Formular zum Laufen bringen, lesen Sie unter Kontaktformular auf Ihrer KI-Website.

Mit dem Server weitermachen. Brauchen Sie wirklich einen Server oder eine Datenbank, ist das kein Standardpaket. Eine Node-App passt zu einem individuellen Angebot. Schreiben Sie uns per WhatsApp, was ChatGPT gebaut hat, dann schauen wir, was nötig ist, und Sie erhalten einen Vorschlag.

Was ist ChatGPT Sites?

OpenAI bietet einen Dienst namens ChatGPT Sites an, mit dem Sie eine Website beschreiben und von OpenAI selbst hosten lassen können. In der Dokumentation steht, dass Sie eine eigene Domain damit verbinden können, wo der Dienst das anbietet, und dass einige Frameworks und Datenbanken nicht unterstützt werden. Zum Zeitpunkt des Schreibens steht dort, dass er als Preview für ChatGPT-Business- und Enterprise-Workspaces verfügbar ist. Ob Ihr Konto ihn hat, prüfen Sie in der offiziellen Erklärung unter learn.chatgpt.com.

Es ist ein Dienst von OpenAI und kein Teil unseres Hostings. Ihre Website bleibt dann innerhalb der OpenAI-Plattform. Möchten Sie die Dateien selbst in der Hand haben, bei einem niederländischen Anbieter mit festem Monatspreis, ist der Export mit eigenem Hosting der Weg.

Auf Ihrer eigenen Domain online stellen

Sie haben jetzt einen Ordner mit einer index.html und gegebenenfalls einem Stylesheet und Bildern. Zwei Wege, ihn online zu bekommen:

Selbst per SFTP hochladen. Melden Sie sich mit FileZilla oder Cyberduck mit den Daten aus Ihrem Portal unter Dateien an und ziehen Sie den Inhalt Ihres Ordners in den Hauptordner Ihrer Website.

Wir übernehmen es. Senden Sie uns die Zip-Datei oder den GitHub-Link. Wir stellen sie im Rahmen des kostenlosen Umzugs online.

Danach verbinden Sie die Domain mit zwei Nameservern, die Sie einmalig bei Ihrem Registrar eintragen. Die Schritte stehen unter Domain mit Ihrer KI-Website verbinden. Gab es auf dieser Domain schon eine Website, bleibt sie online, bis Sie die Nameserver ändern.

Ihre Website liegt hinter Cloudflare, mit SSL und einem täglichen Backup. Das Website-Paket kostet € 9 pro Monat, oder € 90 pro Jahr. Siehe Preise oder bestellen Sie gleich über das Bestellformular. Mehr zu unserem Ansatz für ChatGPT-Websites steht unter Hosting für ChatGPT-Websites. Die vollständige Übersicht der Wege finden Sie unter KI-Website online stellen.