Eintrag

Jekyll & Chirpy Formatierungs-Guide

Veröffentlicht Aktualisiert
Preview Image
Von Darth Vaper
6 Minuten Lesezeit
Jekyll & Chirpy Formatierungs-Guide

Diese Dokumentation beschreibt alle Formatierungsmöglichkeiten für Posts in diesem Jekyll-Blog mit dem Chirpy-Theme. Der Guide richtet sich an Autoren, die mit VS Code und der Front Matter CMS Erweiterung arbeiten.

Front Matter - Der Kopfbereich eines Posts

Jeder Post beginnt mit einem Front Matter Block, der zwischen zwei --- Zeilen steht. Hier werden Metadaten für den Post definiert.

Verfügbare Felder

Feld Typ Beschreibung
layout String Immer post für Blog-Beiträge
title String Der Titel des Posts (Pflichtfeld)
date DateTime Veröffentlichungsdatum mit Zeitzone
categories Array Kategorien für den Post
tags Array Tags für den Post
image.path String Pfad zum Featured Image (1200x630px empfohlen)
pin Boolean true = Post wird oben angepinnt
toc Boolean true = Inhaltsverzeichnis anzeigen (Standard)

Beispiel Front Matter

1
2
3
4
5
6
7
8
9
10
11

---
layout: post
title: "Mein erster Post"
date: 2026-01-04 15:20:39 +0100
categories: [Linux, Docker]
tags: [tutorial, container, homelab]
pin: false
toc: true
image:
  path: /assets/img/posts/mein-bild.png
---

Kategorien werden hierarchisch dargestellt. Der erste Eintrag ist die Hauptkategorie.

Markdown Grundlagen

Jekyll verwendet Kramdown als Markdown-Prozessor. Hier die wichtigsten Formatierungen:

Textformatierung

1
2
3
4

**Fett** oder __Fett__
*Kursiv* oder _Kursiv_
~~Durchgestrichen~~
`Inline Code`

Ergebnis: Fett, Kursiv, Durchgestrichen, Inline Code

Überschriften

1
2
3

## Überschrift 2
### Überschrift 3
#### Überschrift 4

Verwende ## H2 als höchste Überschriftenebene im Post-Inhalt. Die H1 wird automatisch aus dem Titel generiert.

Listen

Ungeordnete Liste:

1
2
3

- Erster Punkt
- Zweiter Punkt
  - Unterpunkt

Geordnete Liste:

1
2
3

1. Erster Schritt
2. Zweiter Schritt
3. Dritter Schritt

1
2

[Link-Text](https://example.com)
[Link mit Titel](https://example.com "Tooltip-Text")

Code-Blöcke

Syntax Highlighting

Chirpy unterstützt Syntax-Highlighting für viele Sprachen:

1
2
3

```bash
sudo apt update && sudo apt upgrade -y
```

Ergebnis:

1

sudo apt update && sudo apt upgrade -y

Unterstützte Sprachen

Sprache Bezeichner
Bash/Shell bash, shell, sh
Python python, py
YAML yaml, yml
JSON json
JavaScript javascript, js
Dockerfile dockerfile
Console Output console

Code mit Dateinamen

1
2

```bash
echo "Hello World"

1
2
3
4
5

Ergebnis:

```bash
echo "Hello World"

Code mit Zeilennummern

1
2
3
4

```python
def hello():
    print("Hello World")
    return True

1
2
3
4
5
6
7
8
9
10
11
12
13

---

## Chirpy-spezifische Formatierungen

### Callout-Boxen (Prompts)

Chirpy bietet farbige Hinweisboxen für verschiedene Zwecke:

**Info (blau):**
```markdown
> Dies ist eine Information.
{: .prompt-info }

Dies ist eine Information.

Tip (grün):

1
2

> Ein hilfreicher Tipp für den Leser.
{: .prompt-tip }

Ein hilfreicher Tipp für den Leser.

Warning (gelb):

1
2

> Achtung! Bitte beachten Sie diese Warnung.
{: .prompt-warning }

Achtung! Bitte beachten Sie diese Warnung.

Danger (rot):

1
2

> GEFAHR! Diese Aktion kann Datenverlust verursachen.
{: .prompt-danger }

GEFAHR! Diese Aktion kann Datenverlust verursachen.

Dateipfade hervorheben

1

Die Konfiguration liegt in `/etc/nginx/nginx.conf`{: .filepath}.

Ergebnis: Die Konfiguration liegt in /etc/nginx/nginx.conf.

Tastenkombinationen

1

Drücke <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> um die Befehlspalette zu öffnen.

Ergebnis: Drücke Ctrl + Shift + P um die Befehlspalette zu öffnen.

Bilder

Einfaches Bild

1

![Alt-Text](/assets/img/beispiel.png)

Bild mit Größenangabe

1

![Alt-Text](/assets/img/beispiel.png){: width="500" }

Bild mit Position

Links mit Text-Umfluss:

1

![Alt-Text](/assets/img/beispiel.png){: width="300" .left }

Rechts mit Text-Umfluss:

1

![Alt-Text](/assets/img/beispiel.png){: width="300" .right }

Bild mit Schatten

1

![Alt-Text](/assets/img/beispiel.png){: .shadow }

Bild mit Bildunterschrift

1
2

![Alt-Text](/assets/img/beispiel.png)
_Dies ist die Bildunterschrift_

Für ein Header-Bild am Anfang des Posts, setze im Front Matter:

1
2

image:
  path: /assets/img/posts/mein-header.png

Das Featured Image sollte ein Seitenverhältnis von 1.91:1 haben (empfohlen: 1200x630 Pixel).

Tabellen

Einfache Tabelle

1
2
3
4

| Spalte 1 | Spalte 2 | Spalte 3 |
|----------|----------|----------|
| Wert 1   | Wert 2   | Wert 3   |
| Wert A   | Wert B   | Wert C   |
Spalte 1 Spalte 2 Spalte 3
Wert 1 Wert 2 Wert 3
Wert A Wert B Wert C

Ausrichtung

1
2
3

| Links    | Zentriert | Rechts   |
|:---------|:---------:|---------:|
| Text     | Text      | 123      |
Links Zentriert Rechts
Text Text 123

Erweiterte Elemente

Fußnoten

1
2
3

Dies ist ein Text mit einer Fußnote[^1].

[^1]: Hier steht die Erklärung zur Fußnote.

Dies ist ein Text mit einer Fußnote1.

Einklappbare Bereiche (Details/Spoiler)

1
2
3
4
5
6
7

<details>
<summary>Klicken zum Aufklappen</summary>

Hier steht der versteckte Inhalt.
Er kann **Markdown** enthalten.

</details>
Klicken zum Aufklappen Hier steht der versteckte Inhalt. Er kann **Markdown** enthalten.

YouTube Videos einbetten

1

{% include embed/youtube.html id='VIDEO_ID' %}

Ersetze VIDEO_ID mit der YouTube Video-ID (z.B. dQw4w9WgXcQ).

Mermaid Diagramme

Chirpy unterstützt Mermaid-Diagramme direkt im Markdown:

1
2
3
4
5
6
7
8

```mermaid
flowchart LR
    A[Start] --> B{Entscheidung}
    B -->|Ja| C[Aktion 1]
    B -->|Nein| D[Aktion 2]
    C --> E[Ende]
    D --> E
```

flowchart LR
    A[Start] --> B{Entscheidung}
    B -->|Ja| C[Aktion 1]
    B -->|Nein| D[Aktion 2]
    C --> E[Ende]
    D --> E

1

[Link-Text]({% post_url 2026-01-04-anderer-post %})

VS Code & Front Matter CMS

Installation

  1. Öffne VS Code
  2. Gehe zu Extensions (Ctrl + Shift + X)
  3. Suche nach “Front Matter CMS”
  4. Installiere die Erweiterung

Dashboard öffnen

Nach der Installation erscheint ein neues Icon in der Sidebar. Klicke darauf, um das Front Matter Dashboard zu öffnen.

Neuen Post erstellen

  1. Klicke im Dashboard auf “Create content”
  2. Wähle den Content-Typ (Standard: “default”)
  3. Gib den Titel ein
  4. Der Post wird automatisch mit korrektem Dateinamen und Front Matter erstellt

Front Matter Panel

Beim Bearbeiten eines Posts zeigt die Sidebar das Front Matter Panel:

  • Title: Titel bearbeiten
  • Date: Datum/Zeit anpassen
  • Categories: Kategorien auswählen
  • Tags: Tags hinzufügen
  • Image: Featured Image setzen
  • Pin to Top: Post anpinnen
  • Table of Contents: Inhaltsverzeichnis ein/aus

Snippets einfügen

Front Matter CMS bietet vorkonfigurierte Snippets:

  1. Klicke auf das Snippet-Icon (Puzzleteil) in der Sidebar
  2. Oder nutze Ctrl + Shift + P → “Front Matter: Insert snippet”
  3. Wähle das gewünschte Snippet
  4. Fülle die Felder aus

Verfügbare Snippets

Snippet Beschreibung Ausgabe
Bash Code Bash Code Block Code-Block mit bash Syntax
Python Code Python Code Block Code-Block mit python Syntax
YAML Code YAML Code Block Code-Block mit yaml Syntax
JSON Code JSON Code Block Code-Block mit json Syntax
Shell Output Console Output Code-Block mit console Syntax
Dockerfile Dockerfile Block Code-Block mit dockerfile Syntax
Info Blaue Info-Box Blockquote mit .prompt-info
Warning Gelbe Warn-Box Blockquote mit .prompt-warning
Tip Grüne Tipp-Box Blockquote mit .prompt-tip
Danger Rote Gefahr-Box Blockquote mit .prompt-danger
Image Einfaches Bild Standard Markdown-Bild
Image Left Bild links Bild mit .left Klasse
Image Right Bild rechts Bild mit .right Klasse
Image Shadow Bild mit Schatten Bild mit .shadow Klasse
Image Caption Bild mit Untertitel Bild + _caption_ darunter
File Path Dateipfad hervorheben Code mit .filepath Klasse
YouTube Video Video einbetten {% include embed/youtube.html %}
Internal Link Post-Link {% post_url dateiname %}
Keyboard Key Tastenkürzel <kbd>Taste</kbd> Element
Mermaid Diagram Flowchart/Diagramm Code-Block mit mermaid Syntax
Table Tabelle Standard Markdown-Tabelle
Footnote Fußnote [^id] und [^id]: Text
Details/Spoiler Aufklappbarer Bereich HTML <details> Element

Preview

Front Matter CMS bietet eine integrierte Preview:

  1. Klicke auf “Open preview” im Dashboard
  2. Oder nutze den Befehl “Front Matter: Open preview”
  3. Die Preview öffnet sich im Browser unter http://192.168.60.89:4000

Stelle sicher, dass der Jekyll-Server läuft (make serve auf dem Server).

Git-Integration

Front Matter CMS hat Git-Integration aktiviert:

  • Änderungen werden automatisch erkannt
  • Commits können direkt aus VS Code gemacht werden
  • Nach dem Push wird die Site automatisch neu gebaut (Webhook)

Workflow-Zusammenfassung

flowchart TD
    A[VS Code öffnen] --> B[Front Matter Dashboard]
    B --> C[Create content]
    C --> D[Post schreiben]
    D --> E[Snippets nutzen]
    E --> F[Preview prüfen]
    F --> G{Zufrieden?}
    G -->|Nein| D
    G -->|Ja| H[Git Commit & Push]
    H --> I[Webhook baut Site]
    I --> J[Post ist live]

Ressourcen

  1. Hier steht die Erklärung zur Fußnote. ↩︎

Dokumentation
jekyll chirpy markdown vscode front-matter-cms
Dieser Eintrag ist vom Autor unter CC BY 4.0 lizensiert.