Automatische Installation von Astro

Bist du bereit, Astro zu installieren? In dieser Anleitung findest du alle Informationen, um direkt loszulegen.

Voraussetzungen

• Node.js - 14.15.0, v16.0.0 oder höher.
• Texteditor - Wir empfehlen VS Code mit unserer offiziellen Astro-Erweiterung.
• Terminal - Astro wird über seine Befehlszeilenschnittstelle (CLI) gesteuert.

Automatische Installation Manuelle Installation

So funktioniert die automatische Installation

Unser Assistent create-astro ist der schnellste Weg, ein neues Astro-Projekt von Grund auf zu erstellen.

Online-Vorschau

Möchtest du Astro lieber in deinem Browser ausprobieren? Dann besuche astro.new, um dir unsere Starter-Vorlagen anzusehen und ein neues Astro-Projekt zu erstellen, ohne jemals deinen Browser zu verlassen.

1. Starte den Assistenten

Führe den nachfolgenden Befehl in deinem Terminal aus, um unseren praktischen Installations-Assistenten create-astro zu starten:

# npm
npm create astro@latest

# yarn
yarn create astro

# pnpm
pnpm create astro@latest

Der Assistent create-astro führt dich durch alle nötigen Schritte, um dein neues Astro-Projekt zu erstellen. Du kannst ihn überall auf deiner Maschine ausführen — es ist also nicht erforderlich, vorher ein neues Verzeichnis für dein Projekt zu erstellen. Wenn du noch kein leeres Verzeichnis für dein Projekt erstellt hast, hilft der Assistent dir automatisch dabei.

Wenn alles gut geht, solltest du eine Erfolgsmeldung angezeigt bekommen, gefolgt von einigen empfohlenen nächsten Schritten. Verwende den cd-Befehl deines Betriebssystems, um in dein neues Projektverzeichnis zu wechseln und mit der Verwendung von Astro zu beginnen.

Wenn du den npm install-Schritt des create-astro-Assistenten übersprungen hast, solltest du die Abhängigkeiten installieren, bevor du fortfährst.

2. Starte Astro ✨

Astro stellt einen integrierten Entwicklungsserver bereit, der dir alles bietet, was du für die Entwicklung deines Projekts brauchst. Der Befehl astro dev startet den lokalen Entwicklungsserver, mit dem du deine neue Website zum allerersten Mal in Aktion sehen kannst.

Jede Starter-Vorlage liefert ein vorkonfiguriertes Startskript mit, das astro dev für dich ausführt. Verwende deinen bevorzugten Paketmanager, um diesen Befehl auszuführen und den Astro-Entwicklungsserver zu starten:

# npm
npm run dev

# yarn
yarn run dev

# pnpm
pnpm run dev

Wenn alles gut geht, sollte dein Astro-Projekt jetzt unter http://localhost:4321/ aufrufbar sein!

Astro überwacht zur Laufzeit alle Dateien im Verzeichnis src/, sodass du den Server nicht neu starten musst, wenn du während der Entwicklung Änderungen vornimmst.

Falls du dein Projekt nicht im Browser aufrufen kannst, gehe zurück zum Terminal, in dem du den dev-Befehl ausgeführt hast, und prüfe die angezeigten Meldungen, um herauszufinden, ob ein Fehler aufgetreten ist, oder ob dein Projekt unter einer anderen URL als der oben genannten aufrufbar ist.

Nächste Schritte

Geschafft! Du kannst nun damit loslegen, dein Projekt mit Astro zu entwickeln! 🥳

Wir möchten dir hier noch einige Themen als weiterführende Lektüre ans Herz legen. Du kannst sie in jeder beliebigen Reihenfolge lesen. Alternativ kannst du auch unsere Dokumentation verlassen, mit der Codebasis deines neuen Astro-Projekts spielen und hierher zurückkehren, falls du Probleme oder eine Frage hast.

📚 Füge ein Framework hinzu: Wie du Astro um die Unterstützung von React, Svelte, Tailwind und mehr mit npx astro add erweiterst, erfährst du in unserer Integrations-Anleitung.

📚 Veröffentliche deine Website: Wie du ein Astro-Projekt erzeugst und im Web veröffentlichst, lernst du in unserer Veröffentlichungs-Anleitung.

📚 Verstehe deine Codebasis: Wie die Struktur eines Astro-Projekts aufgebaut ist, findest du auf unserer Seite Projektstruktur.