Astro-Kurs 29: Astro Build verstehen

Modul 6 – Veröffentlichen und pflegen · Astro-Anfängerkurs der Know-How-Schmiede

Voraussetzung: Etappe 1 und 2 des Kurses. Das Beispielprojekt „Meine Modellbau-Werkstatt“ wird fortgeführt. Kopiere Code nicht blind über schon vorhandene Seiten, sondern ergänze bestehende Bereiche.

Lernziele

Du unterscheidest Entwicklungsserver, Produktions-Build und Vorschau und weißt, welche Dateien später auf einen statischen Webspace gehören.

1. Die drei Befehle

npm run dev
npm run build
npm run preview

dev startet die Entwicklungsumgebung. build erzeugt bei einem statischen Astro-Projekt den fertigen Stand (standardmäßig dist/). preview zeigt dir den erzeugten Stand lokal.

2. Der typische Ablauf

npm install
npm run build
npm run preview

Falls npm run build einen Fehler meldet, nicht die alten Dateien veröffentlichen: Erst die Fehlermeldung beheben. Häufige Ursachen sind fehlerhafte Imports, fehlende Bilder oder ungültige Frontmatter-Daten.

3. Was befindet sich in dist/?

Bei statischem Rendering liegen dort fertige HTML-Dateien, Stylesheets, Bilder und gegebenenfalls JavaScript-Dateien. Du lädst später den Inhalt dieses Ordners hoch, nicht deine src/-Dateien und nicht node_modules/.

Ein Beispiel:

dist/
├── index.html
├── projekte/
│   └── index.html
├── kontakt/
│   └── index.html
└── _astro/
    └── ...

Die exakte Struktur hängt von deinen Seiten und deiner Konfiguration ab. Für On-Demand-Rendering (SSR) gelten andere Deployment-Regeln; unser Kursprojekt bleibt statisch.

Übung

Baue die Seite, öffne die Vorschau und kontrolliere die Startseite, Blogübersicht, zwei Beiträge und das Menü.