Zum Inhalt springen

Erstelle dein erstes Astro-Projekt

Mach dich bereit, …

  • den create astro Setup-Assistenten auszuführen, um ein neues Astro-Projekt zu erstellen
  • den Astro-Server im Entwicklungsmodus zu starten
  • dir eine Live-Vorschau deiner Website im Browser anzusehen

Starte den Astro-Setup-Assistenten

Die empfohlene Methode, um ein neues Astro-Projekt zu erstellen, ist über unseren create astro Setup-Assistenten.

  1. Führe in der Kommandozeile deines Terminals den folgenden Befehl mit deinem bevorzugten Paketmanager aus:

    # Erstelle ein neues Projekt mit npm
npm create astro@latest

  2. Gib y ein, um create-astro zu installieren.

  3. Wenn du gefragt wirst, wo das Projekt erstellt werden soll, gib den Namen eines Ordners ein, in dem ein neues Verzeichnis für dein Projekt erstellt werden soll, z. B. ./tutorial.

    :::noteEin neues Astro-Projekt kann nur in einem komplett leeren Ordner erstellt werden. Wähle also einen Namen, der noch nicht existiert!:::

  4. Du siehst eine kurze Liste von Starter-Vorlagen. Verwende die Pfeiltasten (hoch und runter), um die minimalistische (leere) Vorlage auszuwählen, und drücke dann Enter (macOS: Return), um deine Wahl zu bestätigen.

  5. Wenn du gefragt wirst, ob die Abhängigkeiten installiert werden sollen, gib y ein.

  6. Wenn du gefragt wirst, ob ein neues Git-Repository initialisiert werden soll, gib y ein.

Wenn der Setup-Assistent abgeschlossen ist, benötigst du dieses Terminal nicht mehr. Du kannst nun VS Code öffnen, um weiterzumachen.

Öffne dein Projekt in VS Code

  1. Öffne VS Code. Du wirst aufgefordert, einen Ordner zu öffnen. Wähle den Ordner, den du während des Setup-Assistenten erstellt hast.

  2. Wenn du ein Astro-Projekt zum ersten Mal öffnest, solltest du eine Benachrichtigung sehen, ob du empfohlene Erweiterungen installieren möchtest. Klicke darauf und wähle die Astro Language Support-Erweiterung. Sie bietet Syntax-Hervorhebung und automatische Vervollständigungen für deinen Astro-Code.

  3. Stelle sicher, dass das Terminal sichtbar ist und dass du die Eingabeaufforderung siehst, z. B.:

    user@machine:~/tutorial$

    :::tip[Tastenkürzel]Um die Sichtbarkeit des Terminals umzuschalten, nutze Strg + J (macOS: Cmd ⌘ + J).:::

Ab jetzt kannst du anstelle des Terminals deines Computers das im VS Code integrierte Terminal für den Rest des Tutorials verwenden.

Astro im Entwicklungsmodus starten

Um deine Projektdateien als Website während der Arbeit zu sehen, muss Astro im Entwicklungsmodus laufen.

Starte den Entwicklungsserver

  1. Starte den Astro-Entwicklungsserver, indem du im VS Code-Terminal folgenden Befehl eingibst:

    npm run dev

    Jetzt solltest du im Terminal die Bestätigung sehen, dass Astro im Entwicklungsmodus läuft. 🚀

Vorschau deiner Website ansehen

Deine Projektdateien enthalten den gesamten Code, um eine Astro-Website darzustellen, aber der Browser zeigt deine Seiten an.

  1. Klicke auf den localhost-Link in deinem Terminal, um eine Live-Vorschau deiner neuen Astro-Website zu sehen!

    (Astro verwendet standardmäßig http://localhost:4321, falls der Port 4321 verfügbar ist.)

    So sollte die Astro-„Empty Project“-Starterseite in der Browser-Vorschau aussehen:

    Eine weiße leere Seite mit dem Wort Astro oben.

:::tip[Astro-Entwicklungsserver verwenden]Solange der Astro-Server im Entwicklungsmodus läuft, kannst du keine Befehle im Terminal ausführen. Stattdessen erhältst du in diesem Bereich Feedback, während du deine Seite ansiehst.

Du kannst den Entwicklungsserver jederzeit stoppen und zur Eingabeaufforderung zurückkehren, indem du Strg + C (macOS: Control + C) im Terminal eingibst.

Manchmal stoppt der Entwicklungsserver während der Arbeit automatisch. Wenn deine Live-Vorschau nicht mehr funktioniert, gehe zurück ins Terminal und starte den Entwicklungsserver erneut mit npm run dev.:::

Checkliste

Ressourcen

Wirke mit Community Sponsor