Jekyll – Teil 3: Blog erstellen

J

Blogartikel

Schon bei der Grundinstallation legt Jekyll einen _posts-Ordner an. Alle Markdown-Dateien werden entsprechend als Blogartikel geparst.

Erstelle dir am Besten zuerst einen kleinen Demo-Artikel. Ein einfaches Beispiel, wie ein Blogartikel bei Jekyll von mir aussieht:

---
layout: post
title: Titel des Blogs
date: 2019-12-15 08:00:00 + 0100
author: Max Mustermann
categories: Webentwicklung
robots: index, follow
description: Hier steht eine Beschreibung.
---
## Beispielüberschrift

Hier könnte dein Text stehen...

Im obigen Beispiel siehst Du layout:post. Im Parameter layout gibst Du an, welches Layout verwendet werden soll. In diesem Fall natürlich das Blogpost-Layout, kurz post. Wenn also post.html unter _layouts deines Jekyll-Projekts
noch nicht vorhanden ist, so lege es an. Das Design deines Blogbeitrags richtet sich nach deinem Template. Um den Blogbeitrag anzuzeigen benötigst Du nur:

Content-Tag: {{ content }}

Blogseite mit Artikelliste

Nachdem Du nun erstmal einen Testbeitrag und das zugehörige Layout erstellt hast , fehlt nun noch eine Blog-Seite die alle Beiträge auflistet. Hierzu hab ich mir im rootVerzeichnis einfach einen Ordner namens blog angelegt und eine index.html darin erstellt. Das Layout richtet sich natürlich wieder nach deinem Template, aber eine grundlegende Funktionalität erreichst Du mit folgendem Code.

{% for post in paginator.posts %}

<h1>{{ post.title }}</h1>
<p>{{ post.date | date_to_string }}</p>
<p>{{ post.author }}</p>
<p>{{ post.description }}</p>
<a href="{{ post.url }}">weiterlesen</a>

{% endfor %}

Mit page.title, page.date usw. kannst Du auch hinterlegte Parameter aus deinem Blogbeitrag (YAML-Header [z.B. title: Titel des Blogs]) direkt an passende Stelle anzeigen.

Info: Mit site anstatt page kannst Du einen globalen Parameter aus der _config aufrufen. z.B. site.author.

Pagination

Damit paginator.posts funktioniert, benötigst Du das Plugin jekyll-paginate. In dem GitHub-Repo findest Du praktische Beispiele für die Implementierung.

Webseite generieren

Nachdem Du nun erstmal das Grundgerüst erstellt hast ist es Zeit, kannst Du testen ob auch die Generierung funktioniert.
Dazu musst Du nur mit der Konsole in das root-Verzeichnis deines Jekyll-Projekts navigieren und Folgendes in die Konsole tippen:

JEKYLL_ENV=production bundle exec jekyll build --trace

weitere Informationen:

Über den Autor

Christian

Hi, mein Name ist Christian. Ich bin ein ehemaliger Softwareentwickler, der seine Berufung seit nun schon mehreren Jahren im Digital Marketing gefunden hat. Couchidee ist mein kleines privates Notizbuch. Hier notiere und schreibe ich über alles, was mir in den Sinn kommt. ;)

Kommentar hinzufügen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Über mich

Hi, mein Name ist Christian. Ich bin ein ehemaliger Softwareentwickler, der seine Berufung seit nun schon mehreren Jahren im Digital Marketing gefunden hat. Couchidee ist mein kleines privates Notizbuch. Hier notiere und schreibe ich über alles, was mir in den Sinn kommt. ;)