Hugo ist ein Generator für statische Seiten (SSG), der in Go (auch bekannt als Golang) geschrieben ist, einer leistungsstarken kompilierten Programmiersprache, die häufig für die Entwicklung von Backend-Anwendungen und -Diensten verwendet wird.
Heute ist Hugo in der Lage, die meisten Webseiten innerhalb von Sekunden zu erstellen (<1 ms pro Seite). Das erklärt, warum Hugo sich selbst als „das schnellste Framework der Welt für die Erstellung von Webseiten“ bezeichnet.
In diesem Artikel werfen wir einen Blick auf die Geschichte von Hugo, was es so schnell macht und wie Sie Ihre eigene statische Seite mit Hugo erstellen können.
Was ist Hugo? Und warum ist es so populär?
Steve Francia entwickelte den Hugo Generator für statische Seiten im Jahr 2013 und Bjørn Erik Pedersen übernahm 2015 die Leitung des Projekts. Hugo ist ein Open-Source-Projekt, das heißt, sein Code kann von jedem eingesehen und verbessert werden.
Als Generator für statische Seiten nimmt Hugo Markdown-Inhaltsdateien, lässt sie durch Themes-Templates laufen und spuckt HTML-Dateien aus, die du ganz einfach online stellen kannst – und das alles extrem schnell.
Im Jahr 2021 gibt es Dutzende, wenn nicht Hunderte von statischen Generatoren. Jeder Generator für statische Seiten hat seinen Reiz. Jekyll ist bei Ruby-Entwicklern sehr beliebt, und obwohl es nicht so schnell ist wie andere Optionen, war es einer der ersten Generatoren für statische Seiten, der weit verbreitet wurde. Gatsby ist ein weiterer beliebter SSG, der sich gut für die Entwicklung von statisch einsetzbaren Seiten mit dynamischen Funktionen eignet.
Was hebt Hugo bei so vielen SSGs auf dem Markt ab?
Hugo ist schnell
Was die reine Leistung angeht, ist Hugo der beste Generator für statische Seiten der Welt. Forestry hat gezeigt, dass Hugo im Vergleich zu Jekyll 35 Mal schneller ist. Außerdem kann Hugo eine 10.000-seitige Seite in 10 Sekunden rendern – eine Aufgabe, für die Gatsby über eine halbe Stunde brauchen würde. Hugo ist nicht nur die schnellste SSG in Bezug auf die Erstellungszeiten, sondern auch schnell zu installieren.
Im Gegensatz zu Jekyll, Gatsby und anderen SSGs, die über einen Paketmanager installiert werden müssen, wird Hugo als eigenständige ausführbare Datei geliefert. Das bedeutet, dass du Hugo sofort herunterladen und benutzen kannst, ohne dich um Software-Abhängigkeiten kümmern zu müssen.
Templates erstellen ist in Hugo ganz einfach
Im SSG-Jargon bezeichnet „Template“ das Hinzufügen von Platzhaltern für dynamische Inhalte auf einer HTML-Seite. Um auf den Titel einer Seite zuzugreifen, kannst du die Variable {{ .Title }} verwenden. In einem HTML-Template von Hugo werden die {{ .Title }} also häufig in H1-Tags eingeschlossen, etwa so:
<h1>{{ .Title }}</h1>Zur Erstellungszeit erfasst Hugo automatisch den Titel in einer Inhaltsdatei und fügt ihn zwischen den beiden <h1>-Tags ein. Hugo verfügt über eine Vielzahl von eingebauten Template-Variablen, und du kannst sogar eigene Funktionen schreiben, um Daten zur Build-Zeit zu verarbeiten. Für die Erstellung von Templates nutzt Hugo die in Go integrierten Bibliotheken html/template und text/template. Das hilft dabei, die Anwendung zu entschlacken, da Hugo keine Bibliotheken von Drittanbietern für Templates installieren muss.
Wie man Hugo installiert
Hugo wird als kompilierte ausführbare Datei ausgeliefert. Das bedeutet, dass du nicht viele Abhängigkeiten herunterladen und verwalten musst, nur um loszulegen. Es ist für macOS, Windows und Linux verfügbar.
So installierst du Hugo auf macOS und Linux
Die empfohlene Installationsmethode für macOS und Linux erfordert Homebrew, einen Paketmanager für die Installation und Aktualisierung von Anwendungen. Wenn du Homebrew noch nicht installiert hast, kannst du es installieren, indem du den folgenden Befehl im Terminal ausführst:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"Nachdem du Homebrew installiert hast, führe den folgenden Befehl aus, um Hugo zu installieren:
brew install hugoSo installierst du Hugo unter Windows
Windows-Benutzer können Hugo entweder mit den Paketmanagern Chocolatey oder Scoop installieren. Da die Anweisungen für die Installation von Chocolatey und Scoop etwas komplexer sind als die von Homebrew, empfehlen wir, die offiziellen Dokumentationsseiten hier und hier zu lesen.
Nachdem du entweder Chocolatey oder Scoop installiert hast, kannst du Hugo mit einem der folgenden Befehle installieren (je nach Paketmanager):
choco install hugo-extended -confirmscoop install hugo-extendedSo überprüfst du, ob Hugo richtig installiert ist
Um zu überprüfen, ob Hugo korrekt installiert wurde, führe den folgenden Befehl aus:
hugo versionDieser Terminal-Befehl sollte Informationen über die aktuell installierte Version von Hugo wie folgt ausgeben:
hugo v0.85.0+extended darwin/arm64 BuildDate=unknown
Hugo-Befehle und Konfiguration
Bevor wir uns daran machen, eine statische Seite mit Hugo zu erstellen, sollten wir uns mit den verschiedenen CLI-Befehlen und Konfigurationsdateiparametern vertraut machen.
Hugo CLI Commands
hugo check– führt verschiedene Überprüfungen durchhugo config– zeigt die Konfiguration für eine Hugo Seite anhugo convert– konvertiert Inhalte in verschiedene Formatehugo deploy– stellt deine Seite bei einem Cloud-Anbieter bereithugo env– zeigt die Hugo Version und Umgebungsinformationen anhugo gen– bietet Zugang zu verschiedenen Generatorenhugo help– zeigt Informationen zu einem Befehl anhugo import– lässt dich eine Seite von einem anderen Ort importierenhugo list– zeigt eine Liste mit verschiedenen Inhaltstypen anhugo mod– bietet Zugang zu verschiedenen Modulhelfernhugo new– ermöglicht es dir, neue Inhalte für deine Seite zu erstellenhugo server– startet einen lokalen Entwicklungsserverhugo version– zeigt die aktuelle Hugo-Version an
Das Hugo CLI hat auch eine Reihe von Flags, mit denen du zusätzliche Optionen für einige Befehle angeben kannst. Um eine vollständige Liste der Hugo-Flags zu sehen (es gibt eine Menge davon), empfehlen wir dir, den Befehl hugo help zu verwenden, um eine Liste aller verfügbaren Flags anzuzeigen.
Die Hugo-Konfigurationsdatei
Die Konfigurationsdatei von Hugo unterstützt drei Formate: YAML, TOML und JSON. Entsprechend heißt die Hugo-Konfigurationsdatei config.yml, config.toml oder config.json und ist im Stammverzeichnis eines Hugo-Projekts zu finden.
Hier siehst du, wie eine typische Hugo-Konfigurationsdatei im YAML-Format aussieht:
DefaultContentLanguage: en
theme:
- kinsta-static-site
contentdir: content
layoutdir: layouts
publishdir: public
paginate: 5
title: Kinsta Static Site
description: "This is a static site generated with Hugo!"
permalinks:
post: :slug/
page: :slug/
tags: "tag/:slug/"
author: "author/:slug/"Wenn du bereits WordPress oder ein anderes CMS benutzt hast, werden dir einige der Konfigurationsoptionen bekannt vorkommen. Zum Beispiel ist kinsta-static-site der Name des Themes der Seite, Kinsta Static Site ist der SEO-Meta-Titel und paginate (die Anzahl der Beiträge pro Seite) ist 5.
Hugo hat Dutzende von Konfigurationsoptionen, die du in der offiziellen Hugo-Dokumentation entdecken kannst. Wenn du bei der Entwicklung einer Hugo Seite eine globale Konfigurationsänderung vornehmen musst, ist es wahrscheinlich, dass du diese Konfigurationsdatei bearbeiten musst.
Wie man eine Hugo-Seite erstellt
Nachdem wir nun die Installation und Verwendung der Hugo CLI und die Grundlagen der Hugo-Konfigurationsdatei kennengelernt haben, wollen wir eine neue Hugo-Seite erstellen.
Um eine Hugo-Seite zu erstellen, benutze den folgenden Befehl (du kannst my-hugo-site auch in etwas anderes ändern):
hugo new site my-hugo-site
Als Nächstes navigierst du zum Webseiten-Ordner und siehst dort die folgenden Dateien und Ordner: config.toml-Datei, Archetypes-Ordner, Content-Ordner, Layout-Ordner, Themes-Ordner, Data-Ordner und Static-Ordner. Schauen wir uns kurz an, worum es sich bei diesen Dateien und Ordnern handelt.
Die Datei config.toml von Hugo
Wie bereits erwähnt, enthält Hugos wichtigste Konfigurationsdatei die globalen Einstellungen für deine Seite.
Hugos Archetypes-Ordner
Im Ordner archetypes speicherst du die in Markdown formatierten Templates für deine Inhalte. Archetypen sind besonders nützlich, wenn deine Seite mehrere Inhaltsformate hat. Mit Hugo Archetypen kannst du für jeden Inhaltstyp auf deiner Seite ein Template erstellen. So kannst du die generierten Markdown-Dateien mit allen notwendigen Konfigurationseinstellungen vorbefüllen.
Wenn du zum Beispiel einen Podcast-Inhaltstyp für die Anzeige deiner Podcast-Episoden hast, kannst du in archetypes/podcast.md einen neuen Archetyp mit dem folgenden Inhalt erstellen:
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
description: ""
season:
episode:
draft: true
---Mit diesem Podcast-Archetyp kannst du dann den folgenden Befehl verwenden, um einen neuen Beitrag zu erstellen:
hugo new podcast/s1e6_interview-with-kinsta-ceo.mdWenn du jetzt den neu erstellten Beitrag öffnest, solltest du das hier sehen:
---
title: "Interview with Kinsta CEO"
date: 2021-05-20T13:00:00+09:00
description: ""
Season: 1
episode: 6
draft: true
---Ohne Archetypen müsstest du die Frontmate-Parameter für jeden neuen Beitrag, den du erstellst, manuell festlegen. Auch wenn Archetypen auf den ersten Blick kompliziert und unnötig erscheinen, können sie dir auf lange Sicht eine Menge Zeit sparen.
Hugo’s Content Ordner
Der content Ordner ist der Ort, an dem der eigentliche Inhalt deines Beitrags gespeichert wird. Hugo unterstützt sowohl das Markdown- als auch das HTML-Format, wobei Markdown aufgrund seiner Benutzerfreundlichkeit die beliebteste Option ist. Der Inhaltsordner dient nicht nur als allgemeiner Speicherplatz für Beiträge, sondern du kannst ihn auch nutzen, um den Inhalt deiner Beiträge weiter zu organisieren.
Hugo behandelt jedes oberste Verzeichnis im content Ordner als einen Inhaltsabschnitt. Inhaltsabschnitte in Hugo sind vergleichbar mit benutzerdefinierten Beitragstypen in WordPress. Wenn deine Seite zum Beispiel aus Beiträgen, Seiten und Podcasts besteht, enthält dein Inhaltsordner die Verzeichnisse posts, pages und podcasts, in denen die Inhaltsdateien für die verschiedenen Beitragstypen gespeichert werden.
Hugo’s Layouts Ordner
Der Ordner „Layouts“ enthält HTML-Dateien, die die Struktur deiner Seite definieren. In manchen Fällen kann es vorkommen, dass eine Hugo-Seite ohne Layout-Ordner auskommt, weil dieser nicht im Stammverzeichnis des Projekts liegen muss, sondern in einem Theme-Ordner.
Ähnlich wie WordPress Themes, die PHP für Templates verwenden, bestehen Hugo-Templates aus Basis-HTML und zusätzlichen dynamischen Templates, die von den in Golang integrierten Bibliotheken html/template und text/template unterstützt werden. Die verschiedenen HTML-Templates, die für die Erstellung des HTML-Markups deiner Seite benötigt werden, befinden sich im Ordner layouts.
Hugo’s Themes Ordner
Für Seiten, die eine eigenständige Speicherung von Templates und Assets bevorzugen, unterstützt Hugo einen Themes-Ordner. Hugo-Themes ähneln den WordPress-Themes, da sie in einem Themes-Verzeichnis gespeichert werden und alle notwendigen Templates enthalten, damit ein Theme funktioniert.
Manche Hugo-Benutzer/innen bevorzugen es, themenbezogene Dateien im Stammverzeichnis des Projekts zu speichern, aber die Ablage im Themes-Ordner erleichtert die Verwaltung und den Austausch.
Hugo Data Ordner
Im data Ordner von Hugo kannst du zusätzliche Daten (im JSON-, YAML- oder TOML-Format) speichern, die du für die Erstellung der Seiten deiner Website brauchst. Datendateien sind vorteilhaft für größere Datensätze, die sich nur schwer direkt in einer Inhalts- oder Template-Datei speichern lassen.
Wenn du z. B. eine Liste der USD-Inflationsraten von 1960 bis 2020 erstellen möchtest, bräuchtest du etwa 80 Zeilen, um die Daten darzustellen (eine Zeile für jedes Jahr). Anstatt diese Daten direkt in einer Content- oder Template-Datei zu speichern, kannst du sie im data Ordner anlegen und mit den nötigen Informationen füllen.
Hugo Static Ordner
Im static Ordner von Hugo speicherst du statische Dateien, die keine weitere Verarbeitung benötigen. Im static Ordner speichern Hugo-Benutzer in der Regel Bilder, Schriftarten, DNS-Verifizierungsdateien und mehr. Wenn eine Hugo-Seite erstellt und in einem Ordner gespeichert wird, werden alle Dateien im static Ordner so kopiert, wie sie sind.
Wenn du dich fragst, warum wir JavaScript- oder CSS-Dateien nicht erwähnt haben, liegt das daran, dass sie bei der Entwicklung einer Seite oft dynamisch über Pipelines verarbeitet werden. In Hugo werden JavaScript- und CSS-Dateien in der Regel im Theme-Ordner gespeichert, da sie eine zusätzliche Verarbeitung erfordern.
Wie man ein Theme zu einer Hugo-Seite hinzufügt
Das Herunterladen und Installieren eines vorgefertigten Themes ist eine gute Möglichkeit, um mit Hugo zu starten. Hugo-Themes gibt es in allen Formen und Größen, und viele von ihnen sind im offiziellen Hugo-Theme-Repository kostenlos erhältlich. Installieren wir das beliebte Theme Hyde auf unserer Hugo Seite.
Navigiere zunächst im Terminal zum Theme-Ordner deines Projekts:
cd <hugo-project-directory>/themes/Als Nächstes klonst du das Hyde Theme mit Git in das Themes-Verzeichnis deines Projekts.
git clone https://github.com/spf13/hyde.gitAls Nächstes fügst du die folgende Zeile in deine config.toml-Datei ein, um das Hyde Theme zu aktivieren:
theme = "hyde"Jetzt ist das Hyde Theme installiert und konfiguriert. Als Nächstes musst du den in Hugo integrierten Entwicklungs-Webserver starten, um die Seite in deinem Webbrowser anzuzeigen.
Wie man eine Vorschau einer Hugo-Seite anzeigt
Hugo wird mit einem integrierten Webserver für Entwicklungszwecke geliefert. Das bedeutet, dass du keinen Webserver eines Drittanbieters wie Nginx oder Apache installieren musst, um deine Seite lokal anzuzeigen.
Um Hugos Webserver zu starten, führe den folgenden Befehl im Stammverzeichnis deines Projekts aus:
hugo server -DHugo erstellt dann die Seiten deiner Webseite und stellt sie unter http://localhost:1313/ zur Verfügung:
Wenn du die URL in deinem Webbrowser aufrufst, solltest du deine Hugo Seite mit dem Hyde Theme sehen:
Standardmäßig überwacht Hugos lokaler Entwicklungsserver alle Änderungen und baut die Seite automatisch neu auf. Da Hugo so schnell baut, werden Aktualisierungen deiner Seite fast in Echtzeit angezeigt – etwas, das man in der Welt der statischen Webseiten-Generatoren nur selten sieht. Um das zu demonstrieren, erstellen wir unseren allerersten Beitrag in Hugo.
Hinzufügen von Inhalten zu einer Hugo-Seite
Das Hinzufügen von Inhalten zu einer Hugo-Seite unterscheidet sich stark von einem vollwertigen CMS wie WordPress oder Ghost. Bei Hugo gibt es keine eingebaute CMS-Ebene zur Verwaltung deiner Inhalte. Stattdessen wird von dir erwartet, dass du die Dinge so verwaltest und organisierst, wie du es für richtig hältst.
Mit anderen Worten: Es gibt keinen explizit „richtigen“ Weg, Inhalte in Hugo zu verwalten. In diesem Abschnitt stellen wir dir eine Methode zum Hinzufügen und Verwalten von Inhalten vor, aber du kannst sie gerne ändern, wenn du dich mit Hugo besser auskennst.
Inhaltsabschnitte in Hugo
Das erste Werkzeug zur Organisation von Inhalten, das dir in Hugo zur Verfügung steht, ist der Inhaltsbereich. Ein Inhaltsbereich in Hugo ist ähnlich wie ein Beitragstyp in WordPress – du kannst ihn nicht nur als Inhaltsfilter verwenden, sondern auch als Bezeichner bei der Erstellung von benutzerdefinierten Themes.
Wenn du z.B. einen Ordner für den Blog-Inhaltsbereich hast, kannst du darin alle deine Blogbeiträge speichern und ein bestimmtes Template für die Seite erstellen, das nur für Blogbeiträge gilt.
Wie man Beiträge in Hugo hinzufügt
Legen wir also einen Inhaltsbereich für Blogbeiträge an und fügen ein paar Inhalte hinzu. Erstelle im Inhaltsordner deines Projekts einen neuen Ordner namens posts – das ist der Inhaltsbereich.
Legen wir eine weitere Organisationsebene innerhalb des Ordners posts an, indem wir einen Ordner 2021 erstellen. Zu diesem Zeitpunkt sollte dein Inhaltsverzeichnis so aussehen:
Lass uns nun unseren ersten Beitrag erstellen. Wie wir bereits besprochen haben, unterstützt Hugo sowohl Markdown- als auch HTML-Dateien für Inhalte. Im Allgemeinen ist es besser, sich an Markdown-Dateien zu halten, weil sie einfacher zu schreiben, zu formatieren und zu lesen sind.
Erstelle im Ordner content/posts/2021 eine neue Datei, die auf .md (die Markdown-Dateierweiterung) endet. Du kannst die Datei benennen, wie du willst, aber die empfohlene Syntax für die Benennung einer Hugo-Inhaltsdatei ist YYYY-MM-DD-a-sample-post.md.
Zusätzlich zur manuellen Erstellung einer Inhaltsdatei kannst du auch das Hugo CLI verwenden, um einen neuen Beitrag mit dem folgenden Befehl zu erstellen (achte darauf, dass du den Befehl in deinem Projektverzeichnis ausführst):
hugo new posts/2021/2021-08-30-a-sample-post.mdBeachte, dass der Inhaltsordner im obigen Pfad fehlt. Das liegt daran, dass Hugo davon ausgeht, dass alle Inhaltsdateien standardmäßig in den Content-Ordner verschoben werden.
Wenn du die neu erstellte Content-Datei öffnest, solltest du ein paar Zeilen Metadaten am Anfang des Dokuments sehen, die in etwa so aussehen:
---
title: "2021 08 30 a Sample Post"
date: 2021-08-30T13:44:28+09:00
draft: true
---Diese Metadaten, die in YAML formatiert sind, werden als „Front Matter“ bezeichnet. Ein großer Vorteil der Hugo CLI ist die automatische Erstellung von Front Matter. Im Vorspann werden die eindeutigen Daten eines Beitrags (Beitragsname, Daten, Entwurfsstatus, Tags, Kategorien usw.) gespeichert. Das Standardformat für das Titelblatt kann für jeden Abschnitt mithilfe von Archetypen konfiguriert werden.
Fügen wir dem Beitrag nun etwas Text hinzu. Wenn du einen Beitrag schreibst, achte immer darauf, dass dein Inhalt unterhalb des Vorspanns steht:
Sobald du die Inhaltsdatei gespeichert hast, solltest du sehen, wie Hugo deine Seite im Terminal neu aufbaut. Auf dem Screenshot unten siehst du, dass Hugo die gesamte Seite in 22 ms neu aufgebaut hat!
Wenn du die Seite von Hugo in deinem Webbrowser aufrufst, solltest du den neuen Beitrag sehen.
Wie man eine Seite in Hugo hinzufügt
Nachdem wir unserer Seite in Hugo einen Beitrag hinzugefügt haben, wollen wir nun eine Seite hinzufügen. Die meisten Content-Management-Systeme, darunter auch WordPress, unterscheiden zwischen Beiträgen und Seiten. Ein Beitrag ist in der Regel ein aktueller Inhalt, während eine Seite aus immer wiederkehrenden oder statischen Inhalten besteht.
Um eine Seite zu erstellen, müssen wir zunächst einen Seiteninhaltsbereich anlegen. Dazu erstellst du in Hugos Content-Ordner einen Ordner namens pages. Anschließend fügst du mit dem folgenden Befehl eine neue „Über“-Seite zu deiner Seite hinzu:
hugo new pages/about.mdBeachte, dass sich die Namenskonvention für Seiten von der für Beiträge unterscheidet. Im Gegensatz zu Beiträgen sind Seiten nicht an ein bestimmtes Datum gebunden, daher ist es unnötig, das Erstellungsdatum in den Dateinamen aufzunehmen.
Fügen wir nun der Seite „Über“ einen Text hinzu:
Jetzt solltest du die Über mich-Seite in deinem Webbrowser sehen:
Jetzt, wo wir zwei Inhaltsbereiche haben – Beiträge und Seiten – gehen wir durch, wie wir einige Anpassungen an der Seite vornehmen, z. B. den Titel und die Beschreibung bearbeiten, die Seite „Über mich“ zum Seitenleistenmenü hinzufügen, das Format der Permalinks ändern und Seiten aus dem Beitragsfeed entfernen.
So änderst du den Titel und die Beschreibung der Seite
Wie du den Titel und die Beschreibung der Seite genau änderst, hängt von der Konfiguration deiner Seite und/oder deinem aktiven Theme ab. Im Falle des Themes Hyde können der Titel und die Beschreibung der Seite in der Konfigurationsdatei von Hugo (config.toml) geändert werden.
Wir wissen das aufgrund des folgenden Theme-Codes, der die Seitenleiste wiedergibt:
<aside class="sidebar">
<div class="container sidebar-sticky">
<div class="sidebar-about">
<a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a>
<p class="lead">
{{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}
</p>
</div>
<nav>
<ul class="sidebar-nav">
<li><a href="{{ .Site.BaseURL }}">Home</a> </li>
{{ range .Site.Menus.main -}}
<li><a href="{{.URL}}"> {{ .Name }} </a></li>
{{- end }}
</ul>
</nav>
<p>{{ with .Site.Params.copyright }}{{.}}{{ else }}© {{ now.Format "2006"}}. All rights reserved. {{end}}</p>
</div>
</aside>Die beiden Teile, auf die du dich konzentrieren solltest, sind:
{{ .Site.Title }}und…
{{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}Die Handlebars {{ }} sind Teil von Hugos Template-Engine und ermöglichen die dynamische Generierung von Daten in gerenderten Seiten. Zum Beispiel weist {{ .Site.Title }} Hugo an, die Datei config.toml zu überprüfen und den Wert zu holen, der dem Schlüssel Title zugeordnet ist.
Da Hugo in der Standardkonfiguration My New Hugo Site als Titel für die Seite verwendet, wird dies auch in der Seitenleiste angezeigt. Wenn wir den Titel der Seite in der config.toml-Datei ändern, wird diese Änderung auch im Frontend angezeigt.
Ändern wir also den Parameter title in der config.toml von My New Hugo Site in Kinsta’s Hugo Site.
Bei der Beschreibung der Seite kannst du sehen, dass Hugos Template-Engine bedingte Logik unterstützt. Der folgende Code weist Hugo an, zu prüfen, ob dem Schlüssel description in der Datei config.toml ein Params-Wert zugewiesen ist. Ist dies nicht der Fall, wird stattdessen eine Standardzeichenkette verwendet.
{{ with .Site.Params.description }} {{.}} {{ else }} An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}Da wir in der Datei config.toml keine Beschreibung konfiguriert haben, gibt Hugo standardmäßig “An elegant open source and mobile-first theme for Hugo made by @mdo. Originally made for Jekyll.”
Jetzt aktualisieren wir unsere config.toml-Datei von:
baseURL = "http://example.org/"
languageCode = "en-us"
title = "Kinsta's Hugo Site"
theme = "hyde"zu:
baseURL = "http://example.org/"
languageCode = "en-us"
title = "Kinsta's Hugo Site"
theme = "hyde"
[params]
description = "Kinsta is a premium managed WordPress hosting company."Wie erwartet, sind die Änderungen jetzt auch im Frontend sichtbar:
Wie man Seiten aus dem Post-Feed entfernt
Bei den meisten Blogs ist es üblich, dass der Post-Feed auf der Startseite nur Beiträge anzeigt. Im Hyde Theme werden standardmäßig alle Inhaltsdateien im Postfeed angezeigt. Um dieses Verhalten zu ändern, musst du die Bereichsfunktion range im Template index.html bearbeiten, mit dem die Startseite erstellt wird.
Hugos Bereichsfunktion range durchläuft eine bestimmte Gruppe von Einträgen und verarbeitet dann die Daten. Die index.html-Vorlage des Hyde-Themes durchläuft standardmäßig den Bereich .Site.RegularPages und filtert Daten wie Permalink, Beitragstitel und -zusammenfassung heraus, bevor der HTML-Code ausgegeben wird.
Da .Site.RegularPages alle regulären Seiten auf Hugo enthält, also sowohl Beiträge als auch Seiten, wird die Seite „Über mich“ gerendert. Indem wir die range-Elemente in .Site.RegularPages "Section" "posts" ändern, können wir Hugo anweisen, nur die regulären Seiten im Abschnitt „posts“ zu filtern – die Inhaltsdateien im Ordner „posts„, den wir zuvor erstellt haben.
Diese Änderung nehmen wir jetzt vor, indem wir das Template wie folgt bearbeiten:
{{ define "main" -}}
<div class="posts">
{{- range .Site.RegularPages -}}
<article class="post">
<h1 class="post-title">
<a href="{{ .Permalink }}">{{ .Title }}</a>
</h1>
<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
{{ .Summary }}
{{ if .Truncated }}
<div class="read-more-link">
<a href="{{ .RelPermalink }}">Read More…</a>
</div>
{{ end }}
</article>
{{- end }}
</div>
{{- end }}zu:
{{ define "main" -}}
<div class="posts">
{{- range where .Site.RegularPages "Section" "posts" -}}
<article class="post">
<h1 class="post-title">
<a href="{{ .Permalink }}">{{ .Title }}</a>
</h1>
<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
{{ .Summary }}
{{ if .Truncated }}
<div class="read-more-link">
<a href="{{ .RelPermalink }}">Read More…</a>
</div>
{{ end }}
</article>
{{- end }}
</div>
{{- end }}Nachdem du diese Änderung vorgenommen hast, werden auf der Startseite nur noch Beiträge wie diese angezeigt:
Wie man Partials in Hugo verwendet
Eine der leistungsfähigsten Template-Funktionen von Hugo sind Partials – HTML-Templates, die in ein anderes HTML-Template eingebettet sind. Partials ermöglichen die Wiederverwendung von Code in verschiedenen Template-Dateien, ohne dass der Code in jeder einzelnen Datei verwaltet werden muss.
So werden z. B. verschiedene Seitenabschnitte (Kopfzeile, Fußzeile usw.) häufig in separaten Teildateien gespeichert, die dann in der Template-Datei baseof.html des Themes aufgerufen werden.
In der Datei baseof.html des Themes Ananke kannst du in Zeile 18 ein Beispiel für eine Teildatei sehen – {{ partial "site-style.html" . }}.
In diesem Fall weist {{ partial "site-style.html" . }} dass Hugo den Inhalt von Zeile 18 durch die Datei site-style.html im Ordner /layouts/partials ersetzen soll. Wenn wir zu /partials/site-style.html navigieren, sehen wir den folgenden Code:
{{ with partialCached "func/style/GetMainCSS" "style/GetMainCSS" }}
<link rel="stylesheet" href="{{ .RelPermalink }}" >
{{ end }}
{{ range site.Params.custom_css }}
{{ with partialCached "func/style/GetResource" . . }}{{ else }}
<link rel="stylesheet" href="{{ relURL (.) }}">
{{ end }}
{{ end }}Indem dieser Code in eine separate Datei ausgelagert wird, bleibt die baseof.html Template-Datei übersichtlich und leicht zu lesen. Während Partialdateien vor allem für einfache Projekte nicht notwendig sind, sind sie für größere Projekte mit komplexeren Funktionen sehr nützlich.
Wie man Shortcodes in Hugo verwendet
Shortcodes in Hugo sind ähnlich wie Teilbereiche, denn sie ermöglichen die Wiederverwendung von Code auf verschiedenen Seiten. Shortcodes sind HTML-Dateien, die sich im Ordner /layouts/shortcodes befinden. Der Hauptunterschied besteht darin, dass Teiltexte für HTML-Templates gelten, während Shortcodes für Markdown-Inhaltsseiten verwendet werden.
Mit Shortcodes in Hugo kannst du Funktionsmodule entwickeln, die du auf deiner Seite verwenden kannst, ohne den Code für jede Seite ändern zu müssen.
Wenn du einen Blog betreibst, musst du wahrscheinlich den Inhalt deiner Beiträge durchgehen, um die Jahresangaben auf das aktuelle Jahr zu aktualisieren. Je nachdem, wie viele Beiträge du auf deiner Seite hast, kann diese Aufgabe sehr viel Zeit in Anspruch nehmen!
Wenn du einen Hugo Shortcode in deinen Inhaltsdateien verwendest, musst du dich nie wieder um die Aktualisierung der Jahresangaben kümmern!
Beginnen wir mit der Erstellung eines Shortcodes in /layouts/shortcodes/current_year.html mit dem folgenden Inhalt:
{{ now.Format "2006" }}Shortcodes können mit dieser Syntax in Beiträge eingebettet werden – {{< shortcode_name >}}. In unserem Fall können wir den Shortcode current_year.html mit {{< shortcode_name >}} wie folgt aufrufen:
---
title: "2021 08 30 a Sample Post"
date: 2021-08-30T13:44:28+09:00
draft: true
---
This post was created in the year {{< current_year >}}.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus, velit sit amet vulputate scelerisque, massa turpis fringilla nulla, commodo dapibus urna arcu at nunc. Mauris ultrices convallis ipsum eget facilisis. Curabitur ut rutrum sem. Praesent id nibh non enim mollis porta. Nam mollis, quam et vehicula tristique, lorem ante laoreet orci, sit amet congue tortor nibh sit amet leo. Curabitur lobortis neque tempor, vestibulum lacus nec, condimentum arcu. Nulla fringilla leo sit amet ipsum auctor sagittis. Vivamus aliquam iaculis posuere. Pellentesque malesuada neque sit amet consectetur fringilla. Curabitur felis tellus, mattis in dui vel, vestibulum tincidunt metus. Mauris eget elit dui. Etiam risus nulla, ultricies vitae molestie quis, placerat in magna. Proin interdum, orci ac auctor ullamcorper, tellus ex porta tortor, suscipit luctus libero odio quis arcu.
Phasellus dapibus pellentesque ex eget pulvinar. Proin vitae elit risus. Sed justo nulla, pellentesque eu erat eu, luctus bibendum magna. Curabitur at mi id augue egestas condimentum sed quis lectus. Aenean fringilla nisl sed tincidunt tristique. Cras scelerisque laoreet sapien a faucibus. Vivamus a vehicula arcu. Duis rutrum, massa eu tincidunt eleifend, est nulla faucibus nisl, sit amet consectetur neque velit at velit. Integer fermentum augue ut orci iaculis aliquet. Ut in gravida magna.Wenn du den Beitrag im Webbrowser anschaust, solltest du das aktuelle Jahr in der ersten Zeile des Beitrags sehen, etwa so:
Wie man Bilder zu einem Beitrag in Hugo hinzufügt
Im Gegensatz zu WordPress und anderen vollwertigen Content-Management-Systemen enthält Hugo kein Drag-and-Drop-System für die Verwaltung von Bildern. Daher wird die Entwicklung eines Bildverwaltungssystems dem Endbenutzer überlassen.
In Hugo gibt es zwar keine standardisierte Methode zur Verwaltung von Bildern, aber eine beliebte Methode besteht darin, Bilder im Ordner /static zu speichern und sie in Beiträgen und Seiten mit einem Shortcode zu referenzieren. Im Folgenden zeigen wir dir, wie du Bilder in Hugo organisieren kannst.
Als Erstes müssen wir eine Organisationsstruktur für unsere Bildbibliothek erstellen. Das hört sich zwar kompliziert an, aber es müssen nur ein paar zusätzliche Verzeichnisse im Ordner /static angelegt werden.
Beginnen wir mit der Erstellung eines Uploads-Ordners in /static. Innerhalb des uploads-Ordners legst du einen Ordner mit dem Namen 2021 an, der alle Bilder enthält, die im Jahr 2021 hochgeladen werden.
Als nächstes fügen wir zwei Bilder (blue1.jpg und blue2.jpg) in den Ordner 2021 ein.
In HTML werden Bilder mit dem <img>-Tag angezeigt. Um zum Beispiel blue1.jpg anzuzeigen, können wir den folgenden HTML-Code verwenden:
<img src="/uploads/2021/blue1.jpg" alt="Blue is the warmest color!">Es ist zwar möglich, dieses HTML direkt in die Markdown-Inhaltsdatei einzufügen, aber es ist besser, einen Shortcode zu erstellen, mit dem du jedes Bild aus dem Uploads-Ordner anzeigen kannst. Wenn du das img-Tag aktualisieren musst, kannst du das Template für den Shortcode bearbeiten, ohne jedes einzelne img-Tag zu bearbeiten.
Um die Shortcode-Vorlage zu erstellen, erstelle eine neue Datei unter /layouts/shortcodes/img.html mit dem folgenden Inhalt:
<img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}Als Nächstes fügst du den Shortcode unten in einen Blogbeitrag ein:
{{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}In der Shortcode-Vorlage weisen {{ .Get "src" }} und {{ .Get "alt" }} Hugo an, den Inhalt der Parameter src< und alt< zu holen, wenn ein Shortcode aufgerufen wird.
Wenn du jetzt den Blogbeitrag neu lädst, solltest du das Bild wie folgt sehen:
Wie man eine Hugo-Seite bereitstellt
Bis zu diesem Beitrag hast du gelernt, wie du Hugo installierst, eine Seite erstellst, ein Theme hinzufügst, grundlegende Änderungen an den Konfigurationsdateien vornimmst und die Funktionalität deiner Seite mit Teilbereichen und Shortcodes erweiterst. Jetzt solltest du eine funktionierende Seite haben, die du online stellen kannst.
Da Hugo ein Generator für statische Seiten ist, kannst du die erzeugten HTML-, CSS- und JS-Dateien überall einsetzen, wo es einen Webserver gibt. Da die technischen Anforderungen für die Bereitstellung statischer Seiten so gering sind, kannst du sie bei vielen Anbietern wie Netlify, Vercel, Cloudflare Pages und anderen kostenlos hosten.
Bisher haben wir den hugo server -D verwendet, um einen lokalen Entwicklungsserver aufzusetzen, auf dem wir Änderungen an unserer Seite in Echtzeit überprüfen konnten. Um die Seite vollständig zu erstellen, können wir den Befehl hugo im Stammverzeichnis unseres Projekts verwenden. Nachdem die Erstellung der Seite abgeschlossen ist, solltest du einen neuen public Ordner in deinem Projektverzeichnis sehen. In diesem Ordner findest du alle Dateien, die du auf einen Server oder einen Cloud-Speicherdienst wie Amazon S3 hochladen musst.
Eine Möglichkeit, eine statisch generierte Seite bereitzustellen, besteht darin, sie lokal zu erstellen und manuell auf Amazon S3 oder einen Server mit Nginx hochzuladen. Diese Methode ist jedoch nicht sehr effizient, da du bei jeder Änderung neue Dateien manuell hochladen musst.
Stattdessen ist es besser, deinen Hugo-Projektordner mit einem GitHub-Repository zu verknüpfen und das GitHub-Repository mit einem automatischen Bereitstellungsdienst wie Netlify zu verbinden. Auf diese Weise kannst du deine Seite bearbeiten, die Änderungen auf GitHub veröffentlichen und einen neuen Build und eine neue Bereitstellung auf Netlify auslösen, ohne manuell eingreifen zu müssen. Lass uns jetzt durchgehen, wie du das alles machst!
So lädst du dein Hugo-Projekt auf GitHub hoch
Zuerst musst du ein GitHub-Repository für dein Projekt erstellen. Erstelle dazu ein GitHub-Konto (falls du noch keines hast) und lade die offizielle GitHub-Desktop-App herunter. Nachdem du die GitHub-App installiert hast, klickst du in der Menüleiste auf Datei und wählst Neues Repository. Gib dem Repository einen Namen deiner Wahl, lass die anderen Optionen vorerst auf ihren Standardeinstellungen und klicke auf Repository erstellen.
Standardmäßig (unter macOS) erstellt die GitHub-App neue Repositories in /Users/username/Documents/GitHub. Da wir unserem Repository den Namen my-hugo-site gegeben haben, befindet sich unser Repository unter /Users/brianli/Documents/GitHub/my-hugo-site.
Als Nächstes verschiebst du alle Dateien in deinem ursprünglichen Projektordner in den neuen GitHub-Repository-Ordner. Lösche auf jeden Fall den public Ordner, denn den müssen wir nicht auf GitHub hochladen.
Wenn du zurück zur GitHub-App navigierst, solltest du jetzt eine Liste der geänderten Dateien sehen. Um das Repository auf GitHub hochzuladen, fügst du eine Zusammenfassung hinzu, klickst auf Commit to main und dann auf Publish Repository in der oberen rechten Ecke.
Standardmäßig ist die Option „Diesen Code privat halten“ aktiviert. Wenn du möchtest, dass dein Code Open-Source und öffentlich zugänglich ist, kannst du das Häkchen entfernen. Zum Schluss klickst du noch einmal auf Repository veröffentlichen.
Wenn du jetzt zu GitHub gehst, solltest du dein Repository wie folgt sehen:
GitHub Repo mit Netlify verknüpfen
Wenn du noch kein Netlify-Konto hast, melde dich hier an. Um ein GitHub-Repository mit Netlify zu verknüpfen, klicke im Dashboard von Netlify auf Neue Seite aus Git.
Wähle unter Continuous Deployment die Option GitHub.
Benutze das Suchfeld, um das Repository deines Hugo-Projekts zu finden.
hugo und das öffentliche Verzeichnis auf public einstellst, kannst du vorerst eine einfache Hugo-Seite einrichten. Nachdem du den Build-Befehl und das öffentliche Verzeichnis angegeben hast, klicke auf Deploy Site.
Da Hugo ein so schneller Generator für statische Seiten ist, sollte die Bereitstellung für eine einfache Seite nur ein paar Sekunden dauern. Sobald die Bereitstellung abgeschlossen ist, kannst du im Netlify Dashboard eine Staging-URL sehen. Klicke auf die URL, um die bereitgestellte Seite zu sehen.
Hier ist unsere Hugo Seite auf Netlify. Wie du sehen kannst, ist sie identisch mit der Seite in unserer lokalen Umgebung:
An dieser Stelle kannst du eine eigene Domain und ein SSL-Zertifikat für deine von Netlify gehostete Seite einrichten. Dazu empfehlen wir dir, die offizielle Netlify-Dokumentation zu konsultieren.
Da wir Netlify mit GitHub verknüpft haben, wird eine neue Übertragung in das GitHub-Repository des Hugo-Projekts automatisch eine neue Bereitstellung auf Netlify auslösen!
Zusammenfassung
Hugo ist einer der beliebtesten Generatoren für statische Seiten auf der Welt, und das aus gutem Grund. Nicht umsonst ist er nicht nur superschnell in der Erstellung, sondern bietet auch leistungsstarke Template-Funktionen, die Teilbereiche und Shortcodes unterstützen.
In diesem Lernprogramm hast du gelernt, wie du Hugo konfigurierst, ein neues Projekt erstellst, Inhaltsdateien hinzufügst, Themes-Dateien bearbeitest und eine fertige statische Seite bereitstellst. Wir empfehlen, die offizielle Hugo-Dokumentation zu lesen, um mehr über Hugo und seine fortgeschrittenen Funktionen wie benutzerdefinierte Funktionen, Frontmatter und CSS/JS-Buildpacks zu erfahren.
Was hältst du von Hugo und anderen Generatoren für statische Seiten? Lass es uns in den Kommentaren unten wissen!
Schreibe einen Kommentar