Etappe 1 – Grundlagen · Lektion 1 von 11 · Lernziel: Astro, statische Webseiten und Einsatzgebiete verstehen.
Voraussetzung: Keine Vorkenntnisse.
Die Modellbau-Werkstatt ist ein Übungsbeispiel. Verwende vor einer eigenen Veröffentlichung deine eigenen Inhalte, Bilder und Kontaktdaten.
Was bauen wir im Kurs?
Wir entwickeln schrittweise die Website „Meine Modellbau-Werkstatt“. Am Ende dieser Etappe hat sie eine Startseite, Projektübersicht und Kontaktseite, einschließlich einer einfachen Darstellung für Smartphones.
Eine Webseite ist zunächst eine Sammlung von Dateien
Wenn du index.html in einem Browser öffnest, stellt der Browser die darin beschriebenen Inhalte dar. Mit HTML beschreibst du die Struktur, mit CSS gestaltest du das Aussehen. JavaScript ermöglicht Interaktionen. Diese drei Technologien sind keine Konkurrenz zu Astro: Astro verwendet sie.
Was macht Astro zusätzlich?
Ein Webframework stellt Regeln und Werkzeuge für die Entwicklung bereit. Astro bietet unter anderem:
- Seiten aus Dateien:
src/pages/index.astrosteht für die Startseite. - Wiederverwendbare Bausteine: beispielsweise ein Menü, das auf allen Seiten gleich aussieht.
- Automatische Erstellung: Aus dem Projekt entstehen veröffentlichbare HTML-, CSS- und gegebenenfalls JavaScript-Dateien.
- Wenig Browser-JavaScript: Normale Informationsseiten brauchen oft keinen JavaScript-Code im Browser.
Eine mit Astro erstellte statische Seite braucht am Zielserver normalerweise weder eine Datenbank noch einen laufenden Node.js-Dienst. Das gilt allerdings nicht automatisch für später ergänzte serverseitige Funktionen.
Astro oder WordPress?
Ein Content-Management-System wie WordPress liefert normalerweise eine browserbasierte Redaktionsoberfläche. Astro ist primär ein Entwicklungswerkzeug: Du bearbeitest Dateien in einem Editor. Für einen Lernkurs mit vollständiger Kontrolle über Layout und Quellcode ist das ideal; für Teams mit vielen Redakteuren kann ein CMS geeigneter sein.
Begriffe zum Merken
Framework: Werkzeuge und Konventionen für ein Softwareprojekt. Build: Vorgang, bei dem Astro fertige Website-Dateien erzeugt. Statisch: HTML wird vor dem Aufruf der Webseite erstellt. Responsive: Gestaltung passt sich unterschiedlichen Bildschirmbreiten an.
Kleine Übung
Schreibe auf, welche drei Unterseiten du für eine eigene Hobby- oder Vereinswebseite benötigen würdest. Überlege bei jeder Seite, welche Inhalte wiederholt vorkommen, etwa Logo und Navigation.
Musterlösung: Startseite, Projekte, Kontakt. Das gemeinsame Menü und die Fußzeile sollten später nur einmal definiert werden.
Häufige Frage
Muss ich für Astro React lernen? Nein. HTML, CSS und grundlegende JavaScript-Kenntnisse genügen für viele Webseiten. React ist optional.
Weitere Informationen: Offizielle Astro-Dokumentation.