Gedicht Page mit Jekyll CMS & Github Pages | Kaspar Allenbach

Kaspar Allenbach

Gedicht Page mit Jekyll CMS & Github Pages

Was tun mit einem Gedicht-Nachlass.
Müllers Zorn, Website

Ich habe sieben Jahre als UX-Designer gearbeitet und kommerzielles Webdesign von Design bis zu CMS-Implementationen angeboten. Da ich mich mehr auf Branding und meinen Plakatshop konzentriert habe, kam das Coden deutlich zu kurz.

Aber ab und zu habe ich wieder Bock auf Code schreiben.

Was tun mit dem geistigen Erbe?

Mein Grossvater selig hat einige Gedichte hinterlassen, die er sein ganzes Leben lang auf Papier handschriftlich aufgezeichnet hat.

Historiker Roger Siedler hat sich der Sache angenommen und die Gedichte transkribiert.

Das transkribierte Dokument umfasst 321 Seiten und besteht aus 191 Gedichten.

Eine Gedicht Website

Ich wollte erst ein Gedichtbändchen layouten, aber da ich in letzter Zeit eine Handvoll Print-Layouts gemacht habe und schon länger kein Coding-Projekt mehr, habe ich mich für ein Web-Projekt entschieden.

In diesem Blogeintrag geht es um die Implementation meiner Idee zur Aufbereitung dieser Gedichte und nicht um die Gedichte selber.

Jekyll CMS

Die Applikation Jekyll ist ein Publizierungssystem ohne Datenbank. Das heisst, man gibt dem System einen Ordner voller Textdateien im format .yaml und Jekyll macht daraus automatisch eine Seite mit einer url, im richtigen Design und diversen Zusatzfunktionen, wie z.b. einer Zufallsfunktion oder automatische Navigationslinks.

yaml Front Matter

YAML ist ein Textformat, das anhand von Sonderzeichen sowohl vom Mensch als auch von der Maschine gelesen werden kann:

Yaml markup
So sieht ein YAML File aus

Durch die drei Striche --- werden Verortung und Inhalt voneinander getrennt. Anhand der Metadaten oben, Front Matter genannt, kann Jekyll bestimmen, was mit der Datei zu tun ist und gleichzeitig ist alles menschenlesbar und mit jedem gängigen Textprogramm editierbar.

---

  • title: Daraus wird die Url generiert, und umlaute werden in web-sichere Zeichen umgewandelt: öäü = oau
  • date: ist ein Pflichtfeld, aber wird für die Gedichte nicht verwendet, da viele nur ungenügend datiert sind. Stattdessen sind die Gedichte alphabetisch sortiert.
  • author: Der Autor der Gedichte wird automatisch zum Gedicht hinzugeschrieben.
  • layout: hier wird bestimmt, in welche Formatvorlage das Gedicht geladen werden soll, welches dann der Leser am Ende auf dem Bildschirm sieht.
  • creationDate: Da viele Gedichte total unterschiedlich datiert sind, habe ich ein eigenes Datefeld gemacht, das alle arten von Formatierungen akzeptiert (was beim Standarddatenfeld) nicht der Fall ist.

---

Ab hier fängt das Gedicht an.

Wie kriegt man 191 Gedichte in 191 Dateien ins richtige Format?

Ich habe händisch angefangen und schnell gemerkt, dass das unglaublich zeitaufwändig ist. Daher hat mir ChatGPT einen Python Skript geschrieben, der die Textdatei in so viele Dateien aufteilt, wie es Gedichte hat.

Yaml splitter

Dieser Skript macht folgendes:

  • Separiert alle Gedichte immer dann wenn ein --- auftaucht
  • Generiert die Dateinamen Basierend auf "title"
  • ersetzt die Titelzeichen durch URL sichere Zeichen und macht ein Kebab Case draus
Gedichte Filesystem
Sehr schön: Alle Gedichte in separaten YAML-Dateien automatisch generiert. Aus diesem Ordner werden nun automatisch Websites generiert.

Die Website

Ab hier kommt der schöne Teil, die typografische Gestaltung der Gedichte.

Für den Spass an der Sache habe ich noch einen Zufalls-Button eingefügt. Nun kann man immer mal wieder, wenn einem danach ist, ein zufälliges Gedicht lesen.

Müllers Zorn
Ab und zu ein Gedicht lesen, tut immer gut.

Hosting