Einleitung

Durch Zufall bin ich auf das Framework Hugo gestossen und habe einen groben Überblick verschafft. Schnell habe ich mich dazu entschlossen, meinen alten Wordpress Blog zu migrieren. Ein CMS mit all den Funktionen ist für mich nicht notwendig und die Simpelkeit von Hugo macht das schnelle Erstellen einer Webseite sehr leicht.

Erste Schritte

Das Hugo Theme m10c gefällt mir sehr gut. Die Installation war sehr einfach und ich konnte bereits erste Seiten mit der Markup-Syntax erstellen.

Erste Optimierungen

Schnell wurde mir klar, dass ich die Bildgrösse selber reduzieren muss. Hugo bietet viele verschiedene Funktionen wie die Bildmanipulation. Mithilfe von Shortcodes habe ich mir die automatische Verkleinerung der Bilder automatisiert. Somit sind die Bilder alle einheitlich breit und die Speichergrösse wird reduziert, um die Ladezeiten möglichst gering zu halten.

{{ $src := .Get "src" }}
{{ $alt := .Get "alt" | default "" }}
{{ $img := resources.Get $src }}
{{ $processed := $img.Resize "800x q85 webp" }}
<figure style="margin:auto;width:70%">
    <img src="{{ $processed.RelPermalink }}" alt="{{ $alt }}">
    <p style="font-size: smaller;">{{ $alt }}</p>
</figure>