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

Abschnitt betitelt „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:

    Terminal-Fenster
    # 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.

  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

Abschnitt betitelt „Ö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.:

    Terminal-Fenster
    user@machine:~/tutorial$

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

Abschnitt betitelt „Astro im Entwicklungsmodus starten“

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

Starte den Entwicklungsserver

Abschnitt betitelt „Starte den Entwicklungsserver“

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

    Terminal-Fenster
    npm run dev

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

Vorschau deiner Website ansehen

Abschnitt betitelt „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.

Checkliste

Abschnitt betitelt „Checkliste“

Ressourcen

Abschnitt betitelt „Ressourcen“
Wirke mit Community Sponsor