Website mit Claude Code bauen und deployen (von null bis live)

Inhaltsverzeichnis

• Was du brauchst
• Warum Claude Code statt No-Code-Builder?
• Schritt 1: Die Seite scaffolden
• Schritt 2: Lokal iterieren
• Schritt 3: Auf GitHub pushen
• Schritt 4: Mit lowcloud deployen
• Was kostet das Ganze?
• Wann dieser Stack die falsche Wahl ist

Vibe Coding fühlt sich großartig an, bis du tatsächlich deployen musst. Du sitzt seit zwei Stunden in einer Claude-Code-Session, die Seite sieht auf localhost:3000 gut aus, und jetzt brauchst du eine echte URL mit HTTPS, einen echten Server und eine Deploy-Pipeline, die nicht zusammenbricht, sobald du den Laptop zuklappst. Diese Anleitung führt dich den kompletten Weg: vom leeren Ordner zur Live-Website auf souveräner deutscher Infrastruktur, mit Claude Code, GitHub, lowcloud und Hetzner. Du brauchst kein DevOps-Wissen, solltest aber ein Terminal öffnen können.

Das Wichtigste in Kürze

• Claude Code scaffolded, bearbeitet und veröffentlicht ein komplettes Astro-Projekt aus natürlicher Sprache, während du die volle Kontrolle über den Code behältst.
• GitHub bleibt die zentrale Quelle der Wahrheit, sodass ein Repo-Umzug oder ein neuer Mitwirkender nichts kaputt macht.
• lowcloud verbindet dein Repo mit einem Hetzner-Server (CX22, ab etwa 4 € pro Monat) und übernimmt SSL, Build und Push-to-Deploy automatisch.
• Der gesamte Stack kostet rund 20 bis 30 € pro Monat, gehostet in Deutschland und DSGVO-konform.

Was du brauchst

Die Liste ist kurz. Wenn du jemals ein Terminal geöffnet hast, hast du das meiste davon.

• Claude Code: Anthropics CLI. Läuft lokal, bearbeitet Dateien, führt Befehle aus und erklärt, was es tut. Kostenlos im Claude-Pro-Plan oder per Pay-per-Use über die API.
• GitHub: Hostet den Code. Der kostenlose Plan reicht.
• lowcloud: Verbindet dein GitHub-Repo mit einem Server und übernimmt das Deployment. Kein Kubernetes-Wissen nötig.
• Hetzner: Deutscher Cloud-Anbieter mit starkem Preis-Leistungs-Verhältnis und EU-Datenstandort. Über diesen Empfehlungslink bekommst du 20 € Startguthaben, das die ersten Monate abdeckt.
• Ein Terminal und Node.js 20+ installiert. Mehr nicht.

Warum Claude Code statt No-Code-Builder?

Wenn du unser Lovable-Tutorial gelesen hast, kennst du den No-Code-Weg: Im Browser mit einer KI chatten, Live-Vorschau ansehen, nach Git exportieren. Das funktioniert hervorragend für Landingpages und einfache SaaS-UIs. Warum also das Terminal wählen?

Claude Code gibt dir die Codebasis. Jede Datei, jede Abhängigkeit, jede Konfiguration. Du bist nicht hinter einer UI abstrahiert, und damit zählen drei Dinge mehr als bei Lovable:

1. Du kannst jedes Framework verwenden. Astro, Nuxt, Next.js, SvelteKit, reines HTML. Claude Code legt dich nicht fest.
2. Du kannst ohne Grenzen refactoren. Frag Claude, von Tailwind v3 auf v4 zu migrieren, das CMS auszutauschen oder einen Monolithen in ein Monorepo zu zerlegen. Ein No-Code-Builder kann das in der Regel nicht.
3. Dir gehört der Entwicklerkreislauf. git, pnpm, eslint, dein Editor, deine CI: alles funktioniert wie sonst auch.

Der Tradeoff ist ehrlich: Claude Code ist ein Entwickler-Tool. Wenn du noch nie ein Terminal angefasst hast und einfach nur eine Fünf-Minuten-Landingpage willst, fang mit Lovable an. Wenn du das Projekt über eine einzelne Seite hinaus wachsen lassen willst, skaliert Claude Code besser.

Schritt 1: Die Seite mit Claude Code scaffolden

Installiere Claude Code einmalig mit einem einzigen Befehl aus der offiziellen Doku:

npm install -g @anthropic-ai/claude-code

Dann legst du einen frischen Projektordner an und startest eine Session:

mkdir my-site && cd my-site
claude

Du bist jetzt in einer Claude-Code-Session in einem leeren Verzeichnis. Sag ihm, was du willst. Der folgende Prompt funktioniert als Startpunkt. Passe die Beschreibung an dein tatsächliches Projekt an.

Scaffolde eine statische Website mit Astro 5, TypeScript und Tailwind v4.
Die Seite ist für ein kleines Produktivitäts-SaaS namens "Focusly".
Sektionen: ein Hero mit Headline, drei Feature-Karten, eine Pricing-Tabelle
mit zwei Stufen, ein FAQ-Block und ein Footer mit Kontaktinfos.
Verwende ein dunkles Theme mit grünem Akzent. Richte ein sauberes
SEO-Setup ein (Meta-Tags, OpenGraph, Sitemap, robots.txt). Konfiguriere
pnpm als Package-Manager. Nutze Astros Inseln nur, wenn nötig.

Claude Code führt pnpm create astro@latest aus, installiert die Abhängigkeiten, schreibt die Komponenten und sagt dir genau, was es geändert hat. Wenn es fertig ist, schlägt es vor:

pnpm dev

Öffne http://localhost:4321 und du hast eine funktionierende Seite. Wenn etwas nicht passt, beschreibe es in normaler Sprache ("der Hero wirkt auf dem Handy zu eng, mehr vertikalen Innenabstand"), und Claude Code bearbeitet die richtige Datei.

Praxistipp: Führe früh in deiner Session /init aus. Claude Code legt eine CLAUDE.md im Repo-Root an, die Stack, Konventionen und Befehle festhält. Spätere Sessions lesen diese Datei automatisch und bleiben mit deinen Entscheidungen konsistent.

Schritt 2: Lokal iterieren

Jetzt beginnt die Schleife. Du beschreibst, was du willst, Claude Code setzt es um, du prüfst das Ergebnis im Browser. Ein paar Gewohnheiten halten das produktiv:

• Committe oft. Nach jeder sinnvollen Änderung lässt du Claude git add und git commit mit einer klaren Message ausführen. Jeder Commit ist ein Checkpoint, zu dem du zurückkehren kannst.
• Halte pnpm build grün. Bevor du pushst, lass pnpm build laufen (oder bitte Claude darum). Vercel, Netlify, lowcloud, jeder Host führt den Build aus. Wenn er lokal fehlschlägt, schlägt er auch in Produktion fehl.
• Nutze den Plan-Modus für größere Änderungen. Wenn ein Refactoring ansteht, tippe /plan. Claude schlägt zuerst einen Ansatz vor, du genehmigst ihn, und erst dann werden Dateien angefasst. Das spart viele "Moment, warum hast du das gelöscht?"-Momente.

Claude Code ist auch bei den unspektakulären Aufgaben gut: Alt-Texte schreiben, ein og-image generieren, eine humans.txt anlegen, den LCP-Score reparieren. Frag einfach. Es greppt durch das Projekt, findet die richtigen Dateien und patcht sie an Ort und Stelle.

Schritt 3: Auf GitHub pushen

Sobald die Seite so aussieht, wie du sie willst, übernimmt GitHub als zentrale Quelle der Wahrheit. Claude Code kann das von Anfang bis Ende erledigen, wenn die GitHub CLI (gh) installiert und authentifiziert ist.

Sag Claude:

Initialisiere git, lege ein privates GitHub-Repo namens "focusly-site"
unter meinem Account an und push den main-Branch.

Hinter den Kulissen passiert das hier:

git init
git add .
git commit -m "Initial scaffold"
gh repo create focusly-site --private --source=. --push

Zwei Minuten später hast du ein privates Repo mit einer funktionierenden Astro-Seite. Ab jetzt ist jeder git push auf main ein Release-Kandidat.

Wenn du es lieber manuell machst, legst du das Repo in der GitHub-UI an und führst die drei Befehle selbst aus. Das Ergebnis ist identisch.

Schritt 4: Mit lowcloud auf Hetzner deployen

Das ist der Teil, den die meisten Tutorials weglassen. Vercel und Netlify sind exzellent, aber sie hosten deine Seite außerhalb der EU und binden dich an ihre proprietäre Build-Pipeline. lowcloud geht einen anderen Weg: Es deployt auf deinen eigenen Hetzner-Server, führt den Build in einem Container aus und gibt dir eine Live-URL mit automatisch erneuertem SSL über Let's Encrypt.

Der Setup-Prozess ist einmalig und sieht so aus:

1. Hetzner-Account erstellen über den Empfehlungslink. Du bekommst 20 € Guthaben, genug für mehrere Monate einer CX22-Instanz.
2. Bei lowcloud.de registrieren und dein Hetzner-Projekt verbinden (lowcloud nutzt einen Hetzner-API-Token, beschränkt auf das Projekt deiner Wahl).
3. GitHub-Konto verbinden. lowcloud installiert eine kleine GitHub App, damit es deine Repos lesen und auf Pushes reagieren kann.
4. Neue App anlegen. Wähle das focusly-site-Repo, den main-Branch und als Template "Static site / Astro". lowcloud erkennt den Build-Befehl (pnpm build) und den Output-Ordner (dist) automatisch.
5. Server auswählen. Entweder eine vorhandene Hetzner-Instanz nutzen oder lowcloud eine neue CX22 provisionieren lassen. Das erste Deploy dauert etwa drei Minuten.
6. Domain hinzufügen. Setze einen CNAME oder A-Record auf die von lowcloud bereitgestellte Adresse. SSL wird automatisch beantragt und erneuert.

Ab jetzt löst jeder git push auf main einen Build und ein Zero-Downtime-Rollout aus. Wenn etwas kaputtgeht, kannst du im lowcloud-Dashboard mit einem Klick auf die vorherige Version zurückrollen.

Wer tiefer einsteigen will, warum die Cloud-agnostische Architektur dahinter wichtig ist, findet die lange Version in unserem Pillar-Artikel. Die kurze Version: Dein Code ist portabel, deine Daten liegen in Deutschland, und du kannst jederzeit ohne Umschreibungen wechseln.

Was kostet das Ganze?

Echte Zahlen, keine Sternchen.

Du landest für ein kleines Projekt zwischen 20 und 35 € pro Monat, und das meiste davon ist das Claude-Code-Abo, das du sowieso zahlst. Keine Pro-Sitz-Preise, keine überraschende Egress-Rechnung, keine Dyno-Mathematik.

Wann dieser Stack die falsche Wahl ist

Ehrlicher Abschnitt. Dieses Setup ist großartig für Marketing-Seiten, Portfolios, kleine SaaS-Frontends, interne Tools und Side Projects. Es passt schlecht, wenn etwas davon zutrifft:

• Du brauchst managed Postgres mit automatisiertem Point-in-Time-Recovery und einem 99,99 %-SLA out of the box. lowcloud kann Postgres für dich betreiben, aber wer ein SOC-2-auditiertes DBaaS ohne nachzudenken will, ist bei AWS RDS oder Neon besser aufgehoben.
• Du brauchst Multi-Region-Failover. Hetzner steht in Deutschland und Finnland. Wenn deine Zielgruppe in Singapur unter 100 ms Latenz erwartet, ist dieser Stack die falsche Wahl.
• Du erwartest massiven, stark schwankenden Traffic und willst ein globales Edge-Netzwerk mit Autoscaling. Eine CDN-first PaaS wird dir hier besser dienen.

Für alle anderen ist die Kombination aus Claude Code, GitHub, lowcloud und Hetzner ein leise mächtiger Default. Du bekommst Geschwindigkeit, Eigentum am Code und eine vernünftige Rechnung.

Häufig gestellte Fragen

Muss ich programmieren können, um Claude Code zu nutzen?

Du brauchst genug Vertrautheit mit einem Terminal, um Befehle einzutippen und Fehlermeldungen zu lesen. Eine bestimmte Sprache musst du nicht kennen. Claude Code erklärt seine Änderungen, schlägt Fixes vor und führt den Build für dich aus. Die meisten wechseln von Lovable zu Claude Code in dem Moment, in dem sie Dinge wollen, die die No-Code-UI nicht ausdrücken kann.

Kann ich Claude Code mit Vercel oder Netlify statt lowcloud verwenden?

Ja, das funktioniert problemlos. Claude Code ist Framework-agnostisch und Host-agnostisch. Diese Anleitung nutzt lowcloud wegen Datensouveränität und planbaren Kosten. Wenn dein Fokus auf einem globalen Edge-Netzwerk oder einer engen Next.js-Integration liegt, ist Vercel eine gute Wahl, und der Rest des Workflows bleibt identisch.

Wo liegen meine Daten bei diesem Setup?

Dein Code liegt auf GitHub (US-gehostet, aber verschlüsselt bei Übertragung und in der Ablage). Deine fertige Seite und alle Daten, die sie speichert, liegen auf Hetzner-Servern in Deutschland oder Finnland, beide innerhalb der EU. lowcloud selbst ist ein deutsches Unternehmen. Für die meisten Projekte passt das sauber zu den Prinzipien digitaler Souveränität, über die wir an anderer Stelle geschrieben haben.

Wie unterscheidet sich das von Lovable, v0 oder Bolt?

Diese Tools generieren ein Projekt für dich und hosten die Arbeitsversion in ihrer Browser-UI. Claude Code bearbeitet Dateien auf deinem lokalen Rechner, in jedem Framework, für jede Projektgröße. Die Exporte aus Lovable und v0 sind normale Git-Repos, du kannst die Tools also durchaus kombinieren: in Lovable scaffolden und mit Claude Code weitermachen, sobald die No-Code-UI im Weg steht.

Wie geht es weiter?

Du hast eine Live-Seite, Push-to-Deploy, HTTPS und eine Build-Pipeline, die weniger kostet als ein Restaurantbesuch. Der spannende Teil fängt jetzt erst an. Füge eine Datenbank hinzu, ein Kontaktformular über Resend, ein Analytics-Setup, einen Blog. Claude Code erledigt jeden dieser Punkte in ein bis zwei Sessions, wenn du beschreibst, was du willst.

Wenn du lieber den No-Code-Weg gehst und später migrierst, deckt unser Lovable-Build-and-Deploy-Guide dasselbe Ziel von einem anderen Startpunkt aus ab. Und wenn dein Projekt über eine einzelne statische Seite hinauswächst, beschreibt der Artikel zur Cloud-agnostischen Architektur, was als Nächstes ansteht.

Bei lowcloud registrieren und heute Nachmittag das erste Deploy verschicken.