Erstelle deine erste Astro-Seite

Jetzt, da du weißt, dass .astro-Dateien für die Seiten deiner Website verantwortlich sind, ist es an der Zeit, eine zu erstellen!

Mach dich bereit, …

zwei neue Seiten auf deiner Website zu erstellen: About und Blog
Navigationslinks zu deinen Seiten hinzuzufügen
eine aktualisierte Version deiner Website im Web zu veröffentlichen

Eine neue `.astro`-Datei erstellen

Navigiere im Dateibereich deines Code-Editors zum Ordner src/pages/, in dem du die vorhandene Datei index.astro siehst.
Erstelle im selben Ordner eine neue Datei mit dem Namen about.astro.
Kopiere oder schreibe den Inhalt von index.astro in deine neue Datei about.astro.

Dein Editor zeigt möglicherweise einen ausgefüllten weißen Kreis auf dem Tab der Datei an. Das bedeutet, dass die Datei noch nicht gespeichert wurde. Aktiviere im Menü „Datei“ in VS Code die Option Auto Save, damit du deine Dateien nicht mehr manuell speichern musst.
Füge am Ende der URL in der Adressleiste deines Website-Vorschaufensters /about hinzu und überprüfe, ob dort eine Seite geladen wird (z. B. http://localhost:4321/about).

Im Moment sollte deine „Über mich“-Seite genau wie deine Startseite aussehen, aber das werden wir gleich ändern!

Bearbeite deine Seite

Bearbeite den HTML-Inhalt, um diese Seite über dich zu gestalten.

Um den Inhalt deiner About-Seite zu ändern oder zu erweitern, füge weitere HTML-Element-Tags mit Inhalt hinzu. Du kannst den folgenden HTML-Code zwischen die vorhandenen <body></body>-Tags einfügen oder deinen eigenen erstellen:

<body>
  <h1>Meine Astro-Seite</h1>
  <h1>Über mich</h1>
  <h2>… und meine neue Astro-Seite!</h2>

  <p>Ich arbeite mich durch das einführende Astro-Tutorial. Dies ist die zweite Seite meiner Website und die erste, die ich selbst erstellt habe!</p>

  <p>Diese Website wird aktualisiert, während ich mehr vom Tutorial abschließe – schau also regelmäßig vorbei, um zu sehen, wie meine Reise verläuft!</p>
</body>

Besuche jetzt erneut deine /about-Seite in deinem Browser-Tab, und du solltest die aktualisierten Inhalte sehen.

Navigationslinks hinzufügen

Um das Vorschauen aller Seiten zu erleichtern, füge HTML-Seitennavigationslinks vor deinem <h1> oben auf beiden Seiten (index.astro und about.astro) hinzu:

<a href="/">Startseite</a>
<a href="/about/">Über mich</a>

<h1>Über mich</h1>
<h2>… und meine neue Astro-Seite!</h2>

Überprüfe, ob du diese Links anklicken kannst, um zwischen den Seiten deiner Website zu wechseln.

Probiere es selbst – Füge eine Blog-Seite hinzu

Füge eine dritte Seite blog.astro zu deiner Website hinzu, indem du die gleichen Schritte wie oben befolgst.

(Vergiss nicht, auf jeder Seite einen dritten Navigationslink hinzuzufügen.)

Zeige mir die Schritte.

Erstelle eine neue Datei unter src/pages/blog.astro.
Kopiere den gesamten Inhalt von index.astro in blog.astro.
Füge einen dritten Navigationslink oben auf jeder Seite hinzu:

<body>
  <a href="/">Startseite</a>
  <a href="/about/">Über mich</a>
  <a href="/blog/">Blog</a>

  <h1>Meine Astro-Seite</h1>
</body>

Du solltest nun eine Website mit drei Seiten haben, die alle miteinander verlinkt sind. Jetzt ist es an der Zeit, Inhalte für die Blog-Seite hinzuzufügen.

Aktualisiere den Seiteninhalt in blog.astro wie folgt:

<body>
  <a href="/">Startseite</a>
  <a href="/about/">Über mich</a>
  <a href="/blog/">Blog</a>

  <h1>Meine Astro-Seite</h1>
  <h1>Mein Astro-Lernblog</h1>
  <p>Hier werde ich über meine Reise beim Lernen von Astro schreiben.</p>
</body>

Vorschau deiner gesamten Website, indem du alle drei Seiten in der Browser-Vorschau besuchst, und prüfe:

Jede Seite verlinkt korrekt zu allen drei Seiten
Deine beiden neuen Seiten haben jeweils eine aussagekräftige Überschrift
Deine beiden neuen Seiten haben jeweils eigenen Absatztext

Änderungen im Web veröffentlichen

Wenn du unserem Setup in Lektion 1 gefolgt bist, kannst du deine Änderungen über Netlify auf deiner Live-Website veröffentlichen.

Wenn du mit der Vorschau zufrieden bist, committe deine Änderungen in dein Online-Repository bei GitHub.

Vorschau der Dateien in VS Code, die seit deinem letzten Commit zu GitHub geändert wurden.
- Gehe zum Quellcode-Kontroll-Tab im linken Menü. Dort sollte eine kleine „3“ angezeigt werden.
- Du solltest index.astro, about.astro und blog.astro als geänderte Dateien sehen.
Gib eine Commit-Nachricht ein (z. B. „Zwei neue Seiten hinzugefügt – About und Blog“) und drücke Strg + Enter (macOS: Cmd ⌘ + Return), um die Änderungen in deinem aktuellen Workspace zu committen.
Klicke auf den Button Sync Changes, um die Änderungen mit GitHub zu synchronisieren.
Nach ein paar Minuten besuche deine Netlify-URL, um zu überprüfen, dass die Änderungen live veröffentlicht wurden.

Checkliste

Ich kann eine neue Seite für meine Website erstellen und von einer bestehenden Seite darauf verlinken.
Ich kann meine Änderungen zurück zu GitHub committen und meine Live-Seite auf Netlify aktualisieren.

Ressourcen

Wirke mit Community Sponsor