Themes für Hugo installieren
Hugo ist eine wirklich hervorragende Software – kein Zweifel. Was sich das Entwickler-Team aber dabei gedacht hat,
für die Installation von Themes einfach mal voraus zu setzen, dass sich jeder am Bloggen Interessierte blind mit git
umgehen kann, kann ich einfach nicht verstehen. Hier zeigt sich wieder, dass Entwickler nicht unbedingt in die Rolle
von Anwendern schlüpfen können. Will ich ein Thema für Hugo entwickeln, ist der Einsatz einer Versionverwaltung
(was heute de facto git
heißt) völlig verständlich. Will ich aber nur ein Theme für mein Blog nutzen, dann ist
das mit Raketen auf Spatzen schießen. Niemand braucht dafür git
— auf der Website findet sich dann aber auch
keinerlei Anleitung für Einsteiger, wie ich dann an mein Theme komme …
Dieser Artikel soll diese Information liefern und es Ihnen ermöglichen, auf einfache Art und Wiese ein Theme für Hugo zu installieren. Als Zugabe gibt es am Ende des Artikels noch einen Link für ein sehr datensparsames, DSGVO-orientiertes (or GDPR, for our english-speaking readers) Minimal-Theme für einen lecihten Start ins Blogging mit Hugo.
Das gewünschte Theme finden
In der Hugo Themes Galerie finden Sie eine Auflistung aller Themes, die in dieser zentralen Galerie bagelegt sind. Natürlich gibt es darüber hinaus sicherlich noch eine ganze Reihe von Themes, die hier nicht zu finden sind, aber die Auswahl sollte doch ausreichen (s. Screenshot).
Über die Tags auf der rechten Seite können Sie die Liste noch nach verschiedenen Kriterien filtern. Wenn Ihnen ein bestimmtes Theme gefällt, klicken Sie auf die Abbildung und Sie erhalten die Detailansicht, wie im nachfolgenden Screenshot gezeigt.
Das Theme-ZIP herunterladen
Möchten Sie nun ein Theme installieren (_für meinen Artikel verwende ich das Theme “Hyde-X” aus dem Screenshot), finden Sie auf der Detailseite des Themes links unten einen Button [Download]. Wenn Sie da klicken, werden Sie auf die Homepage des Themes umgeleitet (in nahezu allen Fällen ist das ein github.com-Auftritt (oder gitlab.com).
Keine Angst, Sie brauchen von der Seite nur eine Schaltfläche, wo Sie das Theme als .zip-Datei herunterladen können. Der folgende Screenshot zeigt die github-Seite und die Schaltfläche für den Download habe ich markiert.
Wen Sie die grüne Schaltfläche [Clone or Download]
anklicken, öffnet sich eine kleine Dialogbox (s. Abbildung rechts).
Ignorieren Sie alles ausser dem Button, der mit “Download ZIP” beschriftet ist. 😏
Genau den brauchen wir und nach einem Klick beginnt Ihr Browser mit dem Download einer ZIP-Datei, die das Theme enthält.
Theme auspacken und “installieren”
Themes in Hugo werden in einen eigenem Ordner unterhalb des Ordners themes
in
Ihrem Hugo-Basisordner abgelegt. Der Hugo-Basisordner ist der Ordner, den Sie für Ihr Blog angelegt haben.
Weitere Informationen finden Sie im ersten Teil der Posts zum Thema Hugo.
Entpacken Sie nun die heruntergeladene .zip-Datei und kopieren oder verschieben Sie den Ordner unter den Ordner themes
.
Ein Schritt ist jetzt noch zu tun, der mit der Versionsverwaltung git
zu tun hat: Sie müssen den Ordner umbenennen.
Nehmen wir an, Sie haben das Theme “Hyde-X” heruntergeladen. Dann haben Sie eine Datei hyde-x-master.zip
erhalten.
Wenn Sie die auspacken, erhalten Sie einen Ordner mit dem Namen hyde-x-master
. Das “-master
” muss weg (wieso und
warum sind Details zu git
– wenn Sie wirklich lesen wollen, was das ist: hier steht’s). Benennen Sie also die Ordner eines heruntergeladenen Themes immer so um, dass das -master
entfernt wird.
Liegt Ihr Blog im Ordner c:\hugo\katzen-hueten
, dann sollte das Theme aus unserem Beispiel im Ordner
c:\hugo\katzen-hueten\themes\hyde-x
liegen.
In diesem Ordner finden Sie auch für jedes Theme eine Datei README.md
mit den Hinweisen zur Konfiguration und den
in der zentralen Konfigurationsdatei config.toml
möglichen Einstellungen. Ab hier unterscheiden sich die einzelnen
Themes in ihren Optionen, aber diese Informationen finden Sie in der README.md
.
Zumindest hoffe ich, dass Sie jetzt beruhigt das eine oder andere Theme ausprobieren und keine Angst haben, auch wenn
alle immer davon schreiben, irgendwas mit git
zu machen. :-)
Moment! Und das “Bonus-Theme”?
Stimmt. Hatte ich Ihnen ja versprochen. :-)
Also dann: Sie finden die Homepage des Themes hier: https://gitlab.com/DerLinkshaender/purismo-theme/. Dies ist mein erster Versuch, ein Theme für Hugo zusammen zu klauen selbst zu bauen. Details zur Konfiguration liegen
in der Datei CONFIG.md im Repository.
Und der direkte Link für den Download der ZIP-Datei ist hier. Das Thema wurde mit dem strikten Fokus auf Datensparsamkeit, DSGVO und lokalen Ressourcen entworfen. Alles auf dem eigenen Webspace und möglichst keine Abhängigkeiten, keine Cookies – alles sauber. Dennoch ein Theme mit responsive Design (Danke an Calin Tataru!) und Mobiltauglichkeit. Hier ein Screenshot auf Desktop/Tablet quer bzw. auf dem Smartphone: