Jekyll Now

Statische Websites mit dem Framework Jekyll bzw. “Jekyall Now” erstellen

Nach mehreren Jahren kam ich mit 2018 mit der Blogengine.Net an ein Ende. Wie so oft gab es eine Entwicklung, die einen Schlusspunkt fand. Nach geduldiger Evaluierung entschied ich mich für eine Lösung, welche aus folgenden Bestandteilen besteht:

  • Markdown
  • Jeckyll
  • Git / GitHub

Umsetzung

William Koehrsen hat auf GitHub mit Jeckyll eine Vorlage für einen Blog namens “Jeckyll Now” erstellt. In diesem Artikel beschreibt er, wie man innert 5 Minuten damit einen funktionierenden Blog erstellt. Gestern Abend setzte ich mich hin und hatte effektiv innert 10 Minuten eine Website mit einem Blog. Nicht schön, nicht vollständig konfiguriert, jedoch bereit um Blogposts zu schreiben. Dazu in einem eigenen Artikel mehr.

Natürlich ist es nicht so Anwenderfokusiert wie z.B. “Wordpress”. Dafür hat man auch keine Sicherheitsprobleme und Updates (Plugins), welche Nebeneffekte mit sich bringen. Generell beobachte ich, dass statische Websiten d.h. das 90er Jahre Internet wieder sehr beliebt wurde. Meine Vermutung, dass auch hier das KISS (“Keep it simple stupied”) Prinzip sich bewährt.

Theme

Einer der Vorzüge von “jekyll” sind die Gestaltung mit “Theme”. Renato Golia hat in seinem Blog diverse How-Tos zu Jeckyl geschrieben.

Als Theme verwende ich “Minimal Mistakes” von Michael Rose. Der “Quick Start Guide” findet man hier. Dieses Theme kann auch leicht über “Skins” variert werden.

Jan Meppe hat in seinem Blog Tipps dazu geschrieben.

Konfiguration

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.

Links zu Unterseiten im Titel

In der Grundkonfiguration stehen auf der rechen Seite die Verweise auf die Seiten “Blog” und “About”. Das sind Hyperlinks auf das Artikelverzeichnis (“_posts”) und auf die Datei “about.md” im Root des Projektes.
Wenn ich diese Links nicht will, können diese einfach entfernt werden. In der Datei “default.html” im Unterverzeichnis “_layout” muss der Block “nav” (Zeile 29) bearbeitet werden. Dieser sieht orginal so aus:

     <nav>
        <a href="/">Blog</a>
        <a href="/about">About</a>
      </nav> <

Es können weitere Menupunkte eingefügt werden. Oder der Text “About” kann mit “Wer bin ich?” geändert werden.

Fehlerseite 404 ändern

Im Root hat es die Datei “404.md”. Diese kann nach belieben geändert werden. Man kann natürlich einer der unzähligen kostenlosen 404 Grafiken verwenden. Für dieses Projekt habe ein Bild von Mockplus.com verwendet.

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 `` Das über den Parameter “avatar” angezeigte Bild, kann natürlich auch aus dem Repositorie geladen werden:

avatar: /images/petergyger-small.jpg

Hintergrundfarbe ändern

Im Verzeichnis “_sass” befindet sich die Datei “variables.scss”. Darin müssen die Farben definiert sein, die man verwenden will. Orignal sieht die Datei so aus:

`` // // VARIABLES //

// Colors $blue: #4183C4;

// Grays $black: #000; $darkerGray: #222; $darkGray: #333; $gray: #666; $lightGray: #eee; $white: #fff;

// Font stacks $helvetica: Helvetica, Arial, sans-serif; $helveticaNeue: “Helvetica Neue”, Helvetica, Arial, sans-serif; $georgia: Georgia, serif;

// Mobile breakpoints @mixin mobile { @media screen and (max-width: 640px) { @content; } } ``

Man kann diese nun nach belieben ergänzen. Die Farben werden über die RGB Werte definiert:

`` // // VARIABLES //

// Colors

// Blue $blue: #4183C4; $navy: #000080; $mediumblue: #1E90FF; $mediumblue: #0000CD;

// Grays $black: #000; $darkerGray: #222; $darkGray: #333; $gray: #666; $lightGray: #eee; $white: #fff;

// Font stacks $helvetica: Helvetica, Arial, sans-serif; $helveticaNeue: “Helvetica Neue”, Helvetica, Arial, sans-serif; $georgia: Georgia, serif;

// Mobile breakpoints @mixin mobile { @media screen and (max-width: 640px) { @content; } } ``

Im Stammverzeichnis hat es die CSS Datei: “style.scss”. Darin werden HTML Tags CSS Formatierungen hinzugefügt. Z.b. “a {“ um die Farbe der Hyperlinks zu definieren. 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 (aus variables.scss) 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 October 29, 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.

Domain / TLD

Ein Repository kann leicht mit einer TLD verknüpft werden. Dazu muss lediglich im Root eine Textdatei mit dem Namen “cname”. Darin den Namen der TLD. D.h. in meinem Fall “www.petergyger.net”.

GitHub gibt jedem User die Möglichkeit kostenlos ein Repository als Domain zu publizieren. Dazu muss der Name des Repositorys mit “github.io” angepasst werden. Angenommen der Repository Name ist “donald_duck”. Der Domainname ist dann “donald_duck.github.io”

Written on October 29, 2018