Hallo von Hugo

Warte… Wer ist Hugo?

Hugo ¹ ist ein Editor/Generator für statische Websites. D. h. die Inhalte der Website werden nicht bei jedem Aufruf dynamisch generiert (wie bei einem CMS wie Drupal, WordPress etc.) sondern nur einmal (lokal) und bleiben statisch.

Da bisher ebenfalls alle Inhalte statisch waren, besteht hier kein Unterschied. Der Vorteil ist, dass Hugo — in Abhängigkeit vom verwendeten Theme — hübsche, responsive Seiten generiert, die modern und minimalistisch aussehen. Gleichzeitig muss kein HTML-Code geschrieben werden sondern die einzelnen Dokumente werden mit Markdown geschrieben und „formatiert“ (s. weiter unten). Um den Rest kümmert sich Hugo.

Obwohl es die Funktionalität wohl schon länger gab, habe ich sie erst vor Kurzem entdeckt: Tags. Also tauchen bei manchen Beiträgen im Fußbereich Begriffe, die – wenn sie sich wiederholen – automatisch einen Kasten mit „Ähnliches“ genannten Links zu Artikeln erzeugen, die die gleichen Tags enthalten. Es erleichtert vielleicht irgendwann den Überblick.

Kurze Erklärung

Hugo ist ein Stück Software, das – plattformübergreifend ² – auf einem lokalen PC installiert wird und Texte, geschrieben mit sog. Markdown (also in einer vereinfachten Auszeichnungssprache mit Elementen wie z.B. **fett** für die Auszeichnung fett) in statische HTML-Dokumente sehr schnell umwandelt. Diese können dann wie üblich z.B. per (S)FTP auf den Webserver übertragen werden.
Eine Besonderheit ist ein integrierter Server, der über eine lokale Adresse (http://localhost:1313/) den fertig gerenderten Inhalt direkt darstellt, sodass man Formatierung und Aussehen direkt beurteilen und evtl. Fehler ausmerzen oder an Formulierungen feilen kann, bevor dann alles final an die Öffentlichkeit gelangt.

Wie üblich ist der Inhalt vom Layout entkoppelt, d.h. es werden CSS-basierte Themes verwendet. Auf der Projektseite werden diese in einer Galerie ³ aufgelistet, bei dieser Website heißt das Theme Ananke ⁴.

Fonts

Abweichend von den im Ananke-Theme verwendeten Schriften werden hier mit Hilfe von einer eigenen CSS-Datei teilweise andere Fonts eingesetzt:

• für den Fließtext die Faustina (http://scripts.sil.org/OFL)
  Copyright 2019 The Faustina Project Authors (https://github.com/Omnibus-Type/Faustina)
• für Überschriften und Zwischenüberschriften die Metropolis
  (https://fontsarena.com/metropolis-by-chris-simpson)

Es werden hier zwar Fonts verwendet, die von Google Fonts stammen (mit dem Google Webfonts Helper⁵ für das Eigen-Hosting vorbereitet) aber sie werden nicht von dort bei jedem Aufruf der Website heruntergeladen! Die WOFF2-Dateien werden nur von hier (also von https://gollum.name) auf den Rechner des Betrachters geladen und somit wird die IP-Adresse nicht an Google übermittelt.

Bilder

Im April 2024 habe ich alle Bilder, die auf dieser Website angezeigt werden in das WebP⁶-Format umgewandelt. Visuell die gleiche Qualität bei einer um mind. 1/3 geringeren Dateigröße im Vergleich zu JPEG.

Viel Vergnügen!

• Go
• Editor
• Hugo
• HTML
• OpenSource
• GNU/Linux
• Google Fonts