So veröffentlichen Sie eine Website, die Sie mit ChatGPT oder Claude erstellt haben

Um eine Website zu veröffentlichen, die ChatGPT oder Claude für Sie geschrieben hat, speichern Sie den Code in einer Datei namens index.html, laden diese Datei auf GitHub hoch, wählen dann im Coolify-Panel auf Ihrem Server das Repository aus und veröffentlichen es. Ihre Website landet auf einer öffentlichen HTTPS-Adresse, und Sie können Ihre eigene Domain verbinden, falls Sie eine haben. Diese Anleitung setzt voraus, dass es Ihr erstes Mal ist, und führt durch jede Stufe von Anfang an.

Prüfen Sie zuerst, was Sie haben. Eine im Chat geschriebene Website ist meist eine einzelne HTML-Datei ohne Build, und das behandelt diese Anleitung. Erwähnt die Antwort npm install, package.json oder Next.js, haben Sie stattdessen eine App, und unsere Anleitung für Coding-Werkzeuge ist der bessere Ort.

1. Um eine einzelne Datei bitten

Senden Sie dies im Chat, damit Sie nicht mehrere Dateien jonglieren müssen:

Give me this site as one index.html file. Keep the CSS and JavaScript inside that file. If you use images, tell me their file names.

2. Die Datei auf Ihrem Computer speichern

• ChatGPT: Der Code kommt meist in einem Codeblock im Chat, kopieren Sie also den Block. Sehen Sie eine Download-Schaltfläche, können Sie auch die nutzen.
• Claude: Die Website öffnet sich oft als Artefakt neben dem Chat. Die Dokumentation von Anthropic beschreibt oben am Artefakt Bedienelemente zum Ansehen, Kopieren oder Herunterladen des Codes. Aus einer Vorlage erstellte Designs haben Export, das Ihnen eigenständiges HTML oder eine .zip gibt.

Wenn Sie den Code kopiert haben, fügen Sie ihn in einen Texteditor ein und speichern Sie ihn als index.html. Stellen Sie im Windows-Editor den Dateityp auf „Alle Dateien“, sonst endet der Name auf .txt. Wechseln Sie in TextEdit auf dem Mac zuerst zu reinem Text. Doppelklicken Sie auf die Datei, und Ihre Website sollte sich im Browser öffnen. Legen Sie Bilder in denselben Ordner.

3. Die Dateien auf GitHub hochladen

Der Server holt Ihre Website aus einem Repository auf GitHub, das wie ein Ordner für Ihre Dateien funktioniert.

1. Erstellen Sie ein GitHub-Konto. Wählen Sie oben rechts New repository.
2. Geben Sie ihm einen kurzen Namen, setzen Sie die Sichtbarkeit auf Public, schalten Sie Add README ein und drücken Sie Create repository.
3. Öffnen Sie über der Dateiliste das Menü Add file, wählen Sie Upload files, ziehen Sie index.html und Ihre Bilder hinein und drücken Sie Commit changes.

Ein öffentliches Repository kann jeder sehen, und eine HTML-Seite ist ohnehin für jeden Besucher sichtbar. Legen Sie darin also niemals ein Passwort oder einen API-Schlüssel ab.

4. Den Server bestellen

Bestellen Sie auf der Seite Next.js VPS oder der Seite Coolify VPS. Beide kommen mit dem Deployment-Panel Coolify. Eine reine HTML-Website hat keinen Build-Schritt und braucht daher nicht den Speicher wie Next.js, und auf der Coolify-Seite können Sie eine kleinere Größe wählen. Öffnen Sie nach der Zahlung in Ihrem Seturack-Panel den Server unter Meine Server und warten Sie, bis die Zeile App auf dem Tab Übersicht „bereit“ anzeigt.

5. Aus dem Panel veröffentlichen

1. Öffnen Sie auf dem Tab Übersicht den Link Panel-Adresse und melden Sie sich mit den Zeilen E-Mail und Passwort bei Coolify an.
2. Öffnen Sie auf der Seite Projects My first project und production und klicken Sie dann auf New resource.
3. Wählen Sie Public Git Repository, geben Sie die Adresse Ihres GitHub-Repositorys ein und drücken Sie Check repository.
4. Wählen Sie unter Build pack die Option Static, lassen Sie Base Directory auf / und drücken Sie Continue. Diese Option veröffentlicht die Dateien unverändert, ohne Build.
5. Drücken Sie Deploy. Ist der Vorgang fertig, öffnen Sie die HTTPS-Adresse auf der Seite Domains.

Das war's, Ihre Website ist live. Sie haben Root-Zugriff und können alles im Panel verwalten, wenn Sie das bevorzugen.

Ein Coding-Werkzeug kann das für Sie erledigen

Wenn Sie die Website oft ändern wollen, erleichtert ein Coding-Werkzeug wie Claude Code oder Cursor das Leben. Öffnen Sie den Ordner mit index.html in dem Werkzeug, kopieren Sie die Zeile In Ihr KI-Werkzeug einfügen aus Ihrem Seturack-Panel und fügen Sie sie ein. Das Werkzeug legt das Repository an, veröffentlicht die Website und gibt Ihnen die Adresse. Einzelheiten stehen in unserer Anleitung für Coding-Werkzeuge. Die Chatfenster von ChatGPT und Claude können keine Befehle an einen Server senden, fügen Sie diesen Text dort also nicht ein.

Vier Dinge, die Sie wissen sollten

• Formulare: Ein Kontaktformular in reinem HTML kann von sich aus keine E-Mail senden. Um Nachrichten zu erhalten, muss es sich mit einem Formulardienst oder Servercode verbinden.
• Konten und Zahlungen: Anmeldung, gespeicherte Datensätze und Zahlungen brauchen Servercode und eine Datenbank. Dann ist Ihre Website eine App.
• Dateinamen: Der Server unterscheidet Groß- und Kleinschreibung. Steht im Code logo.png und heißt die Datei Logo.PNG, wird das Bild nicht angezeigt.
• Sicherungen: Tägliche Sicherungen sind im Preis enthalten, und die Hauptkopie Ihrer Website bleibt auf GitHub.

Häufige Fragen

Wie viel RAM braucht eine einfache HTML-Website?

Ohne Build verlangt die Website selbst sehr wenig, daher setzt Coolify die Untergrenze. Seine Dokumentation verlangt mindestens 2 Kerne und 2 GB RAM. Die Next.js-Option empfiehlt wegen ihrer Builds mehr: mindestens 4 GB RAM, 2 vCores und 40 GB Festplatte.

Was kostet es im Monat?

Die empfohlene Mindestgröße der Next.js-Option kostet etwa $6 im Monat (inklusive Mehrwertsteuer), und außerhalb der Türkei zahlen Sie in US-Dollar. Kleinere Größen finden Sie auf der Preisseite. Tägliche Sicherungen sind im Preis enthalten, und der Traffic ist unbegrenzt. Eine Domain kostet separat, Sie kaufen sie anderswo.

Wie verbinde ich meine eigene Domain?

Richten Sie bei Ihrem Domainanbieter einen A-Record auf die IP-Adresse des Servers. Drücken Sie in Coolify auf der Seite Domains auf Add domain, geben Sie Ihre Domain mit https ein, speichern Sie und drücken Sie Redeploy. Das Zertifikat wird automatisch ausgestellt. Unser Domain-Artikel erklärt den A-Record.

Wie aktualisiere ich die Website später?

Bitten Sie ChatGPT oder Claude um die Änderung, laden Sie die neue index.html unter demselben Namen auf GitHub hoch und drücken Sie in Coolify Redeploy. Um bei jedem Upload zu veröffentlichen, tragen Sie auf GitHub die Adresse von der Seite Webhooks der App ein, wie unsere Anleitung für Next.js erklärt.

Brauche ich eine Datenbank?

Für eine reine HTML-Website nicht. Um Besucherdaten zu speichern, können Sie in Coolify auf demselben Server PostgreSQL anlegen, brauchen aber auch Servercode, um sie zu nutzen. Gehen Sie dann zu unserer Anleitung zum Veröffentlichen von Apps über.

Fertig eingerichtet bei Seturack: Next.js, Coolify.