Blog ist nun auf Hugo umgestellt

April 16, 2020

Mein Wechsel zu Hugo

Tja, der nächste Wechsel stand an.

Warum?

Gute Frage.

Ich wollte meine Hauptseite im selben Stil wie meinen Blog gestalten und war auf der Suche nach einem schönen Design für diesen doppelten Zweck: Blog-Seite und eine kurze Vorstellung mit beruflichen und wenigen privaten Daten.

Ich wollte kurz darstellen,

  • was ich beruflich gemacht habe
  • meinen CV hinterlegen und
  • auf meine Social-Media-Seiten unter
    • Xing
    • LinkedIn
    • GutHub (to be done)
    • Twitter

verlinken.

Privat wollte ich dort auf meinen Mastodon-Account hinweisen können und meine Hobbies und ähnliches nennen.

Viele Designs (Themes) für viele unterschiedlichste Zwecke

Als ich mal bei hugo vorbeigesurft bin, fand ich dort einige schöne Theme-Vorschläge.

Ich habe mich schlußendlich für aafu des Autors Darshan Baral entschieden, weil ich dort nur wenig Anpassungsarbeit an meine eignen Wünsche gesehen habe.

Installation

Aus dem Standard-Ubuntu-Repo und per apt-get bekam ich nicht die aktuellste Version von Hugo, die das von mir gewählte Theme als Grundlage benötigte.

Um Hugo zu installieren, bin ich daher den Weg über die Hugo-Site zum Thema Installieren gegangen: https://gohugo.io/getting-started/installing.

Dort gibt es für meinen Fall (Linux-System und neuest mögliche Hugo-Version) die Variante Installation per Tarball-File: https://github.com/gohugoio/hugo/releases .

Das hat genauso geklappt wie dort beschrieben.

Neue Site lokal anlegen

Auf meinem Tuxedo-Notebook “lebt” meine Site unter /home/dgr/website/hugo

In dieses Verzeichnis bin ich dann gewechselt und habe

hugo new site dgruen.de eingegeben.

Dadurch wird ein Site-Grundgerüst mit Verzeichnissen und Testdaten angelegt.

Theme herunterladen

Nun musste ich nur noch das gewählte Theme clonen. Also wechselt man in das /themes-Verzeichnis der angelegten Site und lädt per git clone das Theme herunter.

In meinem Fall also:

git clone https://github.com/darshanbaral/aafu.git

Server lokal starten und prüfen

Das Beispiel - sprich die Beispiel Content Daten - habe dann getestet und zwar mit dem Befehl: hugo server

Man öffnet dann seinen Lieblingsbrowser mit https://localhost:1313 und kann sich das Ergebnis direkt ansehen.

Man kann sogar den Content oder die Config-Dateien anpassen und diese Änderungen werden dann direkt im Browser angezeigt. da sich die Site nach jeder lokalen Anpassung aktualisiert.

Anpassungen

In meinem Fall musste ich die lediglich Dateien config.toml und header.html an meine Wünsche anpassen.

In der toml-Datei musste ich alle Einträge anpassen und auch Dinge umstrukturieren, aber anhand der Beispieldaten in der Datei findet man sich dort gut zu recht.

Um das Impressum auf der Startseite erscheinen zu lassen, habe ich neben dem Verzeichnis “blog” ein Verzeichnis “impressum” angelegt.

Dort habe ich dann die Impressum-Seite einkopiert und musste nur noch die Datei header.html so erweitern, dass sie direkt diese Datei aufruft und nicht wie blog-üblich erst eine Übersichtsseite aller Blogbeiträge - in diesem Falle den einen Impressumseintrag - anzeigt.

Die Datei header.html liegt unter ./layouts/partials

Dort habe ich einen neuen Menüpunkt und den zugehörigen href-Eintrag zugefügt:

<h3 class="main-menu mr-3">
   <a href="{{ "impressum/impressumtxt/" | relURL }}">Impressum</a>
</h3>

Als Hauptbild habe ich dann ein Foto von mir, das meine Frau in Barcelona von mir geschossen hat, an die richtige Stelle im Verzeichnisbaum kopiert: /static/images/profile.jpg.

Die fav-Icons mussten noch angepasst und anstatt der Testblogdaten meine bestehenden Blogeinträge umkopiert werden. Als Icons habe ich einfach eine verkleinerte Version des Hauptfotos auf der Site verwendet.

Die Links zu meinen Socialmediaseiten konnte ich ebenso wie die allgemeinen beruflichen und privaten Daten einfach in die config.toml-Datei eintragen.

Das war im Prinzip der Übergang meines Blogs und die Erstellung meiner Homepage mittels Hugo.