Astro-Website mit Claude Code: Vom Ordner bis zur Veröffentlichung

Auch jemand, der noch nie eine Zeile Code geschrieben hat, kann mit Astro über Claude Code eine Website erstellen. Ich schreibe schon lange keinen Code mehr von Hand; ich erledige alles mit Worten über KI, und eine Website mit Astro zu erstellen funktioniert genauso: Du erklärst, was du brauchst, und Claude schreibt den Code für dich.

Das Problem liegt meist nicht im Erstellen selbst, sondern darin, dass der Weg in einzelne Teile zerfällt. Ein Artikel erklärt die Installation, ein anderer behandelt Befehle, ein dritter die Veröffentlichung, und der komplette Ablauf ergibt sich nie zu einem klaren Bild. Hier führe ich dich von einem leeren Ordner bis zu einer Website, die unter einem Link im Internet erreichbar ist: was du installieren musst, welchen Befehl du zum Starten eines Projekts verwendest, wie du Seiten mit Claude Code erstellst und wie du das Ergebnis kostenlos veröffentlichst. Dabei orientiere ich mich an der offiziellen Astro-Dokumentation.

Zur Arbeit mit dem Dienst — in der Ailoot-Dokumentation.

Was brauchst du vor dem Start?#

Astro selbst verlangt nicht, dass du vorab etwas herunterlädst — es wird im nächsten Schritt über einen Befehl installiert. Du brauchst aber die Umgebung, in der alles läuft. Astro beschreibt den Einstieg so — du brauchst drei Dinge:

Sehen wir uns an, was die einzelnen Dinge in der Praxis bedeuten:

1. Node.js — ein Programm, ohne das weder Astro noch die meisten Vibe-Coding-Tools laufen. Lade es von nodejs.org herunter und installiere es wie eine gewöhnliche Anwendung. Die Versionsnummer in der Dokumentation steigt mit der Zeit, deshalb solltest du vor dem Start auf der Astro-Installationsseite die Anforderungen prüfen. Du brauchst eine Version mit gerader Nummer (22, 24); eine mit ungerader Nummer (23, 25) solltest du besser vermeiden.
2. VS Code — ein kostenloser Editor von Microsoft. Du öffnest darin den Projektordner, und Claude Code arbeitet ebenfalls dort; es schreibt den Code.
3. Terminal — ein Fenster, in das du Befehle eingibst. Du musst es nicht separat installieren: Es lässt sich über das Menü in VS Code öffnen, und alle folgenden Befehle gibst du dort ein.

Wenn du Claude Code bereits installiert und damit irgendetwas erstellt hast, ist alles vorhanden und du kannst diesen Schritt überspringen. Andernfalls findest du in meinem separaten Leitfaden eine Anleitung zur Installation von Claude Code.

Wie erstellst du mit einem einzigen Befehl ein Astro-Projekt?#

Hier beginnt das Projekt selbst, und dafür brauchst du nur einen Befehl. Öffne das Terminal und gib Folgendes ein:

npm create astro@latest

Der Installationsassistent wird gestartet. In der Dokumentation steht dazu:

Der Assistent führt dich durch die Schritte und stellt einige Fragen: Wie soll der Projektordner heißen, mit welcher Vorlage möchtest du beginnen und sollen die Abhängigkeiten gleich installiert werden? Du kannst bei jeder Frage die Standardoptionen auswählen — für deine erste Website reicht eine leere oder minimale Vorlage. Wenn du die Frage zur Installation der Abhängigkeiten mit „Nein“ beantwortet hast, kannst du sie später im Projektordner mit dem Befehl npm install manuell installieren.

Wenn der Assistent fertig ist, zeigt er an, dass das Projekt erstellt wurde, und schlägt als nächsten Schritt vor, in den Projektordner zu wechseln:

cd your-project-name

Damit ist das Projekt erstellt. Darin befindet sich bereits ein funktionsfähiges Website-Grundgerüst: mehrere Dateien und Ordner, die zum Erstellen der Seite dienen. Du musst sie nicht von Hand bearbeiten, aber es ist hilfreich zu wissen, was wo liegt. Astro schreibt nur einen Ordner zwingend vor:

Mit anderen Worten: src/pages ist der Ordner mit den Seiten der Website: der Startseite, der Seite „Über uns“ und den Kontaktseiten. src/components (wiederverwendbare Elemente wie Kopfzeilen und Schaltflächen), src/layouts (das gemeinsame Seitengerüst) und der Ordner public für Bilder und Dateien befinden sich meist in der Nähe. Du musst dir die Struktur nicht einprägen — merke dir nur, dass die Seiten in src/pages liegen, und verweise darauf, wenn du Claude etwa bittest: „Füge eine Kontaktseite hinzu.“

Wie erstellst du die Website selbst mit Claude Code?#

Das Grundgerüst ist fertig; jetzt baust du daraus deine Website, und Claude Code übernimmt die Arbeit. Öffne den Projektordner in VS Code, starte Claude Code und beschreibe in Worten, was du brauchst. Claude bearbeitet die Dateien in src/pages und den benachbarten Ordnern selbst — du gibst ihm nur Aufgaben und schaust dir das Ergebnis an.

Meiner Erfahrung nach funktioniert die Arbeit in kleinen Schritten am besten. Eine riesige Anfrage wie „Erstelle mir eine Unternehmenswebsite“ führt zu einem Durcheinander, das sich nur schwer korrigieren lässt. Teile die Arbeit deshalb in kurze, klare Aufgaben auf und gib sie nacheinander ein:

1. „Erstelle eine Startseite: eine große Überschrift, ein paar Sätze darüber, was ich mache, und eine Schaltfläche, die auf die Kontaktseite verweist.“
2. „Füge eine Leistungsseite mit einer Liste aus drei Abschnitten hinzu.“
3. „Füge eine Kontaktseite mit einer Telefonnummer und einem Link zu Telegram hinzu.“
4. „Ändere das Styling: heller Hintergrund und große, gut lesbare Schrift.“

Prüfe jeden Schritt, bevor du weitermachst — so erkennst du leichter, wenn etwas nicht stimmt, und kannst zurückgehen. Warum kleine Aufgaben zuverlässiger sind und wie du die KI auf Kurs hältst, gehört zum Context Engineering: Je klarer die Aufgabe und die Projektstruktur sind, desto vorhersehbarer ist das Ergebnis.

Astro bietet der KI eine dafür geeignete Struktur: Der Seiteninhalt ist vom Styling getrennt, und die Seiten werden nach gemeinsamen Regeln erstellt. Dadurch kommt Claude seltener durcheinander und beschädigt beim Bearbeiten einer Stelle seltener etwas in der Nähe. Wenn Claude plötzlich deine Dateien nicht mehr sieht oder irrelevante Antworten gibt, findest du Hilfe im Leitfaden dazu, warum Claude Code Projektdateien nicht sehen kann.

Wie kannst du die Website vor der Veröffentlichung ansehen?#

Bevor du die Website der Welt zeigst, siehst du sie dir auf deinem eigenen Computer an. Dafür hat Astro einen Entwicklungsserver — er zeigt die Website live direkt auf deinem Computer. Starte ihn mit einem Befehl im Terminal innerhalb des Projektordners:

npm run dev

Astro startet eine lokale Vorschau und gibt die Adresse im Terminal aus. Standardmäßig lautet sie localhost:4321. Kopiere die Adresse, öffne sie im Browser, und du siehst deine Website. Vorerst kannst nur du diese Adresse öffnen — niemand von außen kann darauf zugreifen; es ist dein Entwurf.

Praktisch daran ist, dass die Vorschau live ist: Claude bearbeitet eine Datei, und die Seite im Browser aktualisiert sich von selbst; ein manuelles Neuladen ist nicht nötig. Es geht schnell — bitte Claude um etwas, sieh es dir im Browser an, nimm eine Korrektur vor, schau noch einmal hin: In diesem Schritt verfeinerst du die Website. Wenn du mit dem Ergebnis zufrieden bist, veröffentliche sie online.

Wie veröffentlichst du eine Astro-Website kostenlos im Internet?#

Du musst die fertige Website an einem Ort ablegen, an dem andere sie über einen Link öffnen können. Der einfachste kostenlose Weg führt über GitHub: Lade zuerst den Projektcode in ein Repository hoch und verbinde dann einen Hostingdienst, der die Website erstellt und veröffentlicht. So gehst du vor:

1. Erstelle ein Repository auf GitHub. Ein Repository ist ein Online-Speicherort für Code, an den du Projektdateien sendest. Claude Code kann dir dabei mit Anweisungen in natürlicher Sprache helfen: Bitte es, „das Projekt in ein neues GitHub-Repository hochzuladen“, und es schlägt Befehle vor. Falls du GitHub noch nie verwendet hast, halte eine Anleitung zur Registrierung und Anmeldung bereit.
2. Verbinde das Hosting. Rufe einen der Dienste (Netlify, Vercel) auf, melde dich über dein GitHub-Konto an und wähle dein Repository aus. Die Astro-Dokumentation beschreibt diese Methode so: Der Hostingdienst überwacht dein Repository, erstellt die Website und veröffentlicht sie.
3. Prüfe die Build-Einstellungen. Normalerweise erkennt der Hostingdienst Astro und trägt die nötigen Einstellungen ein. Falls du sie manuell eingeben sollst, lautet der Build-Befehl in der Dokumentation astro build (oder npm run build), und die fertige Website wird im Ordner dist abgelegt.
4. Klicke auf „Veröffentlichen“. Der Dienst erstellt die Website und gibt dir einen Link wie site-name.netlify.app. Jeder kann die Website unter dieser Adresse öffnen.

Hier ist der genaue Wortlaut der Dokumentation dazu, wie ein Repository mit einem Hostingdienst verbunden wird:

Danach läuft die Veröffentlichung automatisch: Sende eine neue Änderung an das Repository, und die Website wird von selbst neu erstellt und aktualisiert; du musst nichts weiter anklicken.

Es gibt noch eine zweite kostenlose Möglichkeit — GitHub Pages. Dabei wird die Website direkt aus dem Repository mit den eigenen Tools von GitHub veröffentlicht. Astro bietet dafür ein offizielles Starterprojekt:

Bei dieser Möglichkeit ist die Website unter einer Adresse wie your-name.github.io/repository-name erreichbar, und du kannst später deine eigene Domain damit verbinden. Auch diese Einrichtung kannst du über Claude Code erledigen: Beschreibe die Aufgabe in Worten, und es bereitet die erforderliche Datei vor.

Wie viel kostet es, eine Astro-Website zu erstellen?#

Sprechen wir nun über die Kosten. Astro selbst ist ein kostenloses Open-Source-Tool; es gibt keinen gesonderten Preis dafür. Auch einfache Hostingdienste bieten kostenlose Optionen: GitHub Pages sowie die Einstiegstarife von Netlify und Vercel, die normalerweise für eine schlanke Astro-Website ausreichen (kostenlose Tarife haben Traffic-Limits, reichen aber meist für eine einfache Visitenkarten-Website oder Landingpage).

In der Praxis gibt es also zwei Dinge, für die du eventuell bezahlen musst, und auch das nicht immer. Erstens das KI-Tool, mit dem du die Website erstellst. Zweitens eine eigene Domain statt einer Adresse wie name.netlify.app; das ist optional und kostet pro Jahr wenig. Den Weg „Website erstellen und online veröffentlichen“ kannst du abschließen, indem du nur für Claude zahlst.

Was wird sonst noch zu Astro-Websites und Claude Code gefragt?#

Lerne Ailoot kennen.