2

William Koehrsen und Jeckill Now

Jeckyll ist ein statischer Websitengenerator. D.h. eine “Maschine” die analog einem gedruckten Buch mit HTML und CSS Internetseiten erstellt. 2008 von Tom Preston-Werner - einem der Gründer von GitHub - erfunden, ist es inzwischen einer der populärsten statischen Seitengeneratoren.

William Koehrsen hat nun auf GitHub eine Vorlage (“Repository”) namens “Jeckyll Now” erstellt, welche frei kopiert (“forken”) weden darf. In diesem Artikel stellt er die Behauptung auf, dass man damit in fünf Minunten einen funktionieren Blog im Internet hat. D.h. man kann direkt anfangen mit Markdown Blogposts zu schreiben, welche ungefähr so aussehen. Zum Beispiel mit Visual Studio Code, meinem bevorzugten Editor. Daher sollte es klar sein, dass der Einsatz von “Jeckyll” mit GitHub gedacht ist. Man kann die Blogposts online erstellen bzw. editieren oder in einem lokalen Editor und einem abschliessenden Datenabgleich (“Sync”) mit GitHub.

Dieser Artikel schildert meine Erfahungen sowie mein Einstieg in Jeckyll bzw. “Jeckyll Now” mit diesem Blog. Weder bin ich Entwickler, noch Webdesigner. Ich habe in den vergangenen Jahrzehnten ein paar Stunden in HTML, CSS, JavaScript und ASP / ASP.Net investiert. Wenn technische Aussagen nicht korrekt oder nicht präzise sind, freue ich mich über ein Feedback. Korrektur asap. Der Artikel erklärt das Vorgehen genügend detailiert, so das jemand mit Browsern und Webservices vertraut ist, innert 15 Minuten am Ziel ist. Git, GitHub und Markdown sind keine komplexen System. Dokumentation bzw. Einführungen sind auch in deutscher Sprache im Internet leicht auffindbar. Generell muss man Geduld haben, wenn man Design Änderungen macht. Anders als in statischem HTML, wo im Browser die geänderte Website sofort angezeigt wird, kann es über GitHub bis zu 14 Minuten gehen. Und falls man auf GitHub mehrere Projekte verwaltet, nie die Domain Zuordnung (.io) auf ein anderes Projekt legen. Mein diesbezüglicher “Test” ergab eine Offline Zeit von ca. 4 Stunden…

Ein guter Einstieg ist die Datei “Readme.md”. Dort wird erklärt (en), wie die Software funktioniert. Bzw. wo man den Blog konfigurieren kann. Dort wird u.a. auch auf diesen Artikel von “Smashingmagazine” verwiesen.

Die Anpassungen die hier dokumentiert werden, sind von unterschiedlicher Verständnistiefe. Ein kurzes nachschlagen auf SelfHTML oder W3Schools sollte fehlenden Wissen schnell aufbauen.

Mit dem Befehl “Tree” der Windows Shell (CMD.EXE) ein kurzer Überblick wie die Datei und Verzeichnisstruktur aussieht.

Baum

Seitennamen, Beschreibung und Bild festlegen

Die Konfiguration des Bloges erfolgt primär über die Datei “_config.yml” im Stammverzeichnis. Die englischen Kommentare sind leicht verständlich. Die ersten Zeilen meiner Datei sehen nach der Bearbeitung wie folgt aus:

`` #

This file contains configuration flags to customize your site

#

Name of your site (displayed in the header)

name: Peter Gyger

Short bio or description (displayed in the header)

description: IT Guy - Computer, Netzwerke und neue Technologien / Anwendungen…

URL of your avatar or profile pic (you could use your GitHub profile pic)

avatar: https://avatars3.githubusercontent.com/u/40018804?s=400&u=ad668957f4d7ff1468d52c3f5de201a72819ef43&v=4 ``

Hintergrundfarbe ändern

Wie leicht vorstellbar ist, wird für die Darstellung CSS verwendet. Im Stammverzeichnis hat es die CSS Datei: “style.scss”. Der Anfang der Datei sieht so aus:

// // IMPORTS //

@import “reset”; @import “variables”; // Syntax highlighting @import is at the bottom of this file

/****/ /* BASE RULES / /*******/

html { font-size: 100%; }

body { background: $white; font: 18px/1.4 $helvetica; color: $darkGray; } ``
Die Eigenschaft “background:” im Element “body” muss auf die gewünschte Schriftfarbe angepasst werden. Für diesen Blog änderte ich die Zeile auf den Wert “#0f0a0a”. Dazu findet man im Internet diverse Tools. Eine Möglichkeit ist, in der Googlesuche die Begriffe “CSS Color Picker” zu suchen. In der Googlesuche ist ein entsprechendes Gadget integriert.

Schriftfarbe

Den Titel des Blogs ändert man in der Datei style.scss in dieser Sektion:

.site-name { margin: 0; color: $darkgrey; cursor: pointer; font-family: $helveticaNeue; font-weight: 300; font-size: 28px; letter-spacing: 1px; }

Text ändern

“Read More” in einem Blog mit deutschen Artikeln ist nicht passend. Daher mit dem Worten “Mehr lesen” ersetzt.
Dazu in der Datei “Index.html” die Zeile editieren. Nachher steht dort:
<a href="" class="read-more">Mehr lesen</a>

Wenn man die Farbe ändern will, kann man in der Datei Style.css die CSS Klasse “read more” einen Befehl dazu schreiben.

Am Ende eines Posts steht “Written on”. Auch das habe ich eingedeutsch. Neu steht dort “Letzte Änderung”. Der Weg für über die Datei “post.html” im Verzeichnis “_layouts”. Die Ausgangszeile lautet:

Written on December 31, 2018

Aus meiner Sicht soll der Besucher des Blogs den geänderten Eintrag analog zu einem neuen Artikel zuoberst sehen. Wie man an der Codezeile oben sieht, wird das Datum aus dem Namen der Datei erstellt. Wenn ich diesen Automatismus nicht ersetzen will, muss ich also den Dateinamen der Datei auf das aktuelle Datum anpassen.

Der Fairness geschuldet, update ich das Datum nur bei grösseren oder mehreren Änderungen. Der Leser soll ja keine bereits bekannte Posts als Neue einordnen.

Kontaktdaten

In der Konfigurationsdatei “_config.yml” Abschnitt “footer-links;” kann man seine Kommunikationskanäle eintragen.

Letzte Änderung December 31, 2018