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.

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;
}
Written on October 30, 2018