Fryboyter

Hugo Extended 0.101.0 für Uberspace.de / CentOS 7

Zum Erstellen von fryboyter.de nutze ich Hugo. Und als Webspace nutze ich uberspace.de. Wenn ich beispielsweise einen neuen Artikel schreibe, erstelle ich für diesen einen Commit, den ich in ein Mercurial-Repository auf den Webspace hochlade. Jeder neue Commit löst dann die Ausführung eines Scripts aus, welches die Seite neu erzeugt.

Das Script nutzt hierfür die fertig kompilierte Version von Hugo die von den Entwicklern angeboten wird und die auf dem Webspace abgespeichert ist. Aufgrund von kürzlich erfolgten Änderungen an der Internetseite benötige ich nun die sogenannte extended Version von Hugo. Die aber leider bei Uberspace.de nicht funktioniert, da dort aktuell CentOS 7 zum Einsatz kommt, sodass einige benötigte Pakete zu stabil sind. Oder anders ausgedrückt zu veraltet sind. Hugo bricht daher mit der folgenden Fehlermeldung ab.

/home/laythos/bin/hugo: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by /home/laythos/bin/hugo)
/home/laythos/bin/hugo: /lib64/libstdc++.so.6: version `CXXABI_1.3.8' not found (required by /home/laythos/bin/hugo)
/home/laythos/bin/hugo: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by /home/laythos/bin/hugo)

Das Problem ist den Entwicklern bekannt (https://github.com/gohugoio/hugo/issues/9330), aber aus nachvollziehbaren Gründen werden für alte Distributionen keine fertig kompilieren Versionen angeboten.

Also bleiben in dem Fall zwei Möglichkeiten. Man erzeugt die Internetseite jedes Mal lokal und lädt diese beispielsweise mit rsync auf den Webspace. Oder man kompiliert eine Version von Hugo die CentOS 7 unterstützt. Ich habe mich für letzteres entschieden.

Das Kompilieren direkt auf einem Uberspace sollte man allerdings nicht probieren. Denn dort kann man maximal 1,5 GB RAM nutzen. Alles, was mehr braucht, wird automatisch beendet. Was bei Hugo der Fall ist.

Daher habe ich mir von https://www.osboxes.org eine virtuelle Umgebung von CentOS 7 heruntergeladen und mit VirtualBox gestartet. Anschließend habe ich golang sowie gcc-c++ installiert. Ersteres über Umwege, da Go scheinbar nicht in den offiziellen Paketquellen vorhanden ist.

Danach bin ich wie folgt vorgegangen.

wget https://github.com/gohugoio/hugo/archive/refs/tags/v0.97.3.zip
unzip https://github.com/gohugoio/hugo/archive/refs/tags/v0.97.3.zip
cd hugo-0.97.3
CGO_ENABLED=1 go install --tags extended

Mit dem ersten Befehl wir der Sourcecode der derzeit aktuellen Version heruntergeladen. Mit dem zweiten Befehl wird dieser entpackt. Der dritte Befehl wechselt in das betreffende Verzeichnis, in dem die Dateien entpackt wurden. Und der letzte Befehl kompiliert die extended Version von Hugo.

Wenn der letzte Befehl erfolgreich ausgeführt wurde, was je nach Hardware ein paar Minuten dauern kann, sollte man im Verzeichnis ~/go/bin/ die Datei hugo finden. Diese kopiert man dann einfach auf seinen Uberspace. Damit sollte dann das Erzeugen der Internetseite ohne Fehlermeldungen funktionieren.

Unter https://e1.pcloud.link/publink/show?code=kZSMfzZx0nn3yYPAEVOyuhqvPPdgLfvF5ek habe ich die aktuelle von mir erzeugte Version von Hugo die bei Uberspace.de funktioniert hochgeladen. Wer will (und mir vertraut), kann diese gerne nutzen.

info
Zuletzt aktualisiert am 16.06.2022.
Version 0.101.0 erstellt und hochgeladen von Hugo für Uberspcae / CentOS 7.
Allgemein | OSBN

Hinweise in Artikeln unter Hugo einfügen

Kürzlich habe ich einen Artikel veröffentlicht, der sich auf einen älteren Artikel bezogen hat, der somit im Grunde nicht mehr relevant ist. Da ich diesen aber nicht löschen will, habe ich mir überlegt in diesem einen entsprechenden Hinweis einzutragen. Also für den Fall, dass jemand den Artikel von 2019 direkt aufruft.

Gelöst habe ich dies mittels eines Shortcodes, der unabhängig von den Artikeln genutzt werden kann. Im Verzeichnis des von mir verwendeten Themes habe ich im Unterverzeichnis shortcodes die Datei notice.html angelegt und folgenden Inhalt eingetragen.

<div class="shortcode-notice {{ .Get 0 }}">
    <div class="shortcode-notice-title {{ .Get 0 }}">
        {{- if len .Params | eq 2 -}}
        {{ .Get 1 }}
        {{ else }}
        {{ .Get 0 }}
        {{- end -}}
    </div>
    <div class="notice-content">{{ .Inner | markdownify }}</div>
</div>

Zusätzlich habe ich im Unterverzeichnis static/css im Theme-Verzeichnis die Datei notice.css angelegt und folgenden Inhalt eingetragen.

.shortcode-notice .notice-content {
    padding: .6em 1em;
	display: block;
	font-size: 1em;
	margin-top: 0;
	margin-bottom: 0;
	color: #666;
    border-radius: 4px;
}

.shortcode-notice-title {
	color: #fff;
	padding-left: 1em;
	font-weight: 700;
	text-transform: capitalize;
    border-radius: 4px 4px 0 0;
}

.shortcode-notice-title.hinweis {
	background-color: rgba(92, 184, 92, .8)
}

 .shortcode-notice.hinweis .notice-content {
	background: #e6f9e6
}

 .shortcode-notice-title.tip {
	background-color: #6ab0de
}

.shortcode-notice.tip .notice-content {
	background: #e7f2fa
}

.shortcode-notice-title.info {
	background-color: #f0b37e
}

.shortcode-notice.info .notice-content {
	background: #fff2db
}

.shortcode-notice-title.warnung {
	background-color: rgba(217, 83, 79, .8)
}

.shortcode-notice.warnung .notice-content {
	background: #fae2e2
}

Will man nun einen entsprechenden Hinweis in einen Artikel eintragen, kann man folgenden Shortcode nutzen.

{{% notice info %}}
Das ist eine Information
{{% /notice %}}

Anstelle von info kann man in der ersten Zeile hinweis, tip und warnung verwenden was zur Folge hat, dass der Hintergrund der Anzeige entsprechend eine andere Farbe hat. Im Falle der Warnung beispielsweise rot. Wem das nicht ausreicht oder zu viel ist, kann natürlich die Einträge in der CSS-Datei erweitern oder entfernen.

Im Falle des bereits angesprochenen, veralteten Artikels von 2019 erzeugt dies folgenden Hinweis.

OSBN | Allgemein

Kommentarfunktion Isso unter Hugo deaktivieren 2.0

2019 hatte ich bereits einen Artikel veröffentlicht, wie man das Kommentarsystem Isso für bestimmte Artikel unter Hugo deaktiviert. Hierbei wurde aber nur der Code entfernt der für das Anlegen neuer Kommentare und das Anzeigen vorhandener Kommentare zuständig ist. Im Hintergrund wurde beispielsweise die JavaScript-Datei “embed.min.js” weiterhin geladen. Auch wenn diese nur ca. 25 kB groß ist (was einen Großteil von https://fryboyter.de ausmacht), bin ich mit der Lösung unzufrieden.

Da ich aktuell privat etwas Zeit habe, und ich diese Funktion demnächst wohl öfter nutzen werde, habe ich mir eine bessere Lösung überlegt.

Als Erstes habe ich mir die Datei single.html vorgenommen. Diese ist für das Anzeigen von einzelnen Artikeln zuständig. Den betreffenden Code habe ich wie folgt geändert.

{{ if and ( isset .Params "nocomments" ) ( eq .Params.nocomments true ) -}}
    <p>Die Kommentarfunktion ist für diesen Artikel deaktiviert</p>
{{ else }}
    <section id="isso-thread" data-title="{{ .Title }}"></section>
	<noscript>
		<p>Die Kommentarfunktion kann nur mit aktiviertem Javascript genutzt werden</p>
	</noscript>
{{ end }}	

Wichtig ist hier im Grunde genommen die erste Zeile. Damit wird geprüft, ob im Front-Matter-Bereich des jeweiligen Artikels die Zeile nocomments: vorhanden ist und ob diese den Wert true hat. Wenn ja, wird der Hinweis angezeigt, dass die Kommentarfunktion für diese Artikel deaktiviert ist. Wenn nicht, wird der Code eingetragen, mit dem man als Nutzer neue Kommentare erzeugen kann und vorhandene Kommentare anzeigt. Also im Grunde genommen, was im Artikel von 2019 beschrieben wurde.

Als Nächstes habe ich die Datei metadata.html angepasst. Diese erzeugt die Zeile direkt unter dem Titel des Artikels, in der bisher unter anderem die Anzahl der Kommentare angezeigt wird. Was bei einer deaktivierten Kommentarfunktion nicht wirklich nötig ist.

{{ if or (not ( isset .Params "nocomments" )) ( ne .Params.nocomments true ) -}} | <a href="{{ .Permalink }}#isso-thread">Comments</a>{{ end }}

Hiermit wird geprüft, ob die Zeile nocomments: nicht hinterlegt ist oder wenn doch, ob dessen Wert nicht true entspricht. Wenn eines der beiden zutrifft, wird der Code für die Anzahl der vorhandenen Kommentare angezeigt. Den Code habe ich bewusst etwas verkompliziert, da ich verhindern wollte, dass beispielsweise nocomments: treu unabsichtlich dazu führt, dass die Kommentare deaktiviert werden. Wer hierfür eine bessere Lösung hat, die weniger Code benötigt, kann sich gerne melden. Oder einfach einen Pull Request erstellen. Denn an der Stelle zeigt es sich, dass ich nicht wirklich programmieren kann.

Abschließend ist die Datei head.html an der Reihe.

{{ if or (not ( isset .Params "nocomments" )) ( ne .Params.nocomments true ) -}}
	<script data-isso="https://isso.fryboyter.de/" data-isso-feed="true" data-isso-css="false"
		data-isso-lang="{{.Site.Language.Lang }}" data-isso-max-comments-top="inf" data-isso-max-comments-nested="inf"
		data-isso-vote="false" data-isso-reply-notifications="true"
		src="https://isso.fryboyter.de/js/embed.min.js"></script>
	{{ end }}

Hier kommt unterm Strich die gleiche Abfrage wie für metadata.html zum Einsatz. Nur das in diesem Fall nicht die Anzeige der vorhandenen Kommentare ausgeblendet wird, sondern die Datei embed.min.js geladen wird oder eben nicht.

Das ganze Changeset kann man sich unter https://github.com/Fryboyter/Hugo/commit/5dfb4459aa7f9c8b08a21a9568d775808e290b49 ansehen.

Warum nun diese Änderung? Im Grunde aus zwei Gründen.

Zum einen schalte ich bereits jetzt weniger als 80 Prozent der Kommentare frei, da viele Kommentare nur SEO-Spam oder Kommentare sind, die nicht weiterhelfen. Daher auch die manuelle Freischaltung der Kommentare.

Das größere Problem ist aber, dass ich oft keine Lust oder Zeit habe Kommentare zeitnah freizuschalten, so dass diese oft Tage oder gar Wochen nicht angezeigt werden. Das nützt daher weder den Nutzern noch mir etwas. Daher verzichte ich im Zweifelsfall zukünftig lieber auf Kommentare Dritter.

OSBN | Allgemein

Front Matter - CMS für statische Website-Generatoren

Viele Nutzer entdecken für ihre Internetseiten immer öfter statische Website-Generatoren, da bei diesen der Wartungsaufwand im Vergleich zu beispielsweise WordPress sehr gering ist. Ich selbst nutze deswegen seit 2019 Hugo.

Um einen neuen Artikel anzulegen, starte ich VS Code, lege ein neues Verzeichnis unter content/posts an und kopiere bei Bedarf Bilder in dieses Verzeichnis, die in dem Beitrag angezeigt werden sollen. Danach erstelle ich die Datei index.md und erstelle in dieser mittels eines Snippet den Front-Matter-Bereich, den ich entsprechend anpasse. Unter diesen Bereich erstelle ich dann den eigentlichen Artikel. Abschließend werden diese Änderungen in ein Mercurial-Repository hochgeladen, was mittels eines Hooks den Inhalt von fryboyter.de erzeugt und die Änderungen zusätzlich mittels Hg-Git bei Github hochlädt.

An sich habe ich damit kein Problem. Es funktioniert. Und die Vorgänge kann ich inzwischen auswendig durchführen. Aber ab und zu wäre für mich etwas mehr Komfort trotzdem schön. Das gilt auch für Nutzer, die bei meinem “Workflow” schreiend wegrennen würden. Also vermutlich die meisten Nutzer.

Vor ein paar Tagen habe ich Front Matter entdeckt. Hierbei handelt es sich um eine Erweiterung für VS Code die ein CMS für diverse statische Website-Generatoren direkt in VS Code anbietet. Neben Hugo werden auch noch andere Generatoren wie beispielsweise Jekyll, Gatsby, 11ty, Hexo oder Next.js unterstützt.

Aus zeitlichen Gründen habe ich bisher die Erweiterung nur installiert und die Grundkonfiguration erstellt. Ausgehend davon muss ich aber sagen, dass Front Matter einige Dinge sehr vereinfacht bzw. bequemer macht. Wenn man sich die Dokumentation durchliest, sollten aber durchaus komplexere Dinge möglich sein. Ich würde daher jedem, der einen statischen Website-Generator und VS Code nutzt, raten sich Front Matter zumindest einmal anzusehen. Über den eigenen Tellerrand zu schauen ist ja oft nicht verkehrt.

OSBN

Änderung an der Suchfunktion

Letztes Jahr hatte ich in https://fryboyter.de eine Suchfunktion eingebaut, die DuckDuckGo nutzt. So wirklich glücklich war ich damit nie, da ich somit auf Dritte angewiesen bin.

Daher habe ich vor ein paar Tagen die Suchfunktion umgebaut. Über https://fryboyter.de/search/ bzw. über das Lupen-Symbol im Footer der Seite ist nun die neue Suchfunktion erreichbar die unabhängig von Dritten ist. Intern wird hierfür eine JSON-Datei erzeugt, die als Datenquelle dient. Mittels eines kleinen Java-Scripts lässt sich diese Datei durchsuchen. Wer also die Suchfunktion nutzen will, muss Javascript aktivieren. Zumindest bei genannten Link.

Einen kleinen Nachteil hat das ganze natürlich auch. Die JSON-Datei wird auf den Rechner des jeweiligen Nutzers heruntergeladen, da die Suche lokal erfolgt. Hierbei werden aktuell etwas mehr als 300 kB übertragen. In Anbetracht dessen, dass heutzutage viele Internetseiten an sich um ein Vielfaches größer sind und die Datei nur bei Aufruf des genannten Links heruntergeladen wird, finde ich die Datenmenge vertretbar.

Die Änderung basiert auf der Anleitung von https://weitblick.org/post/simple-static-site-search-hugo-jamstack/. Vielen Dank dafür.

OSBN | Allgemein