Astro-Kurs 04: Das erste Astro-Projekt

Etappe 1 – Grundlagen · Lektion 4 von 11 · Lernziel: Ein Astro-Projekt erstellen und im Browser öffnen.

Voraussetzung: Grundlagen aus Lektion 3; arbeite im selben Projekt modellbau-webseite.

Ein neues Projekt anlegen

Öffne ein Terminal in deinem übergeordneten Arbeitsordner. Starte den offiziellen Einrichtungsassistenten:

npm create astro@latest

Bestätige die Rückfragen. Gib als Projektordner modellbau-webseite an. Wähle eine leere beziehungsweise minimale Vorlage, installiere die Abhängigkeiten und verwende zunächst keine zusätzlichen Integrationen. Die genaue Formulierung der Assistentenfragen kann sich mit Astro-Versionen verändern.

Projekt öffnen und starten

cd modellbau-webseite
npm run dev

Im Terminal erscheint die Adresse des Entwicklungsservers, gewöhnlich http://localhost:4321/. Öffne sie im Browser. Sollte der Port belegt sein, zeigt Astro eventuell eine andere Nummer an – verwende dann genau die angezeigte Adresse.

Die erste Änderung

Öffne src/pages/index.astro. Ersetze den Inhalt mit:

---
const begruessung = 'Willkommen in meiner Modellbau-Werkstatt';
---

<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Meine Modellbau-Werkstatt</title>
  </head>
  <body>
    <h1>{begruessung}</h1>
    <p>Meine erste Webseite mit Astro!</p>
  </body>
</html>

Die drei Striche leiten in einer .astro-Datei den Frontmatter-Bereich für JavaScript ein. {begruessung} setzt den Wert der Variablen in den HTML-Inhalt ein.

Live-Vorschau

Speichere die Datei. Der Browser sollte die Änderung automatisch anzeigen. Zum Beenden drückst du im Terminal Strg+C. Beim nächsten Mal startest du die Vorschau im Projektordner wieder mit npm run dev.

Übung

Ergänze eine zweite Überschrift <h2>Meine Interessen</h2> und eine Liste mit drei Hobbys. Verwende dafür <ul> und <li>.

Lösungshinweis: Siehe Lektion 06; du kannst vorerst auch einen weiteren <p>-Absatz einfügen.

Fehlerbehebung

Fehlt das src/pages-Verzeichnis, prüfe, ob du das richtige Projekt geöffnet hast. Bei Paketfehlern im Projektordner npm install ausführen. Die ----Trennlinien dürfen nicht vergessen werden, wenn du Variablen im Frontmatter verwendest.

Weitere Informationen: Offizielle Astro-Dokumentation.