Hugo - Themes installieren

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).

Die Galerie mit den Hugo Themes

Ü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.

Detailansicht eines Hugo Themes

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.

Hugo Themes

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:

Purismo-Theme im Einatz

Share Kommentieren
X

Ich habe einen Kommentar zum Artikel

Sie können die Kommentarfunktion ohne die Speicherung personenbezogener Daten nutzen. Schreiben Sie Ihren Kommentar und klicken Sie auf "Abschicken", der Versand erfolgt per Mail von meinem Auftritt aus an mich zur Prüfung. Dieser Versand und die Übertragung Ihres Kommentars ist zur Erfüllung der von Ihnen mit dem Klick auf "Abschicken" ersichtlichen Absicht technisch notwendig und bedarf keiner weiteren Einwilligung.

Wichtiger Hinweis: Sie haben keinen Anspruch auf die Veröffentlichung Ihres Kommentars. Jeder hier eingegebene Kommentar wird zuerst geprüft. Ich behalte mir die Entscheidung vor, welche Kommentare ich als Ergänzung an den Artikel anfüge.