Astro für Anfänger – Moderne Webseiten einfach erstellen

Voraussetzungen und Lernziel

Du brauchst grundlegende Computerkenntnisse, einen Browser und einen Editor. HTML- und CSS-Vorkenntnisse sind hilfreich. Ziel ist eine statische Astro-Webseite mit wiederverwendbaren Bausteinen. Die Beispiele sind keiner bestimmten Astro-Version zugeordnet und wurden für diesen Beitrag nicht als eigenständiges Projekt ausgeführt. Beachte bei der Installation die verlinkten offiziellen Systemanforderungen.

Mit Astro kannst du moderne, schnelle und responsive Webseiten erstellen. Das Webframework eignet sich besonders für Blogs, Tutorials, Dokumentationen, Unternehmenswebseiten und Wissensplattformen.

Ein Vorteil: Für eine statische Astro-Webseite brauchst du auf dem Webspace normalerweise weder eine Datenbank noch eine laufende Serveranwendung.

In diesem Beitrag lernst du die Grundlagen kennen und erstellst deine erste eigene Astro-Webseite.

1. Was ist Astro?

Astro ist ein Webframework. Es stellt eine Projektstruktur und Werkzeuge bereit, mit denen du Webseiten entwickeln und aus einzelnen Bausteinen zusammensetzen kannst.

Stell dir vor, du baust ein Haus:

• HTML ist die Konstruktion und gibt der Seite ihre Struktur.
• CSS bestimmt Farben, Schriftarten und das Layout.
• JavaScript ermöglicht interaktive Funktionen.
• Astro organisiert diese Bausteine und erzeugt daraus die fertige Webseite.

Bei einer klassischen HTML-Webseite schreibst du jede Seite meist einzeln. Mit Astro kannst du Komponenten und Vorlagen wiederverwenden.

Der typische Ablauf lautet:

Quelldateien (Astro, HTML, CSS, Markdown, Bilder)
                     |
                     v
                Astro Build
                     |
                     v
Fertige Webseite (HTML, CSS, Bilder, ggf. JavaScript)
                     |
                     v
          Veröffentlichung im Internet

2. Welche Vorteile bietet Astro?

Astro ist damit besonders interessant für eine Wissenswebseite mit vielen Anleitungen und Tutorials.

3. Astro im Vergleich zu WordPress und Joomla

WordPress und Joomla sind Content-Management-Systeme (CMS). Astro ist dagegen in erster Linie ein Framework für die Webentwicklung.

Wichtig: Astro ist kein klassischer Homepage-Baukasten. Du arbeitest mit Dateien und Quellcode. Dafür hast du viel Kontrolle über Aufbau, Aussehen und Funktion der Webseite.

4. Welche Programme benötigst du?

Visual Studio Code

In Visual Studio Code (VS Code) bearbeitest du die Dateien deiner Webseite. Das Programm bietet einen Dateiexplorer, Syntaxhervorhebung, Erweiterungen und ein integriertes Terminal.

• Download: https://code.visualstudio.com/
• Empfehlung: Installiere die offizielle Astro-Erweiterung für VS Code.

Node.js und npm

Node.js wird benötigt, um die Astro-Entwicklungswerkzeuge lokal auszuführen. npm verwaltet die benötigten Pakete.

• Download: https://nodejs.org/

Verwende eine von der aktuellen Astro-Version unterstützte Node.js-Version. Die geltenden Voraussetzungen stehen in der offiziellen Dokumentation.

Git und GitHub Desktop (optional)

Mit Git verwaltest du die Versionsgeschichte. GitHub Desktop bietet eine grafische Oberfläche für Git und erleichtert die Zusammenarbeit mit GitHub.

• Download: https://desktop.github.com/

5. Erste Astro-Webseite erstellen

Schritt 1: Neues Projekt anlegen

Öffne VS Code und starte über Terminal → Neues Terminal die Kommandozeile.

npm create astro@latest

Der Einrichtungsassistent führt dich durch die Installation. Wähle beispielsweise den Projektnamen meine-webseite und eine einfache Startvorlage. Bestätige bei Bedarf auch die Installation der Abhängigkeiten.

Schritt 2: Entwicklungsserver starten

Wechsle in dein Projektverzeichnis:

cd meine-webseite
npm run dev

Astro zeigt im Terminal normalerweise diese Adresse an:

http://localhost:4321

Öffne sie im Browser auf deinem Entwicklungsrechner.

Praktisch: Wenn du eine Datei änderst und speicherst, aktualisiert sich die Vorschau in der Regel automatisch.

Schritt 3: Erste eigene Seite schreiben

Öffne src/pages/index.astro und ersetze den vorhandenen Inhalt durch:

---
const titel = "Meine erste Astro-Webseite";
---

<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{titel}</title>
  </head>
  <body>
    <main>
      <h1>{titel}</h1>
      <p>Willkommen auf meiner ersten Webseite!</p>
      <p>Diese Seite wurde mit Astro erstellt.</p>
    </main>
  </body>
</html>

<style>
  body {
    font-family: Arial, sans-serif;
    background: #f4f6f8;
    color: #243447;
    margin: 0;
    padding: 40px;
  }

  main {
    max-width: 800px;
    margin: auto;
  }

  h1 {
    color: #147bb8;
  }
</style>

Was passiert hier?

• Der Bereich zwischen --- enthält JavaScript, das Astro während der Seitenerstellung ausführen kann.
• {titel} fügt den Wert der Variablen in die Webseite ein.
• HTML definiert den Seiteninhalt.
• Der <style>-Block gestaltet die Seite.

Damit hast du bereits eine funktionsfähige Astro-Seite erstellt.

6. Aufbau eines Astro-Projekts

Ein typisches Projekt kann so aussehen:

meine-webseite/
├── public/               # Statische Dateien
├── src/
│   ├── components/       # Wiederverwendbare Bausteine
│   ├── layouts/          # Seitenvorlagen
│   ├── pages/            # Einzelne Webseiten
│   └── styles/           # Optionale zentrale CSS-Dateien
├── astro.config.mjs      # Astro-Konfiguration
└── package.json          # Abhängigkeiten und Befehle

Nicht jeder Ordner wird bei jeder Startvorlage automatisch angelegt. Du kannst fehlende Ordner bei Bedarf selbst erstellen.

Wie entstehen Seitenadressen?

Astro verwendet dateibasiertes Routing: Die Dateipfade unter src/pages bestimmen die Adressen der Seiten.

Du musst dafür keine eigene Routing-Logik programmieren.

7. Komponenten – Wiederverwendbare Bausteine

Stell dir eine Webseite mit 100 Unterseiten vor. Auf allen Seiten sollen dasselbe Menü und derselbe Kopfbereich erscheinen.

Anstatt diese Elemente 100-mal zu schreiben, erstellst du Komponenten.

Beispiel für src/components/Header.astro:

<header>
  <h2>Meine Webseite</h2>

  <nav>
    <a href="/">Startseite</a>
    <a href="/wissen">Wissen</a>
    <a href="/kontakt">Kontakt</a>
  </nav>
</header>

So bindest du den Baustein in einer Seite ein:

---
import Header from "../components/Header.astro";
---

<Header />

<h1>Willkommen!</h1>
<p>Das ist meine Startseite.</p>

Vorteil: Änderst du später den Kopfbereich, brauchst du nur die Komponente zu bearbeiten. Die Änderung wird überall übernommen, wo sie verwendet wird.

8. Layouts – Einheitliches Design für alle Seiten

Ein Layout bildet das gemeinsame Grundgerüst deiner Webseite. Es kann enthalten:

• Den HTML-Grundaufbau
• Navigation und Kopfbereich
• Einen Bereich für den individuellen Seiteninhalt
• Die Fußzeile
• Gemeinsame Schriftarten und Gestaltung

Beispiel für src/layouts/BaseLayout.astro:

---
const { title = "Meine Webseite" } = Astro.props;
---

<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
  </head>
  <body>
    <header><a href="/">Meine Webseite</a></header>
    <main><slot /></main>
    <footer>© Meine Webseite</footer>
  </body>
</html>

Das Layout kann dann beispielsweise so verwendet werden:

---
import BaseLayout from "../layouts/BaseLayout.astro";
---

<BaseLayout title="Über mich">
  <h1>Über mich</h1>
  <p>Hier stelle ich mich vor.</p>
</BaseLayout>

Die Stelle <slot /> wird durch den Inhalt ersetzt, der zwischen den Layout-Tags steht.

9. Markdown – Ideal für Tutorials und Blogbeiträge

Markdown ist eine einfache Auszeichnungssprache für strukturierte Texte. Du schreibst beispielsweise # für eine Hauptüberschrift und ## für eine Unterüberschrift.

Ein Beispiel:

---
title: "Einführung in Python"
description: "Python für Anfänger erklärt"
---

# Python für Anfänger

Python ist eine Programmiersprache.

## Was benötige ich?

- Einen Computer
- Python
- Visual Studio Code

## Erstes Programm

```python
print("Hallo Welt!")
```

Astro kann Markdown-Dateien als Seiten oder als Inhalte einer Content Collection verarbeiten. Bei größeren Webseiten sind Content Collections besonders nützlich, da du damit Inhalte strukturiert sammeln, typisieren und über eigene Seitenvorlagen ausgeben kannst.

Eine mögliche Inhaltsstruktur lautet:

src/
└── content/
    └── wissen/
        ├── python-einfuehrung.md
        ├── astro-grundlagen.md
        ├── fusion360-skizzen.md
        └── openscad-einsteiger.md

Hinweis: Dies ist ein mögliches Organisationsbeispiel. Für eine funktionierende Content Collection benötigst du zusätzlich eine passende Konfiguration sowie Seiten, welche die Beiträge ausgeben. Die genaue Einrichtung richtet sich nach der eingesetzten Astro-Version.

Der wichtige Gedanke ist: Inhalte und Layout werden getrennt. Ein Tutorial kannst du ändern, ohne das komplette Design bearbeiten zu müssen.

10. Kann Astro auch interaktive Webseiten erstellen?

Ja! Astro ist besonders für inhaltsorientierte Webseiten geeignet, unterstützt aber auch interaktive Funktionen wie:

• Rechner und Konfiguratoren
• Suchfunktionen
• Bildergalerien
• Diagramme
• Formulare und andere Bedienelemente

Ein wichtiges Konzept heißt Islands Architecture. Dabei wird JavaScript im Browser gezielt nur für diejenigen Bereiche geladen, die es tatsächlich benötigen. Rein statische Teile der Seite bleiben davon unabhängig.

Für komplexere interaktive Komponenten kannst du bei Bedarf beispielsweise React oder Vue verwenden.

11. Webseite erstellen und veröffentlichen

Während der Entwicklung läuft deine Webseite lokal. Für die Veröffentlichung erzeugst du bei einem statischen Astro-Projekt die fertigen Dateien mit:

npm run build

Standardmäßig entsteht dabei ein Ordner namens dist:

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

Wichtig: Das ist eine beispielhafte Ausgabe. Die tatsächlich erzeugten Dateien hängen von deinem Projekt und seinen Routen ab.

Den Inhalt des Ausgabeordners kannst du bei statischem Hosting auf deinen Webspace übertragen, beispielsweise zu Hostinger in das passende Webverzeichnis wie public_html.

Automatische Veröffentlichung mit GitHub

Eine häufig verwendete Lösung ist:

1. Du bearbeitest deine Webseite in VS Code.
2. Du speicherst deine Änderungen mit Git.
3. Mit GitHub Desktop überträgst du sie auf GitHub.
4. GitHub Actions führt den Build aus.
5. Die fertigen Dateien werden zum Hosting-Anbieter übertragen.

Zugangsdaten für FTP, SFTP oder andere Deployment-Verfahren gehören nicht in das Repository. Bewahre sie stattdessen als sicher verwaltete Secrets auf.

12. Astro und KI: Webseiten mit Codex entwickeln

Astro lässt sich gut mit einem KI-Programmierassistenten wie Codex kombinieren. Ein solcher Assistent kann beispielsweise:

• Komponenten erstellen oder anpassen
• Ein responsives Layout entwerfen
• Navigationen und Seitenstrukturen aufbauen
• Markdown-Beiträge einbinden
• Fehler suchen und Tests ergänzen

Ein möglicher Arbeitsauftrag lautet:

Erstelle eine moderne, responsive Astro-Webseite für eine Wissensplattform. Verwende ein gemeinsames Layout mit Kopfbereich, Navigation und Fußzeile. Die Webseite soll eine Startseite, eine Wissensübersicht und einzelne Markdown-Beiträge besitzen. Verwende wiederverwendbare Astro-Komponenten und achte auf gute Lesbarkeit auf Smartphone, Tablet und Desktop.

Wichtig: Auch KI-generierten Code solltest du lesen, lokal testen und die Änderungen vor der Veröffentlichung prüfen.

13. Was solltest du zuerst lernen?

Eine sinnvolle Reihenfolge für Anfänger ist:

1. HTML-Grundlagen: Überschriften, Absätze, Links und Bilder
2. CSS-Grundlagen: Farben, Schriftarten, Abstände und Layout
3. Astro-Seiten: Neue Seiten und Adressen erstellen
4. Komponenten: Wiederverwendbare Bausteine entwickeln
5. Layouts: Gemeinsame Seitenvorlagen nutzen
6. Markdown und Content Collections: Beiträge organisieren
7. Responsive Design: Darstellung für Mobilgeräte verbessern
8. Build und Deployment: Die Webseite veröffentlichen
9. JavaScript: Gezielte Interaktivität ergänzen

Du musst nicht sofort alles beherrschen. Beginne mit einer kleinen Webseite und erweitere sie Schritt für Schritt.

14. Vorlagen und weiterführende Informationen

Wenn du nicht bei null anfangen möchtest, kannst du vorhandene Astro-Vorlagen ausprobieren.

• Offizielle Astro-Themes: https://astro.build/themes/
• AstroWind: https://github.com/onwidget/astrowind
• Astro Starlight (Dokumentationen): https://starlight.astro.build/
• Offizielle Astro-Dokumentation: https://docs.astro.build/de/getting-started/

Die Beispiele in diesem Beitrag bilden die Grundprinzipien ab. Bei der Installation oder bei Content Collections solltest du zusätzlich die Dokumentation deiner verwendeten Astro-Version beachten.

Fazit

Astro ist eine gute Wahl für alle, die moderne, schnelle und gut strukturierte Webseiten erstellen möchten. Besonders interessant ist die Kombination aus Astro, Markdown, VS Code, GitHub und Codex.

Empfohlenes Einstiegsprojekt: Erstelle eine kleine Wissenswebseite mit einer Startseite, drei Markdown-Beiträgen, einer gemeinsamen Navigation und einem responsiven Layout. An diesem überschaubaren Projekt lernst du die wichtigsten Astro-Grundlagen praktisch kennen.

Passender nächster Schritt

Weiter zum Praxiskurs