KI-Tools

Mit Claude erstellte Website online stellen: Schritt für Schritt

Stellen Sie Ihre Website online ab 9 € pro Monat

Kostenloser Umzug. Wir ziehen Ihre Website um und helfen Ihnen per WhatsApp, Montag bis Sonntag, 9:00 bis 21:00 Uhr.

Kurz gesagt

  • Aus der Claude-App holen Sie eine Seite oder ein Design als HTML-Datei oder Zip. Unter dem eigenen Link von Claude liegt sie nicht auf Ihrer eigenen Domain, also stellen Sie die Dateien bei uns online.
  • Bauen Sie mit Claude Code, bitten Sie um eine statische Website, führen npm run build aus und laden den Inhalt des Ordners dist hoch.
  • Prüfen Sie vor dem Hochladen: index.html im Hauptordner, relative Pfade, keine Schlüssel oder Passwörter in den Dateien.
  • Wir stellen Ihre Zip-Datei oder Ihren GitHub-Link kostenlos online. Das Website-Paket kostet € 9 pro Monat.

Eine mit Claude erstellte Website stellen Sie auf Ihrer eigenen Domain online, indem Sie die Dateien aus Claude holen und bei einem Hosting-Anbieter ablegen. Am Anfang steht eine Frage: Haben Sie eine Seite aus der Claude-App oder ein Projekt aus Claude Code? Die erste ist eine Datei oder eine Zip, das zweite ein Ordner mit einem Build. Beide können Sie über Hosting für Claude-Websites auf Ihre eigene Domain bringen, sie brauchen nur einen etwas anderen Ansatz.

Welches Claude haben Sie genutzt?

Die Claude-App. Sie bitten im Chat um eine Seite, und sie erscheint als Artifact neben dem Gespräch. Mit Claude Design erstellen Sie außerdem Entwürfe auf einer Arbeitsfläche. Heraus kommt eine Seite oder eine Reihe von Seiten, kein Programm mit Server.

Claude Code. Das ist die Variante für Ihr Terminal oder Ihren Editor. Claude arbeitet dann in einem Ordner auf Ihrem Computer, kann Befehle ausführen und baut ein vollständiges Projekt. Was Sie bekommen, hängt davon ab, worum Sie bitten. Es gibt keinen festen Stack.

Sie wissen nicht, welches Sie genutzt haben? Steht die Seite nur im Chat, ist es die App. Haben Sie einen Ordner mit Dateien auf Ihrem Computer, in dem Claude gearbeitet hat, ist es Claude Code.

Eine Seite oder ein Design aus der Claude-App

Ein Artifact können Sie auf zwei Arten teilen. Mit der Option zum Veröffentlichen erhalten Sie einen öffentlichen Link, den Claude hostet. Praktisch, um etwas zu zeigen, aber es ist eine Adresse von Claude und nicht von Ihnen. Ihre eigene Domain verbinden Sie damit nicht. Für Ihre Domain brauchen Sie den Code selbst.

So holen Sie ihn heraus:

  • Ein Artifact. Öffnen Sie den Bereich mit der Seite und suchen Sie die Schaltflächen, um den Code anzusehen, zu kopieren oder herunterzuladen. Kopieren Sie den Code, legen Sie ihn in einer neuen Datei mit dem Namen index.html ab.
  • Ein Claude-Design-Projekt. Oben rechts finden Sie die Schaltfläche Export. Darunter stehen unter anderem „Download as .zip“ und „Export as standalone HTML“. Die Standalone-Variante ist eine einzelne Datei mit allem darin, die Zip enthält die einzelnen Dateien.

Öffnen Sie die Datei danach per Doppelklick. Sieht sie in Ihrem Browser genauso aus wie in Claude, funktioniert sie.

Eines sollten Sie wissen: Artifacts dürfen Skripte und Schriftarten nur von einigen bekannten Adressen laden, etwa cdnjs, jsDelivr, unpkg und Google Fonts. Deshalb funktioniert eine solche Datei meist ohne Anpassung auf normalem Hosting. Teile, die die Claude-Umgebung selbst nutzen, etwa ein eingebauter Aufruf an Claude, ziehen nicht an einen anderen Ort mit um. Ein Formular, das Ihre Besucher absenden können, braucht ebenfalls etwas, siehe Kontaktformular auf Ihrer KI-Website.

Ein Projekt aus Claude Code

Bei Claude Code bestimmen Sie das Ergebnis mit Ihrem Auftrag. Bitten Sie deshalb ausdrücklich um eine statische Website. Ein brauchbarer Auftrag:

Mach daraus eine statische Website, die ich auf normalem Hosting online stellen kann.
Kein Server, keine Datenbank. Sorge dafür, dass npm run build einen Ordner dist
mit einer index.html im Hauptordner erzeugt.

Nutzt Claude Next.js, bitten Sie um einen statischen Export mit output: 'export'. Die Ausgabe landet dann im Ordner out. Bei Vite und Astro heißt der Ordner meist dist.

Führen Sie danach im Projektordner aus:

npm install
npm run build

Der Inhalt des Ausgabeordners ist Ihre Website. Laden Sie also nicht den ganzen Projektordner mit node_modules, src und package.json hoch, sondern nur das, was aus dem Build kommt. Wie ein solches Projekt genau aussieht und was Sie prüfen, lesen Sie unter React- oder Vite-Website ohne Node-Server hosten.

Verlangt Claude einen Node-Server, eine Datenbank oder Server-Side-Rendering? Dann ist das keine lose Sammlung von Dateien mehr. Ein solches Projekt passt zu einem individuellen Angebot: Schreiben Sie uns per WhatsApp, was Sie gebaut haben, dann schauen wir gemeinsam, was nötig ist.

Checkliste vor dem Hochladen

Gehen Sie diese Punkte durch. Das dauert fünf Minuten und verhindert eine Website, die lokal gut aussieht und online nicht.

  1. index.html im Hauptordner. Die Startseite muss direkt in dem Ordner liegen, den Sie hochladen, nicht in einem Unterordner wie dist/dist oder meine-seite/.
  2. Relative Pfade oder eine passende Basis. Verweist ein Bild auf /assets/foto.jpg, funktioniert das auf einer eigenen Domain. In einem Unterordner nicht. Bei Vite steht die Einstellung base standardmäßig auf /, was zu einer Domain passt.
  3. Keine Geheimnisse in den Dateien. Suchen Sie in Ihrem Code nach Schlüsseln, Passwörtern und Tokens. Was in einem Build mit dem Präfix VITE_ steht, kann jeder im Browser lesen. Ein API-Schlüssel gehört da nicht hin.
  4. Alle Dateien vorhanden. Bilder, Schriftarten und Stylesheets liegen neben index.html oder in einem Unterordner, der mitgeht.
  5. Mehrere Seiten in React. Hat Ihre Website Routen wie /ueber-uns, die im Browser verarbeitet werden, muss der Server unbekannte Adressen an index.html weiterleiten. Das gilt für jeden Host. Bei uns ist es eine Einstellung, die wir auf Wunsch für Sie aktivieren, eine kurze WhatsApp-Nachricht genügt.

Auf Ihrer eigenen Domain online stellen

Jetzt haben Sie einen fertigen Ordner. Es gibt zwei Wege.

Selbst hochladen. Sie nutzen SFTP mit einem kostenlosen Programm wie FileZilla oder Cyberduck. Die Zugangsdaten finden Sie in Ihrem Portal (Mein Konto) unter Dateien. Ziehen Sie den Inhalt Ihres Ordners in den Hauptordner Ihrer Website. Danach ist Ihre Website online.

Wir übernehmen es. Senden Sie uns die Zip-Datei oder einen GitHub-Link, dann stellen wir sie im Rahmen des kostenlosen Umzugs online. Mehr zu Zip und GitHub steht unter KI-Website als Zip oder GitHub exportieren.

Danach verbinden Sie Ihre Domain. Von uns erhalten Sie zwei Nameserver, die Sie einmalig bei Ihrem Registrar eintragen. Die Anleitung steht unter Domain mit Ihrer KI-Website verbinden. Liegt auf dieser Domain schon eine andere Website, bleibt sie online, bis Sie die Nameserver ändern.

Die Website liegt hinter Cloudflare, SSL ist inklusive, und jeden Tag entsteht ein Backup, das Sie in Ihrem Portal unter Backup und Wiederherstellung zurückspielen können. Das Website-Paket kostet € 9 pro Monat, oder € 90 pro Jahr. Sie bestellen es über das Bestellformular.

Soll Claude später selbst Dateien anpassen oder hinzufügen? Das geht mit Ihrem eigenen Claude über MCP, ohne dass Sie jedes Mal neu hochladen müssen. Die Übersicht aller Wege finden Sie unter KI-Website online stellen.

Häufige Fragen

Kann ich ein Claude-Artifact auf meiner eigenen Domain online stellen?

Ja, indem Sie den Code als Datei speichern und bei uns hochladen. Der öffentliche Link von Claude selbst liegt auf einer Adresse von Claude und nicht auf Ihrer eigenen Domain.

Welchen Ordner muss ich nach npm run build hochladen?

Bei einem Vite-Projekt ist das meist der Ordner dist. Laden Sie den Inhalt dieses Ordners hoch, damit index.html direkt im Hauptordner Ihrer Website liegt.

Funktioniert ein Artifact, das Claude selbst aufruft, auch auf meiner Domain?

Die Seite selbst schon. Teile, die auf der Claude-Plattform laufen, etwa ein eingebauter Claude-Aufruf, gehören zur Umgebung von Claude und ziehen nicht automatisch mit um.

Hosting für Ihr Tool

Weiterlesen

Bereit, Ihre Website online zu stellen?

Bestellen Sie Website ab 9 € pro Monat, oder schreiben Sie uns zuerst per WhatsApp.