Hugo Update von 18 auf 75

Das war längst überfällig: das Update meiner Website von Hugo 18 auf Version 75!

Im Jahr 2016 hatte ich meine Wordpress Website getauscht gegen ein Hugo System.

Beim Aufbau seinerzeit hab ich die Anpassungen ziemlich brachial durchgeführt; diese hab ich nun - zusammen mit dem Update von Version 18 auf 75(!) - bereinigt und deutlich vereinfacht. Und außerdem hab ich das Casper-Theme durch das Casper-Two getauscht, welches die Post-Lists etwas hübscher darstellt.

Manuelle Minifizierungen der Bilder

Ich bin ein Freund davon, die Bilder der Artikel in der Originalgröße zu verwalten und über separate Tools dann auf die richtige Größe zuzuschneiden. Das ist besser als die Bilder in der Größe des Themes aus Lightroom zu exportieren, denn bei einer Anpassung der Website-Templates muss ich dann alle Bilder in LR suchen, erneut exportieren und an die richtigen Stellen schieben….

Seinerzeit hatte ich mir dafür ein separates Tool gebastelt; das geht natürlich auch, bedeutete aber separate Software, ein eigens build-Environment u.s.w.

Aber nun kann Hugo die Bilder minifizieren; Ich hab mir für die Bilder ein Hugo Shortcode gebastelt, dass ich wie folgt aufrufe:

Der Shortcode sieht etwa so aus:

1
2
3
4
5

{{ $img := $.Page.Resources.Match (printf "*%s*" (.Get 0)) }}
{{ range $img }}
{{ $f := .Resize "900x" }}
<img src="{{ $f.RelPermalink }}" />
{{ end }}

und aufgerufen in der Datei des eigentlichen Posts dann so:

1

{{ <image "20200523-IMG_1903.jpg">}}

Leider kann man in Hugo nicht direkt auf das Image Objekt zugreifen, sondern muss es immer in einem Iterator machen -> deswegen die range-Loop. Funktionieren tut das übrigens nur mit Page Resources, d.h. mit Bildern, die sich im selben Ordner befinden wie die Page. Dies wiederum bedeutet, dass ich die ganze Struktur der Posts und Bilder überarbeiten musste.

Restrukturierung Posts und Bilder

Seinerzeit lagen alle Posts flach im content/post Verzeichnis; die Bilder lagen separat im static Ordner. Ich hab mir für die Migration ein paar Scripten gebaut, die mir das umgebaut haben; jetzt gibt es für jeden Post einen Ordner (und diese liegen in Jahresordnern); in diesem Post-Ordner liegen dann auch alle Page Resources (Bilder):

1
2
3
4
5
6
7

% ls -l content/post/2020/gartenbank-bauen/
total 65368
-rw-r--r--  1 huettemann  staff  9211972 24 Mai  2020 20200516-IMG_0788.jpg
-rw-r--r--  1 huettemann  staff  7876212 24 Mai  2020 20200523-IMG_1903.jpg
-rw-r--r--  1 huettemann  staff  8808806 24 Mai  2020 20200523-IMG_3637.jpg
-rw-r--r--  1 huettemann  staff  6405300 24 Mai  2020 20200523-IMG_3645.jpg
-rw-r--r--  1 huettemann  staff     5390 11 Aug 08:30 index.md

Nach dem Bauen durch Hugo werden dann durch das Resize die Bilder im public (=“destination”) tree zugefügt:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

% ls -l public/post/2020/gartenbank-bauen
total 71808
-rw-r--r--  1 huettemann  staff  9211972  7 Jan 20:09 20200516-IMG_0788.jpg
-rw-r--r--  1 huettemann  staff   240747 20 Sep 12:50 20200516-IMG_0788_hu0411aaefbe92bd5e2c03c47f0de47bb2_9211972_900x0_resize_q75_box.jpg
-rw-r--r--  1 huettemann  staff  7876212  7 Jan 20:09 20200523-IMG_1903.jpg
-rw-r--r--  1 huettemann  staff   138849 20 Sep 12:50 20200523-IMG_1903_hu3353c8d4bdb0fadb7f47955254521edb_7876212_900x0_resize_q75_box.jpg
-rw-r--r--  1 huettemann  staff  8808806  7 Jan 20:09 20200523-IMG_3637.jpg
-rw-r--r--  1 huettemann  staff   145084 20 Sep 12:50 20200523-IMG_3637_hu19cfc3c4fce061cdd6d24a74f1f5c51f_8808806_900x0_resize_q75_box.jpg
-rw-r--r--  1 huettemann  staff  6405300  7 Jan 20:09 20200523-IMG_3645.jpg
-rw-r--r--  1 huettemann  staff   134441 20 Sep 12:50 20200523-IMG_3645_huf82089beabcf6a578810f776470852ee_6405300_900x0_resize_q75_box.jpg
-rw-r--r--  1 huettemann  staff    19210  7 Jan 20:09 index.html

Beim Resizing können noch einige weitere Optionen angegeben werde; zudem ist es auch möglich Exif-Daten auszulesen; Siehe https://gohugo.io/content-management/image-processing/.

Auf dieselbe Weise resize ich dann noch die Bilder für den Kopfbereich, sowie für die Post Lists.

GPX Gedöns entfernt

Im alten System hatte ich auf einer eigenen Google Map Anwendung meine Tracks dargestellt. Da die Tracks meiner Radtouren zu groß sind um sie im Browser per JavaScript zu verarbeiten, hab ich sie vorher ausgedünnt.

Da ich nunmehr alle Touren bei Komoot ablege, spare ich mir die Mühe. Meine Spezialkarten, auf denen ich alle meine Touren gleichzeitig anzeige, hab ich die Komoot Collections ersetzt. Also entfällt der ganze Kram der manuellen GPX Verarbeitung.

Zusammenfassung

Durch den Umbau hab ich deutlich weniger Code, und erspare mir eine separate Build Chain. Die Posts liegen nach Jahren aufgeräumt mit den zugehörigen Bildern in eigenen Ordnern, und an Stelle eines Makefiles genügt jetzt ein

% hugo 

Leider klappt es dafür mit dem automatischen Deployment nicht, denn leider funktionieren die Pfade der resizten Bilder nicht auf dem Server (der .Permalink liefert falsche Pfade). Deswegen generiere ich jetzt die Site lokal auf meinem Mac und schiebe das dann auf den Server.