Couchblog

Bloggen von der Couch ➔ Gedanken, Notizen und Kommentare zu Online-Marketing, Webentwicklung und allgemeinen IT-Themen. Schau rein und mach es Dir gemütlich.

Card image cap

Jekyll - Teil 3: Blog erstellen


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 root-Verzeichnis 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