Entwickeln und bauen

Sobald du ein Astro-Projekt hast, bist du bereit, mit Astro zu bauen! 🚀

Bearbeite dein Projekt

Um Änderungen an deinem Projekt vorzunehmen, öffne deinen Projektordner in deinem Code-Editor. Wenn du im Entwicklungsmodus arbeitest und der Entwicklungsserver läuft, kannst du die Aktualisierungen an deiner Website sehen, während du den Code bearbeitest.

Du kannst auch Aspekte deiner Entwicklungsumgebung anpassen, z.B. TypeScript konfigurieren oder die offiziellen Astro-Editor-Erweiterungen installieren.

Starte den Astro-Entwicklungsserver

Astro wird mit einem eingebauten Entwicklungsserver geliefert, der alles hat, was du für die Projektentwicklung brauchst. Mit dem CLI-Befehl astro dev wird der lokale Entwicklungsserver gestartet, damit du deine neue Website zum ersten Mal in Aktion sehen kannst.

Jede Startvorlage wird mit einem vorkonfigurierten Skript geliefert, das astro dev für dich startet. Nachdem du in dein Projektverzeichnis navigiert hast, verwende deinen bevorzugten Paketmanager, um diesen Befehl auszuführen und den Astro-Entwicklungsserver zu starten.

npm run dev

pnpm run dev

yarn run dev

Wenn alles gut geht, wird Astro dein Projekt jetzt auf http://localhost:4321/ bereitstellen. Besuche diesen Link in deinem Browser und sieh dir deine neue Seite an!

Arbeit im Entwicklungsmodus

Astro achtet auf Live-Datei-Änderungen in deinem src/-Verzeichnis und aktualisiert deine Website-Vorschau, während du baust, sodass du den Server nicht neu starten musst, wenn du während der Entwicklung Änderungen vornimmst. Du wirst immer eine aktuelle Version deiner Website in deinem Browser sehen können, wenn der Entwicklungsserver läuft.

Wenn du deine Website im Browser anschaust, hast du Zugriff auf die Astro-Entwicklungswerkzeugleiste. Sie hilft dir bei der Erstellung, deine Inseln zu überprüfen, Probleme mit der Barrierefreiheit zu erkennen und vieles mehr.

Wenn du dein Projekt nach dem Starten des Entwicklungsservers nicht im Browser öffnen kannst, gehe zurück zu dem Terminal, in dem du den Befehl dev ausgeführt hast, und überprüfe die angezeigte Meldung. Sie sollte dir sagen, ob ein Fehler aufgetreten ist oder ob dein Projekt unter einer anderen URL als http://localhost:4321/ bereitgestellt wird.

Erstelle deine Website und schaue dir eine Vorschau an

Um die Version deiner Website zu überprüfen, die zur Build-Zeit erstellt wird, beende den Entwicklungsserver (Strg + C) und führe den entsprechenden Build-Befehl für deinen Paketmanager in deinem Terminal aus:

npm run build

pnpm build

yarn run build

Astro erstellt eine einsatzbereite Version deiner Website in einem separaten Ordner (standardmäßig dist/) und du kannst den Fortschritt im Terminal beobachten. So wirst du auf Fehler in deinem Projekt aufmerksam gemacht, bevor du es in die Produktion überführst. Wenn TypeScript auf strict oder strictest konfiguriert ist, prüft das build-Skript dein Projekt auch auf Typfehler.

Wenn der Build abgeschlossen ist, führst du den entsprechenden preview-Befehl (z.B. npm run preview) in deinem Terminal aus und du kannst die gebaute Version deiner Website lokal im gleichen Browser-Vorschaufenster ansehen.

Beachte, dass dies eine Vorschau deines Codes ist, wie er zum Zeitpunkt der letzten Ausführung des Build-Befehls vorlag. Dies soll dir eine Vorschau darauf geben, wie deine Website aussehen wird, wenn sie ins Netz gestellt wird. Spätere Änderungen, die du nach der Erstellung an deinem Code vornimmst, werden nicht in der Vorschau angezeigt, bis du den Build-Befehl erneut ausführst.

Benutze (Strg + C), um die Vorschau zu beenden und einen anderen Terminal-Befehl auszuführen, wie z.B. den Entwicklungsserver neu zu starten, um wieder in den Entwicklungsmodus zu wechseln, der sich während der Bearbeitung aktualisiert und eine Live-Vorschau deiner Code-Änderungen zeigt.

Lies mehr über die Astro CLI (EN) und die Terminalbefehle, die du beim Bauen mit Astro verwenden wirst.

Nächste Schritte

Erfolg! Du bist jetzt bereit, mit Astro zu bauen! 🥳

Hier sind ein paar Dinge, die wir empfehlen, als nächstes zu erforschen. Du kannst sie in beliebiger Reihenfolge lesen. Du kannst unsere Dokumentation auch für eine Weile verlassen und in der Codebasis deines neuen Astro-Projekts spielen und hierher zurückkommen, wenn du Probleme oder Fragen hast.

Konfiguriere deine Entwicklungsumgebung

Erkunde die folgenden Leitfäden, um deine Entwicklungserfahrung anzupassen.

Editor-Einrichtung Passe deinen Code-Editor an, um das Astro-Entwicklererlebnis zu verbessern und neue Funktionen freizuschalten.

Entwicklungswerkzeugleiste Entdecke die hilfreichen Funktionen der Entwicklungswerkzeugleiste.

TypeScript Konfiguration Konfiguriere Optionen für die Typprüfung, IntelliSense und mehr.

Entdecke Astros Funktionen

Verstehe deine Codebasis Erfahre mehr über die Dateistruktur von Astro in unserem Leitfaden zur Projektstruktur.

Inhaltssammlungen erstellen Füge Inhalte zu deiner neuen Website mit Frontmatter-Validierung und automatischer Typensicherheit hinzu.

Ansichtsübergänge hinzufügen Nahtlose Seitenübergänge und Animationen erstellen.

Erfahre mehr über Inseln Lies über die Architektur der Astro-Inseln.

Nimm am Einführungs-Tutorial teil

In unserem Einführungs-Tutorial (EN) erstellst du einen voll funktionsfähigen Astro-Blog, der mit einer einzigen leeren Seite beginnt.

Dies ist ein großartiger Weg, um zu erfahren, wie Astro funktioniert und du lernst die Grundlagen von Seiten, Layouts, Komponenten, Routing, Inseln und mehr kennen. Für diejenigen, die noch keine Erfahrung mit Webentwicklungskonzepten haben, gibt es außerdem eine optionale, einsteigerfreundliche Einheit, die dich durch die Installation der notwendigen Anwendungen auf deinem Computer, die Erstellung eines GitHub-Kontos und die Bereitstellung deiner Website führt.

Wirke mit Community Sponsor