Fryboyter

Fryboyter.de um Suchfunktion erweitert

Fryboyter.de stellt für mich hauptsächlich eine persönliche Wissensdatenbank dar die ich Dritten zur Verfügung stelle. Seit ich die Seite auf Hugo umgestellt habe, habe ich festgestellt, dass ich eine Suchfunktion vermisse.

In der Dokumentation von Hugo sind zwar einige Lösungen genannt, aber diese sagen mir aus diversen Gründen nicht wirklich zu.

Schlussendlich habe ich mich nun dazu entschieden vorerst eine Suchfunktion im Footer einzubauen mit der man über die Suchmaschine DuckDuckGo die Seite durchsuchen kann. So wirklich glücklich bin ich damit zwar auch nicht aber es funktioniert zumindest und kommt ohne Javascript aus.

OSBN | Allgemein

Manche Artikel werden nun mehrsprachig angeboten

In den letzten Jahren habe ich mir ab und zu überlegt, ob ich zumindest manche Artikel nicht zusätzlich auch auf Englisch veröffentliche. Bisher war mir allerdings die technische Umsetzung zu umständlich. Mit Hugo ist es allerdings schnell gemacht, wie ich heute festgestellt habe.

Als erstes erweitert man die Konfigurationsdatei config.toml um folgende Einträge.

DefaultContentLanguage = "de"

    [languages]
    [languages.de]
        languageName = "Deutsche Version"
        weight = 1
    [languages.en]
        languageName = "English version"
        weight = 2

Mit der ersten Zeile gibt man an, dass de die Standardsprache ist. Der Rest definiert die vorhandenen Sprachen, gibt Ihnen eine Bezeichnung und eine Gewichtung (umso niedriger umso wichtiger).

Nun erzeugt man einen neuen Artikel. Nennen wir die Datei einfach mal manche-artikel-nun-englisch.md. Nehmen wir nun einmal an, der Artikel ist wichtig genug, dass wir ihn nun auch auf Englisch veröffentlichen möchten. Also erzeugen wir einen weiteren Artikel und nennen die Datei manche-artikel-nun-englisch.en.md. Wie man sieht wurde der Titel um ein .en erweitert. Hugo kapiert nun automatisch, dass der Artikel mit .en die englische Version darstellt und die andere die deutsche Version.

Was aber, wenn nun jemand die deutschsprachige Version aufruft, aber kein Deutsch versteht? Hier müsste eine Art Umschalter vorhanden sein. Hierfür kann man zum Beispiel folgenden Code verwenden.

{{ if .IsTranslated }}
    {{ range .Translations }} | {{ .Language.LanguageName }} {{ end}}
{{ end }}

Hiermit wird geprüft, ob der Artikel auch in einer anderen Sprache angeboten wird. Wenn ja wird auf die entsprechenden Versionen verlinkt. Wenn nicht, wird gar nichts angezeigt. Diesen Code habe ich auf fryboyter.de unter die Hauptüberschrift aller Artikel gepackt. Sollte dort nun bei einem Artikel der Link “English version” erscheinen, habe ich mir die Arbeit gemacht und den Artikel auch auf Englisch veröffentlicht. Aktuell wird man diese Verlinkung aber nur bei diesem Artikel finden. Nach und nach werden es aber mehr Artikel werden die ich auf Deutsch und Englisch anbiete (auch ältere).

OSBN | Allgemein

Fryboyter wird nun mit Hugo erzeugt

Bisher habe ich für fryboyter.de das CMS Bolt verwendet. Im Grunde bin ich damit auch zufrieden. Aber irgendwie habe ich in letzter Zeit immer weniger Lust die Updates zu installieren.

Daher habe ich mir in den letzten Wochen diverse Tools angesehen, mit denen man statische Webseiten erstellen kann. Man braucht also kein PHP, keine Datenbank usw. Somit entfällt auch das nervige Updaten der Seite.

Schlussendlich bin ich bei Hugo gelandet. Das hat im Grunde zwei Gründe. Zum einen besteht Hugo nur aus einer Datei und zum anderen werden die statischen Seiten sehr schnell erzeugt.

Was mich aber etwas beschäftigt hat war, wie ich die Seite bei neuen Artikeln möglichst einfach erzeugen und auf den Webspace hochladen kann.

Im Lab von Uberspace gibt es inzwischen eine Anleitung wie man Hugo installiert. Hierbei läuft Hugo als Dienst im Hintergrund und erzeugt die Seite neu sobald sich etwas geändert hat. Was aber zur Folge hat, dass ich mich wieder zeitnah um eventuelle Updates kümmern muss. Besser wäre es, wenn Hugo nur zum Erzeugen der Seite gestartet und danach wieder beendet wird. Das einfachste wäre es, sich per SSH mit dem Webspace zu verbinden, den neuen Artikel zu erstellen und dann Hugo manuell auszuführen. Einfach? Ja. Umständlich? Auf jeden Fall. Also kommt es auch nicht in Frage.

Die Lösung lautet, wie so oft, Git. Als erstes legt man auf dem Webspace außerhalb des Document Root ein Verzeichnis an. In diesem erzeugt man mittels “git init –bare” ein sogenannte Bare-Respository. Dies hat, im Gegensatz zu einem normalen Respository keinen Working Tree. Schaut man sich nun das Verzeichnis noch einmal an, findet man dort das Unterverzeichnis “hooks”. Mit diesen Hooks lassen sich bestimmte Dinge automatisieren. Zum Beispiel lassen sich Befehle ausführen wenn das Repository neue Daten erhalten hat. Hierfür legt man im Verzeichnis “hooks” die Datei post-receive an und befüllt diese beispielsweise wie folgt und macht diese dann noch ausführbar.

GIT_REPO=$HOME/repository/fryboyter.git
TMP_GIT_CLONE=$HOME/tmp/git/fryboyter
PUBLIC_WWW=/var/www/virtual/$USER/html/fryboyter
git clone $GIT_REPO $TMP_GIT_CLONE
~/bin/hugo -s $TMP_GIT_CLONE --cleanDestinationDir -d $PUBLIC_WWW
rm -Rf $TMP_GIT_CLONE
exit

Hiermit wird der Inhalt des Repository in ein temporäres Verzeichnis geklont. Danach löscht Hugo die bereits veröffentlichte Internetseite und erstellt diese neu. Danach wird das temporäre Verzeichnis gelöscht.

Was jetzt noch fehlt, sind die Daten mit denen man die Internetseite erzeugt. Diese erzeugt man auf dem eignene Rechner. Wenn dies erledigt ist, wechselt man in das betreffende Verzeichnis und führt folgende Befehle aus.

git init
git add .
git commit -m "Beschreibung des Commit"

Hiermit erstellt man ein lokales Repository, fügt alle Dateien des Verzeichnis hinzu und erstellt einen Commit. Läde man das ganze mittels “git push $adresse_des_repository” hoch wird automatisch die Datei post-receive ausgeführt und die Internetseite wird autoamtisch erzeugt. Um zukünftig die Seite zu aktualisieren, erzeugt / ändert man die betreffende Datei im lokalen Repository, erstellt einen neuen Commit und läd die Änderungen mittels git push hoch.

OSBN | Allgemein

Fryboyter.de ohne Matomo

Ich habe mich eben entschlossen, den Code für Piwik / Matomo von Fryboyter.de zu entfernen. Somit werden aktuell nun keine Statistiken über die Besucher mehr erstellt. Dafür läd die Seite nun noch schneller. Die Gründe sind eigentlich relativ einfach.

Zum einen Funktioniert der iFrame für das die Opt-Out-Funktion auf einem Uberspace 7 nicht, da dort “Response Header” gesetzt werden, die man aktuell selbst nicht ändern kann. Zudem gibt es wohl auch aufgrund der DSGVO die eine oder andere Tretmine auf die auch Betreiber nichtkommerzieller Seiten treten können. Von den Geiern das Abmahnindustrie will ich gar nicht erst anfangen. Da für mich eigentlich nur interessant war, das ein x-belieber Nutzer Artikel X für einen Zeitraum von Y aufgerufen hat, hatte ich Piwik / Matomo auch nur sehr rudimentär genutzt. Aber selbst diese Informationen habe ich in den letzten Wochen und Monaten immer seltener abgerufen. Zudem kommt auch noch hinzu, dass in letzter Zeit immer weniger Nuter erfasst wurden, was vermutlich an der “Do-Not-Track-Funktion” der Browser sowie der Sperre durch die Ad-Blocker liegt. Kurz gesagt, Piwik / Matomo bringt mir immer weniger und sorgt mit etwas Pech auch noch für Probleme. Also weg damit. Zukünftig muss ich mich halt auf mein Bauchgefühl bzw. auf die abgegebenen Kommentare verlassen, welche Themen interessant sind und welche nicht.

Sollte ich mich eines Tages wieder für Piwik / Matomo entscheiden, werde ich hier entsprechend darauf hinweisen.

OSBN | Allgemein

Fryboyter.de nun mit Code Highlighter

Vor ein paar Monaten bin ich von Wordpress auf Bolt CMS umgestiegen. Hierbei musste ich auf die eine oder andere Funktion verzichten. Unter anderem auf einen Code Higlighter. Es gibt zwar zwei Plugins, aber diese sind leider veraltet und funktionieren mit Bolt 3.x nicht und ich bekomme es nicht gebacken diese entsprechend anzupassen.

Daher hatte ich mit CSS etwas zusammengebastelt um Codebeispiele zumindest als solche zu kennzeichnen. Das Ergebnis war mehr schlecht als recht. Bei zu langen Zeilen musste man beispielsweise horizontal scrollen. Und Zeilennummern gab es auch keine mehr. Blöd wenn man den Code an einer bestimmten Stelle erklären will.

Ich habe mich daher dazu entschlossen einen Code Highlighter zu installieren. Entschieden habe ich mich schlussendlich für Prism. Zukünftig wird nun Code farblich hervorgehoben und Zeilennummern ink. Umbruch gibt es nun auch wieder.

#!/bin/bash 
echo "Wie ist Ihr Name?"
read ANTWORT
if [ "$ANTWORT" == "root" ]
    then
        echo "Hallo, Administrator. Das ist eine sehr lange Zeile um einen Zeilenumbruch zu provozieren."
    else
        echo "Hallo, Anwender."
fi

Der ganze Spaß hat aber auch Nachteile. Zum einen muss ich nun einige Artikel anpassen, da ich oft zu faul war, die richtige Klasse bei den Code-Tags zu hinterlegen (z. B. <code> anstelle von <code class=“language-bash”>. Und für die Zeilennummern muss ich die <pre> Tags um <pre class=“line-numbers” style=“white-space:pre-wrap;”> erweitern. Naja muss ich halt wieder das fleißige Bienchen spielen… Ein weiterer Nachteil ist, dass die Seite nun ca. 12 KB schwerer ist, da nun eine Javascript-Datei und eine CSS-Datei zusätzlich geladen werden. Ich denke das ist zu verkraften.

OSBN | Allgemein