Astro-Kurs 05: Die Astro-Projektstruktur

Etappe 1 – Grundlagen · Lektion 5 von 11 · Lernziel: Ordner und Dateien eines Astro-Projekts zuordnen.

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

Die wichtigsten Projektdateien

modellbau-webseite/
├── public/                 # Dateien direkt auslieferbar
├── src/
│   └── pages/
│       └── index.astro    # Startseite
├── astro.config.mjs       # Astro-Konfiguration
├── package.json           # Abhängigkeiten und Skripte
└── node_modules/          # installierte Pakete

Je nach Vorlage können weitere Dateien und Ordner vorhanden sein. src/pages/ ist besonders wichtig: Astro erstellt daraus die Seitenadressen. Ordner wie components und layouts können wir später selbst ergänzen.

Was gehört wohin?

public/ eignet sich für statische Dateien, die unverändert über ihre Adresse abrufbar sein sollen. Eine Datei public/bilder/flugzeug.jpg ist im Browser über /bilder/flugzeug.jpg erreichbar. Für Bildoptimierung verwendet Astro später auch Bilder innerhalb von src/.

src/pages/ enthält die Seiten. src/components/ wird für wiederverwendbare Elemente verwendet; src/layouts/ für gemeinsame Seitenrahmen. Beide Ordner legen wir erst bei Bedarf an.

package.json enthält Befehle wie dev, build und preview. In node_modules/ liegen installierte Pakete. Dieser Ordner gehört üblicherweise nicht ins Git-Repository.

Seiten und URLs

Die Dateistruktur steuert das sogenannte dateibasierte Routing. Links innerhalb der Seite verwenden am besten Pfade wie href="/projekte".

Übung

Lege in public/ einen Ordner bilder an. Lege dort ein eigenes JPG-Bild mit dem Namen projekt.jpg ab. Prüfe während npm run dev läuft, ob du es im Browser unter http://localhost:4321/bilder/projekt.jpg aufrufen kannst.

Lösung: Pfad auf der Festplatte public/bilder/projekt.jpg, Browserpfad /bilder/projekt.jpg. Das Wort public steht nicht im Browserpfad.

Ausblick

In den nächsten Lektionen lernen wir die HTML-Elemente kennen, mit denen du den Inhalt deiner Startseite selbst erstellen kannst.

Weitere Informationen: Offizielle Astro-Dokumentation.