Schreibe deinen ersten Markdown-Blogbeitrag

Jetzt, da du Seiten mit .astro-Dateien erstellt hast, ist es an der Zeit, Blogbeiträge mit .md-Dateien zu schreiben!

Mach dich bereit, …

• einen neuen Ordner zu erstellen und einen neuen Beitrag anzulegen
• etwas Markdown-Inhalt zu schreiben
• deine Blogbeiträge auf deiner Blog-Seite zu verlinken

Erstelle deine erste .md-Datei

1. Erstelle ein neues Verzeichnis unter src/pages/posts/.

2. Lege in deinem neuen /posts/-Ordner eine (leere) Datei namens post-1.md an.

3. Rufe diese Seite in deiner Browser-Vorschau auf, indem du /posts/post-1 an deine bestehende Vorschau-URL anhängst (z. B. http://localhost:4321/posts/post-1).

4. Ändere die Vorschau-URL im Browser zu /posts/post-2 (diese Seite existiert noch nicht).

   Achte auf den Unterschied in der Ausgabe zwischen einer „leeren“ Seite und einer, die nicht existiert. Das hilft dir später beim Beheben von Problemen.

Schreibe Markdown-Inhalt

1. Kopiere oder tippe den folgenden Code in post-1.md ein.

2. Überprüfe deine Browser-Vorschau erneut unter http://localhost:4321/posts/post-1. Du solltest jetzt Inhalt auf dieser Seite sehen. Er ist möglicherweise noch nicht richtig formatiert, aber keine Sorge – du wirst das später im Tutorial anpassen!

3. Öffne die DevTools deines Browsers und untersuche die Seite. Dir wird auffallen, dass dein Markdown automatisch in HTML umgewandelt wurde, obwohl du keine HTML-Elemente geschrieben hast. Du kannst dort Überschriften, Absätze und Listenelemente sehen.

Hinweis

Die Informationen am Anfang der Datei, innerhalb der Code-Abgrenzungen, nennt man Frontmatter. Diese Daten – einschließlich Tags und Beitragsbild – sind Informationen über deinen Beitrag, die Astro nutzen kann.
Sie erscheinen nicht automatisch auf der Seite, aber du wirst sie später im Tutorial verwenden, um deine Website zu erweitern.

Verlinke deine Beiträge

1. Verlinke deinen ersten Beitrag mit einem Anker-Tag in src/pages/blog.astro.

2. Füge anschließend zwei weitere Dateien in src/pages/posts/ hinzu: post-2.md und post-3.md.
   Du kannst den untenstehenden Beispielcode verwenden oder eigene Texte schreiben.

3. Füge Links zu diesen neuen Beiträgen hinzu.

4. Überprüfe in der Browser-Vorschau, ob alle Links zu Beitrag 1, Beitrag 2 und Beitrag 3 auf funktionierende Seiten führen.
   (Wenn etwas nicht klappt, überprüfe deine Links in blog.astro oder die Dateinamen deiner Markdown-Dateien.)

Teste dein Wissen

1. Inhalt in einer Markdown-Datei (.md) wird umgewandelt in:
   1. HTML
   2. CSS
   3. JavaScript

   Absenden

Checkliste

• Ich kann innerhalb von src/pages/ einen neuen Ordner für meine Blogbeiträge erstellen.
• Ich kann eine neue Markdown-Datei (.md) für einen Blogbeitrag anlegen.
• Ich verstehe, dass Markdown eine weitere Sprache ist, die – wie Astro – in meinem Browser HTML erzeugt.

Ressourcen

• Markdown-Cheatsheet vom Markdown-Guide extern

• Was sind Entwickler-Tools im Browser? – MDN extern

• YAML-Frontmatter extern