Astro-Praxiskurs: Die erste eigene Webseite 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.

Die Modellbau-Werkstatt, Projektbilder und Kontaktadresse sind Übungsbeispiele. Ersetze sie vor einer Veröffentlichung durch eigene Inhalte.

Vom leeren Projekt zur fertigen Webseite – Schritt für Schritt für Anfänger.

In diesem Praxiskurs erstellen wir eine kleine Webseite mit Astro. Du lernst dabei die Grundlagen von HTML, CSS und dem Aufbau eines Astro-Projekts kennen und kannst jeden Schritt selbst in Visual Studio Code ausprobieren.

Als Beispiel dient eine kleine Hobby-Webseite namens „Meine Modellbau-Werkstatt“. Natürlich lässt sich das Vorgehen auch auf eine Vereinswebseite, eine persönliche Homepage oder eine kleine Unternehmensseite übertragen.

1. Was werden wir erstellen?

Unsere Webseite erhält drei Unterseiten:

• Startseite: Begrüßung und Vorstellung der Webseite
• Projekte: Bilder und kurze Beschreibungen unserer Hobbyprojekte
• Kontakt: Eine einfache Kontaktmöglichkeit per E-Mail

Dazu kommen eine gemeinsame Navigation, eine Fußzeile und ein responsives Design für Smartphone, Tablet und Desktop.

Der Ablauf im Überblick

1. Benötigte Programme installieren
2. Astro-Projekt anlegen
3. Webseite lokal starten
4. Projektstruktur verstehen
5. Gemeinsames Layout erstellen
6. Startseite gestalten
7. Projekte-Seite hinzufügen
8. Kontaktseite erstellen
9. Design und Navigation testen
10. Fertige Webseite bauen und veröffentlichen

2. Die benötigten Programme installieren

Du benötigst folgende Programme:

Installiere zunächst eine mit der aktuellen Astro-Version kompatible Node.js-LTS-Version und Visual Studio Code. Die jeweiligen Systemanforderungen findest du in der offiziellen Astro-Dokumentation.

Öffne anschließend in VS Code über Terminal → Neues Terminal das integrierte Terminal und prüfe die Installation:

node --version
npm --version

Beide Befehle sollten eine Versionsnummer ausgeben. Falls nicht, prüfe die Node.js-Installation und starte VS Code erneut.

3. Ein Astro-Projekt erstellen

Starte den offiziellen Astro-Einrichtungsassistenten:

npm create astro@latest

Wähle im Assistenten:

• Als Projektordner: modellbau-webseite
• Eine einfache beziehungsweise leere Vorlage ohne zusätzliche Frameworks
• Die Installation der Abhängigkeiten: Ja

Die Formulierungen und Auswahlmöglichkeiten können sich je nach Astro-Version leicht unterscheiden.

Wechsle anschließend in das Projektverzeichnis und starte den Entwicklungsserver:

cd modellbau-webseite
npm run dev

Im Terminal wird die lokale Adresse ausgegeben, normalerweise:

http://localhost:4321/

Öffne diese Adresse im Browser. Du siehst nun die lokal laufende Astro-Webseite. Solange der Entwicklungsserver läuft, werden gespeicherte Änderungen normalerweise sofort in der Vorschau sichtbar.

Hinweis: localhost bezeichnet deinen eigenen Computer. Andere Menschen im Internet können diese lokale Adresse nicht aufrufen.

4. Die Projektstruktur verstehen

Für unseren Kurs verwenden wir folgende Struktur:

modellbau-webseite/
├── public/
│   └── bilder/
│       ├── modellflug.jpg
│       └── 3d-druck.jpg
├── src/
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       ├── index.astro
│       ├── projekte.astro
│       └── kontakt.astro
├── package.json
└── astro.config.mjs

Nicht alle Ordner und Dateien existieren unmittelbar nach dem Erstellen des Projekts. Fehlende Ordner und Dateien kannst du in VS Code im Datei-Explorer anlegen.

Wichtig: Astro erstellt die Seitenadressen automatisch anhand der Dateien im Ordner src/pages. So entspricht projekte.astro der Adresse /projekte.

5. Ein gemeinsames Layout erstellen

Ein Layout ist eine Vorlage, die wir auf mehreren Seiten verwenden. Wir definieren hier die Navigation, die Grundfarben und die Fußzeile. Änderungen am Layout wirken sich dadurch auf alle Seiten aus.

Erstelle die Datei src/layouts/Layout.astro mit folgendem Inhalt:

---
const { title = "Meine Modellbau-Werkstatt" } = 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>
      <div class="container">
        <h2>Meine Modellbau-Werkstatt</h2>

        <nav aria-label="Hauptnavigation">
          <a href="/">Startseite</a>
          <a href="/projekte">Projekte</a>
          <a href="/kontakt">Kontakt</a>
        </nav>
      </div>
    </header>

    <main class="container">
      <slot />
    </main>

    <footer>
      <p>Meine Modellbau-Werkstatt</p>
    </footer>
  </body>
</html>

<style is:global>
  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #243447;
    background: #f4f6f8;
    line-height: 1.6;
  }

  .container {
    max-width: 1000px;
    margin: auto;
    padding: 20px;
  }

  header {
    background: #183247;
    color: white;
  }

  header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  nav {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  nav a {
    color: white;
    text-decoration: none;
  }

  nav a:hover {
    text-decoration: underline;
  }

  main {
    min-height: 65vh;
  }

  footer {
    background: #183247;
    color: white;
    text-align: center;
    padding: 20px;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  @media (max-width: 600px) {
    header .container {
      flex-direction: column;
      align-items: flex-start;
    }
  }
</style>

Was passiert im Layout?

• Der Abschnitt zwischen den beiden ----Zeilen enthält Astro-Code, der beim Erstellen der Seite ausgeführt wird.
• Der Wert title ist ein Parameter, über den jede Seite ihren eigenen Seitentitel angeben kann.
• HTML-Elemente wie <header>, <nav> und <footer> strukturieren die Webseite.
• Der Platzhalter <slot /> gibt an, wo der Inhalt der jeweiligen Unterseite eingefügt wird.
• Der CSS-Block legt Farben, Abstände und das Verhalten auf kleinen Bildschirmen fest. Mit is:global gelten diese Regeln für die gesamte Seite.

6. Die Startseite erstellen

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

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

<Layout title="Startseite | Modellbau-Werkstatt">
  <section class="hero">
    <h1>Willkommen in meiner Werkstatt!</h1>

    <p>
      Hier findest du meine Projekte rund um
      Modellbau, Elektronik und 3D-Druck.
    </p>

    <a class="button" href="/projekte">
      Projekte ansehen
    </a>
  </section>

  <h2>Über diese Webseite</h2>

  <p>
    Ich interessiere mich für Technik und
    entwickle gerne eigene Projekte.
    Auf dieser Webseite stelle ich einige
    meiner Arbeiten vor.
  </p>
</Layout>

<style>
  .hero {
    background: #dfeef7;
    padding: 40px 25px;
    border-radius: 12px;
    margin: 25px 0;
  }

  .button {
    display: inline-block;
    padding: 12px 20px;
    background: #147bb8;
    color: white;
    text-decoration: none;
    border-radius: 6px;
  }

  .button:hover {
    background: #105d8b;
  }
</style>

In der ersten Zeile importieren wir das zuvor angelegte Layout. Anschließend übergeben wir der Vorlage den Titel und platzieren den Inhalt dazwischen.

Probiere es aus: Ändere die Überschrift in index.astro, speichere die Datei und beobachte die Änderung im Browser.

7. Die Projekte-Seite hinzufügen

Erstelle src/pages/projekte.astro:

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

<Layout title="Projekte | Modellbau-Werkstatt">
  <h1>Meine Projekte</h1>

  <p>
    Hier stelle ich einige meiner
    technischen Projekte vor.
  </p>

  <section class="projekte">
    <article>
      <img
        src="/bilder/modellflug.jpg"
        alt="Mein Modellflugzeug"
      />
      <h2>Modellflug</h2>
      <p>
        Entwicklung und Bau eigener
        Flugmodelle.
      </p>
    </article>

    <article>
      <img
        src="/bilder/3d-druck.jpg"
        alt="Mein 3D-Drucker"
      />
      <h2>3D-Druck</h2>
      <p>
        Konstruktion und Herstellung
        eigener Bauteile.
      </p>
    </article>
  </section>
</Layout>

<style>
  .projekte {
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, 280px), 1fr)
    );
    gap: 25px;
    margin: 25px 0;
  }

  article {
    background: white;
    padding: 20px;
    border-radius: 12px;
  }

  article img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
  }
</style>

Eigene Bilder hinzufügen

1. Erstelle den Ordner public/bilder, falls er noch nicht existiert.
2. Kopiere zwei geeignete Bilder in diesen Ordner.
3. Benenne sie exakt modellflug.jpg und 3d-druck.jpg – oder passe die Dateinamen im Code entsprechend an.
4. Achte darauf, dass du die Bilder verwenden und veröffentlichen darfst.

Warum beginnt der Bildpfad mit /bilder/ und nicht mit /public/bilder/? Dateien im Ordner public werden von Astro im Stammverzeichnis der Webseite bereitgestellt.

Die CSS-Eigenschaft display: grid legt ein Raster an. Mit auto-fit und minmax(...) passen sich die Projektkarten automatisch an die vorhandene Bildschirmbreite an.

8. Die Kontaktseite erstellen

Erstelle die Datei src/pages/kontakt.astro:

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

<Layout title="Kontakt | Modellbau-Werkstatt">
  <h1>Kontakt</h1>

  <p>
    Du hast Fragen zu meinen Projekten
    oder möchtest dich austauschen?
  </p>

  <p>Schreibe mir eine E-Mail:</p>

  <a href="mailto:kontakt@example.com">
    kontakt@example.com
  </a>
</Layout>

Ersetze kontakt@example.com durch deine eigene Kontaktadresse. Für das Einsteigerprojekt benötigen wir kein serverseitiges Kontaktformular.

Vor der öffentlichen Veröffentlichung: Für eine reale Webseite in Deutschland können unter anderem ein Impressum und eine Datenschutzerklärung erforderlich sein. Prüfe, was für deinen konkreten Webauftritt gilt. Die hier gezeigte Kontaktseite ist nur eine Übung.

9. Die Webseite testen

Falls der Entwicklungsserver nicht mehr läuft, starte ihn im Projektverzeichnis erneut:

npm run dev

Teste anschließend diese Adressen:

Kontrolliere zusätzlich folgende Punkte:

• Funktionieren alle drei Links in der Navigation?
• Wird der Knopf „Projekte ansehen“ korrekt verlinkt?
• Werden die beiden Projektbilder geladen?
• Sind Texte und Abstände gut lesbar?
• Funktioniert das Menü auch auf einem schmalen Browserfenster?

Tipp: Mit den Entwicklertools deines Browsers kannst du eine Smartphone-Ansicht simulieren. In vielen Browsern öffnest du die Entwicklertools mit F12.

Kleine Übungen

1. Ändere die Hintergrundfarbe des Kopfbereichs.
2. Tausche die Beispieltexte gegen eine eigene Vorstellung aus.
3. Erstelle eine dritte Projektkarte, zum Beispiel für Elektronik.
4. Ändere den Seitentitel der Kontaktseite.
5. Ergänze einen weiteren Navigationslink und eine dazu passende .astro-Datei.

10. Die fertige Webseite erstellen

Während der Entwicklung verwendet Astro einen lokalen Entwicklungsserver. Für die Veröffentlichung benötigen wir die fertig erzeugten Dateien.

Öffne ein Terminal im Projektordner. Du kannst den laufenden Entwicklungsserver gegebenenfalls mit Strg + C beenden.

Erstelle die Produktionsversion:

npm run build

Astro erzeugt bei einer statischen Standardkonfiguration den Ordner dist. Dieser enthält die fertigen HTML-, CSS- und anderen benötigten Dateien.

Prüfe die erstellte Version lokal mit:

npm run preview

Öffne die im Terminal angezeigte Adresse und kontrolliere erneut alle Seiten.

Veröffentlichung auf Webspace

Für dieses einfache statische Projekt genügt gewöhnlicher Webspace, beispielsweise bei Hostinger:

1. Stelle sicher, dass npm run build ohne Fehler abgeschlossen wurde.
2. Verbinde dich über die Hosting-Oberfläche oder SFTP mit deinem Webspace.
3. Lade den Inhalt von dist in das richtige Webverzeichnis hoch, häufig public_html.
4. Rufe deine Domain auf und prüfe Navigation, Bilder und Unterseiten.

Für die hier erstellte statische Webseite ist auf dem Webspace weder eine Datenbank noch ein dauerhaft laufender Node.js-Server erforderlich.

Für spätere Projekte kannst du auch ein automatisches Deployment über GitHub Actions einrichten. Zugangsdaten gehören dabei in geschützte Secrets, niemals direkt in das Repository.

11. Häufige Probleme und Lösungen

12. Was solltest du gelernt haben?

Mit diesem Kurs kannst du bereits die wichtigsten Grundlagen der Astro-Entwicklung anwenden:

• Ein Astro-Projekt anlegen
• Den Entwicklungsserver starten
• Neue Seiten als .astro-Dateien erstellen
• Eine gemeinsame Vorlage mit <slot /> verwenden
• Texte und Farben mit HTML und CSS verändern
• Bilder aus dem public-Ordner einbinden
• Eine responsive Projektübersicht gestalten
• Die Webseite für die Veröffentlichung bauen

13. Wie geht es weiter?

Deine erste Webseite ist fertig. Die nächsten sinnvollen Erweiterungen wären:

• Ein eigenes Logo und ein individuelles Farbschema
• Wiederverwendbare Astro-Komponenten für Projektkarten
• Blogbeiträge mit Markdown und Content Collections
• Mehrere Layouts für verschiedene Inhaltstypen
• Veröffentlichung und Versionsverwaltung mit GitHub
• Unterstützung bei der Entwicklung mit VS Code und Codex

In der Know-How-Schmiede lassen sich daraus weitere praktische Projekte entwickeln – etwa eine persönliche Projektgalerie, eine Dokumentationswebseite oder ein Blog für 3D-Druck und Modellbau.

Weiterführende Links

• Astro – Offizielle Webseite
• Astro – Dokumentation auf Deutsch
• Astro – Installation und Einrichtung
• Astro – Offizielles Tutorial
• Visual Studio Code
• Node.js

Fazit: Mit wenigen Dateien hast du eine erste vollständige Astro-Webseite erstellt. Das gemeinsame Layout sorgt für einen einheitlichen Aufbau, einzelne .astro-Dateien bilden die Unterseiten, und CSS übernimmt das Design. Darauf kannst du Schritt für Schritt aufbauen.

Passender nächster Schritt

Die Astro-Grundlagen kennenlernen