Website mit Claude Code erstellen: Schritt-für-Schritt-Anleitung

Eine Website mit Claude Code erstellen, ohne selbst zu programmieren: Das klingt nach einem leeren Versprechen, funktioniert aber wirklich. Claude Code hat die Softwareentwicklung so weit automatisiert, dass heute jeder eine eigene Website bauen und online bringen kann. Du brauchst dafür keine technischen Vorkenntnisse, nur etwas Zeit. In dieser Anleitung gehen wir den kompletten Weg durch, von der Installation bis zur Anbindung an GitHub.

Das Prinzip: Du wirst zum Manager

Bevor wir starten, eine wichtige Einordnung: Du wirst in dieser Anleitung nicht selbst programmieren. Die KI übernimmt die gesamte Entwicklung, und deine Aufgabe ist es, deinen KI-Entwickler richtig einzusetzen. Eine Website ist am Ende des Tages nur Code, und genau diesen Code schreibt Claude Code für dich.

Der Prozess hat zwei große Schritte. Erstens erstellt Claude Code den Code lokal auf deinem Rechner, wo du die Website testen und anpassen kannst. Zweitens bringst du diesen Code auf einen Server, damit die Seite jederzeit erreichbar ist. Was du dafür grundsätzlich brauchst und was das Ganze kostet, habe ich im Artikel Website mit KI erstellen aufgeschlüsselt.

Übrigens: Alles, was ich dir hier mit Claude Code zeige, funktioniert im Prinzip genauso mit Codex, falls dir das lieber ist.

Schritt 1: Claude Code installieren

Falls Claude Code noch nicht auf deinem Rechner ist, lädst du dir zuerst die Claude App für dein Betriebssystem herunter und meldest dich mit deinem Anthropic-Account an. Um Claude Code zu nutzen, brauchst du mindestens den Claude-Pro-Plan. Der kostet 15 Euro im Monat, bei monatlicher Zahlung 18 Euro.

Wenn du dir unsicher bist, hol dir Pro erstmal nur für einen Monat, entwickle die Website und kündige danach wieder. Du zahlst dann für die Entwicklung einer richtig guten Webseite einmalig 18 Euro. Das ist ein guter Deal, glaub mir.

Mit dem Pro-Plan siehst du in der App oben links neben dem Reiter „Chat" den Reiter „Code". Ein Klick darauf, und du bist drin. Eine ausführlichere Setup-Hilfe findest du in meiner Anleitung zum Einrichten von Claude Code.

Schritt 2: Einen leeren Projektordner anlegen

Claude Code hat einen wichtigen Unterschied zum normalen Claude-Chatbot: Es arbeitet immer in einem Ordner. Öffne also deinen Datei-Explorer und erstelle einen neuen, leeren Ordner, zum Beispiel „Persönliche Website". In diesem Ordner legt Claude Code später alle Dateien deiner Website ab.

In Claude Code gehst du dann auf „Ordner öffnen" und wählst genau diesen Ordner aus. Damit ist er verbunden, und Claude Code kann darin arbeiten.

Schritt 3: Im Plan-Modus das Konzept erstellen

Jetzt kommt der spaßige Teil. Du hast wahrscheinlich schon eine grobe Vorstellung davon, wie deine Website aussehen soll. Bevor Claude Code loslegt, lohnt es sich, diese Vorstellung zu konkretisieren. Dafür gibt es den Plan-Modus: Unten links im Chat wechselst du zwischen verschiedenen Modi. Im Plan-Modus erstellt Claude Code erst einmal nur ein Konzept und programmiert noch nichts.

Als Beispiel bauen wir eine persönliche Website mit Portfolio. Mein Prompt sah so aus:

Ich möchte eine persönliche Webseite über mich erstellen. Hier ist mein LinkedIn: [Link]. Hier ist mein YouTube: [Link]. Ziel ist ein Portfolio, das für potenzielle Arbeitgeber im Tech-Bereich interessant ist. Stelle mir fünf klärende Fragen, bevor du den Plan entwickelst.

Wenn du keine Social-Media-Profile hast, kein Problem. Dann beschreibst du einfach, was du machst und was auf die Seite soll. Mein Rat: Mach es am Anfang nicht zu kompliziert. Bring erstmal eine Website online, perfektionieren kannst du später immer noch.

Unten rechts stellst du das neueste Claude-Modell ein und wählst als Aufwand „Max". Dann schickst du den Prompt ab. Claude kommt vor dem fertigen Plan mit ein paar Rückfragen zurück, bei mir etwa zur Positionierung, zum technischen Aufbau und zur Sprache. Ein Punkt ist dabei wichtig: Wähle für eine erste einfache Website nur HTML, CSS und JavaScript. Das hält alles simpel.

Design-Hilfen, wenn du mehr willst

Für bessere Designs gibt es sogenannte Skills, also Anleitungen, die Claude beim Gestalten helfen. Der Frontend-Design-Skill von Anthropic ist standardmäßig dabei, den UI/UX Pro Max Skill kannst du nachinstallieren. Sag Claude einfach, dass du den Skill nutzen möchtest, und gib ihm den Link dazu. Den Rest erledigt er selbst.

Du kannst auch Links zu bestehenden Websites in den Prompt packen, dann zieht sich Claude Code daraus alles Wichtige. Auf Dribbble findest du gute Ideen, wie deine Seite aussehen könnte. Und wer mag, erstellt den ersten Entwurf im Claude-Design-Tool, am besten gleich in mehreren Versionen, und schickt die beste über „Send to Claude Code" weiter.

Schritt 4: Plan prüfen und bauen lassen

Sobald der Plan steht, liest du ihn dir durch. Bei mir hatte Claude einen One-Pager mit mehreren Sektionen vorgeschlagen, an Impressum und Datenschutzerklärung gedacht und Standarddateien eingeplant, die der Website helfen, später besser gefunden zu werden. Dieses Vorgehen hat zwei Vorteile: Du kannst Anpassungen machen, bevor überhaupt etwas gebaut wird, und das Ergebnis wird besser, weil Claude mehr Zeit ins Konzept gesteckt hat.

Wenn du eigene Texte, Bilder oder Materialien auf der Seite haben willst, ziehst du sie einfach in den Projektordner. Passt alles, klickst du auf „Akzeptieren und Automodus". Claude Code setzt den Plan dann selbstständig um. Das dauerte rund 30 Minuten, mit mehreren Iterationen und eigenen Screenshots zur Kontrolle.

Danach kannst du dir die Website über einen lokalen Testserver anschauen. In der URL-Leiste steht dann „localhost", die Seite liegt also nur auf deinem Rechner und ist noch nicht online. Meine erste Version hatte einen hellen und einen dunklen Modus, eine Navigation und ein Kontaktformular, sogar meine Videos waren eingebunden. Am Design kann man noch feilen, aber für den Anfang war das ordentlich.

Schritt 5: Die Website online bringen

Jetzt zu dem Teil, an dem früher die meisten gescheitert sind. Deine Website braucht einen Server. Ich nutze dafür seit Jahren das Business-Webhosting von Hostinger, auch schon bevor ich mit YouTube angefangen habe. Der Business-Plan kostet rund 4 Euro im Monat, du kannst damit bis zu 50 Websites hosten und bekommst eine Domain im ersten Jahr gratis dazu. Sichere dir am besten die .com-Domain mit deinem Namen. Wenn du nur in Deutschland unterwegs bist, geht auch .de.

Beim Einrichten wählst du „Leere PHP/HTML-Website" und als Serverstandort Deutschland. Und dann kommt der Moment, der einfacher ist, als du denkst: Du öffnest im Hosting-Dashboard den Dateimanager, gehst in den Ordner public_html und schiebst die Dateien hinein, die Claude Code lokal erstellt hat. Das war's. Rufst du jetzt deine Domain im Browser auf, ist deine Website online.

Wenn du bis hierhin mitgemacht hast: Glückwunsch. Damit bist du schon weiter als die allermeisten.

Schritt 6: GitHub anbinden, der saubere Weg

Dateien manuell auf den Server zu schieben funktioniert, ist auf Dauer aber unpraktisch. Der saubere Weg läuft über GitHub. Stell dir GitHub als Cloud für deinen Code vor: Claude Code lädt Änderungen dorthin hoch, und dein Server zieht sie sich automatisch. Du hast damit immer ein Backup, kannst von überall auf den Code zugreifen und über die eingebaute Versionierung jederzeit zu einer früheren Version zurückspringen.

So richtest du das ein: Erstelle dir einen GitHub-Account, falls du noch keinen hast. In der Claude App gehst du auf „Anpassen", dann auf „Konnektoren", verbindest dort die GitHub-Integration und meldest dich mit deinem GitHub-Account an. Danach sagst du Claude Code einfach: „Bringe diesen Code auf GitHub." Er legt dann ein neues Projekt an, ein sogenanntes Repository. Ich habe meins auf privat gestellt.

Im Hosting-Dashboard gehst du anschließend auf „Erweitert", dann auf „Git" und dort auf „Bereitstellung über GitHub". Du meldest dich mit GitHub an, gibst Zugriff auf dein Repository und klickst auf „Bereitstellen".

Ab jetzt gilt: Änderst du etwas mit Claude Code und sagst ihm, er soll es auf GitHub hochladen, übernimmt dein Server die Änderung automatisch. Ich habe das getestet, indem ich im Titel „Ich baue" zu „Ich entwickle" ändern ließ. Eine Minute später war die Änderung live.

Fazit

Mehr steckt nicht dahinter: Plan erstellen, bauen lassen, Dateien auf den Server, GitHub anbinden. Genau diese Fähigkeiten machen dich auch auf dem Jobmarkt interessant, weil du zeigst, dass du mit KI-Agenten echte Ergebnisse lieferst. Wenn du danach tiefer in die Arbeit mit Claude Code einsteigen willst, schau dir meinen Komplett-Einstieg in Claude Code an.