Wie man mit Hugo eine blitzschnelle statische Seite erstellt

Hugo ist ein Static Site Generator (SSG), der in Go (alias Golang) geschrieben ist, einer hochleistungsfähigen kompilierten Programmiersprache, die häufig für die Entwicklung von Backend-Anwendungen und -Diensten verwendet wird.

Heute ist Hugo in der Lage, die meisten Websites innerhalb von Sekunden (<1 ms pro Seite) zu erstellen. Das erklärt, warum Hugo sich selbst als „das weltweit schnellste Framework zum Erstellen von Websites“ bezeichnet.

In diesem Artikel werfen wir einen Blick auf die Geschichte von Hugo, was es so schnell macht und wie Sie mit dem Aufbau Ihrer eigenen statischen Hugo-Site beginnen können.

Was ist Hugo? Und warum ist es beliebt?

Steve Francia hat den Hugo-Static-Site-Generator ursprünglich im Jahr 2013 entwickelt, und Bjrn Erik Pedersen übernahm 2015 die Leitung des Projekts. Hugo ist ein Open-Source-Projekt, was bedeutet, dass sein Code von jedem eingesehen und verbessert werden kann.

Als statischer Site-Generator nimmt Hugo Markdown-Inhaltsdateien, führt sie durch Themenvorlagen und spuckt HTML-Dateien aus, die Sie einfach online bereitstellen können – und das alles extrem schnell.

Im Jahr 2021 gibt es Dutzende, wenn nicht Hunderte von statischen Generatoren. Jeder Static-Site-Generator hat seinen Reiz. Jekyll ist bei Ruby-Entwicklern beliebt, und obwohl es nicht so schnell ist wie andere Optionen, war es einer der ersten statischen Site-Generatoren, der eine breite Akzeptanz fand. Gatsby ist ein weiteres beliebtes SSG, das sich gut für die Entwicklung statisch bereitstellbarer Websites mit dynamischer Funktionalität eignet.

Was zeichnet Hugo bei so vielen SSGs aus?

Hugo ist schnell

In Bezug auf die Rohleistung ist Hugo der beste Static-Site-Generator der Welt. Im Vergleich zu Jekyll wurde von Forestry gezeigt, dass Hugo 35x schneller ist. In ähnlicher Weise kann Hugo eine 10.000-Seiten-Site in 10 Sekunden rendern, eine Aufgabe, für die Gatsby über eine halbe Stunde brauchen würde. Hugo ist nicht nur das schnellste SSG in Bezug auf die Bauzeit, sondern auch schnell zu installieren.

Hugo wird als eigenständige ausführbare Datei ausgeliefert, im Gegensatz zu Jekyll, Gatsby und anderen SSGs, die die Installation von Abhängigkeiten mit einem Paketmanager erfordern. Das bedeutet, dass Sie Hugo sofort herunterladen und verwenden können, ohne sich um Softwareabhängigkeiten kümmern zu müssen.

Templating ist einfach in Hugo

Im SSG-Jargon bezieht sich „Templating“ auf den Vorgang des Hinzufügens von Platzhaltern für die dynamische Einfügung von Inhalten innerhalb einer HTML-Seite. Um auf den Titel einer Seite zuzugreifen, können Sie die Variable {{ .Title }} verwenden. Daher ist es in einer Hugo-HTML-Vorlage üblich, {{ .Title }} wie folgt in H1-Tags einzuschließen:

 <h1>{{ .Title }}</h1>

Zur Erstellungszeit greift Hugo automatisch den Titel in einer Inhaltsdatei und fügt den Titel zwischen den beiden <h1> -Tags ein. Hugo verfügt über eine Vielzahl von integrierten Templating-Variablen, und Sie können sogar benutzerdefinierte Funktionen schreiben, um Daten während der Erstellungszeit zu verarbeiten. Für die Vorlagenerstellung verwendet Hugo die integrierten html/template und text/template von Go. Dies trägt dazu bei, das Aufblähen von Anwendungen zu reduzieren, da Hugo keine Bibliotheken von Drittanbietern für die Vorlagenerstellung installieren muss.

Hier ist ein Beispiel für eine index.html -Homepage-Vorlage aus dem beliebten Ananke-Theme. Wie Sie sehen können, ähnelt es einer Standard-HTML-Datei mit zusätzlichem Templating-Code:

 TBD: GRAB CODE FROM HERE: https://github.com/theNewDynamic/gohugo-theme-ananke

So installieren Sie Hugo

Hugo wird als kompilierte ausführbare Datei geliefert, was bedeutet, dass Sie nicht viele Abhängigkeiten herunterladen und verwalten müssen, nur um loszulegen. Es ist für macOS, Windows und Linux verfügbar.

So installieren Sie Hugo unter macOS und Linux

Die empfohlene Installationsmethode für macOS und Linux erfordert Homebrew, einen Paketmanager für die Installation und Aktualisierung von Anwendungen. Wenn Sie Homebrew noch nicht installiert haben, können Sie es installieren, indem Sie den folgenden Befehl im Terminal ausführen:

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Führen Sie nach der Installation von Homebrew den folgenden Befehl aus, um Hugo zu installieren:

 brew install hugo

So installieren Sie Hugo unter Windows

Für Windows-Benutzer kann Hugo entweder mit den Paketmanagern Chocolatey oder Scoop installiert werden. Da die Anweisungen zur Installation von Chocolatey und Scoop etwas komplexer sind als bei Homebrew, empfehlen wir, auf die offiziellen Dokumentationsseiten hier und hier zu verweisen.

Nach der Installation von Chocolatey oder Scoop können Sie Hugo mit einem der folgenden Befehle installieren (abhängig von Ihrem Paketmanager):

 choco install hugo-extended -confirm

 scoop install hugo-extended

So überprüfen Sie, ob Hugo korrekt installiert ist

Führen Sie den folgenden Befehl aus, um zu überprüfen, ob Hugo korrekt installiert wurde:

 hugo version

Dieser Terminalbefehl 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 in die Erstellung einer statischen Site mit Hugo eintauchen, machen wir uns mit den verschiedenen CLI-Befehlen und Konfigurationsdateiparametern vertraut.

Hugo CLI-Befehle

• hugo check – führt verschiedene Überprüfungen durch
• hugo config – zeigt die Konfiguration für eine Hugo-Site an
• hugo convert – konvertiert Inhalte in verschiedene Formate
• hugo deploy – stellt Ihre Website bei einem Cloud-Anbieter bereit
• hugo env – zeigt die Hugo-Version und Umgebungsinformationen an
• hugo gen – bietet Zugriff auf verschiedene Generatoren
• hugo help – zeigt Informationen zu einem Befehl an
• hugo import – lässt dich eine Seite von einem anderen Ort importieren
• hugo list – zeigt eine Liste verschiedener Inhaltstypen an
• hugo mod – bietet Zugriff auf verschiedene Modulhelfer
• hugo new – lässt dich neue Inhalte für deine Seite erstellen
• hugo server – startet einen lokalen Entwicklungsserver
• hugo version – zeigt die aktuelle Hugo-Version an

Die Hugo CLI hat auch eine Vielzahl von Flags, um zusätzliche Optionen für einige Befehle anzugeben. Um eine vollständige Liste der Hugo-Flags anzuzeigen (es gibt viele davon), empfehlen wir die Verwendung des Befehls hugo help , um eine Liste aller verfügbaren Flags anzuzeigen.

Die Hugo-Konfigurationsdatei

Die Konfigurationsdatei von Hugo unterstützt drei Formate: YAML, TOML und JSON. Ebenso ist die Hugo-Konfigurationsdatei config.yml , config.toml oder config.json und Sie finden sie im Stammverzeichnis eines Hugo-Projekts.

So sieht eine typische Hugo-Konfigurationsdatei im YAML-Format aus:

 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 Sie bereits WordPress oder ein anderes CMS verwendet haben, werden Ihnen einige der Konfigurationsoptionen möglicherweise bekannt vorkommen. Zum Beispiel ist kinsta-static-site der Name des Themas der Website, Kinsta Static Site ist der SEO-Metatitel und paginate (die Anzahl der Posts pro Seite) ist 5 .

Hugo hat Dutzende von Konfigurationsoptionen, die Sie alle in der offiziellen Hugo-Dokumentation erkunden können. Wenn Sie während der Entwicklung einer Hugo-Site globale Konfigurationsänderungen vornehmen müssen, müssen Sie wahrscheinlich diese Konfigurationsdatei bearbeiten.

So erstellen Sie eine Hugo-Site

Nachdem wir nun die Installation und Verwendung der Hugo-CLI und die Grundlagen der Hugo-Konfigurationsdatei besprochen haben, erstellen wir eine neue Hugo-Site.

Um eine Hugo-Site zu erstellen, verwenden Sie den folgenden Befehl (Sie können my-hugo-site gerne in etwas anderes ändern, wenn Sie möchten):

 hugo new site my-hugo-site

Navigieren Sie als Nächstes zum Site-Ordner, und Sie sollten die folgenden Dateien und Ordner sehen: Datei config.toml , Archetypes -Ordner, Inhaltsordner , Layouts -Ordner, Themenordner , Datenordner und statischer Ordner. Lassen Sie uns kurz durchgehen, was jede dieser Dateien und Ordner ist.

Hugos config.toml-Datei

Wie wir oben hervorgehoben haben, enthält die primäre Konfigurationsdatei von Hugo globale Einstellungen für Ihre Site.

Hugos Archetypen-Ordner

Im Archetypes -Ordner speichern Sie in Markdown formatierte Inhaltsvorlagen. Archetypen sind besonders nützlich, wenn Ihre Website mehrere Inhaltsformate hat. Mit Hugo-Archetypen können Sie eine Vorlage für jeden Inhaltstyp auf Ihrer Website erstellen. Auf diese Weise können Sie generierte Markdown-Dateien vorab mit allen erforderlichen Konfigurationseinstellungen füllen.

Wenn Sie beispielsweise einen Podcast-Inhaltstyp zum Anzeigen Ihrer Podcast-Episoden haben, können Sie einen neuen Archetyp in archetypes/podcast.md mit den folgenden Inhalten erstellen:

 --- title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} description: "" season: episode: draft: true ---

Mit diesem Podcast-Archetyp können Sie dann den folgenden Befehl verwenden, um einen neuen Beitrag zu erstellen:

 hugo new podcast/s1e6_interview-with-kinsta-ceo.md

Wenn Sie nun den neu erstellten Beitrag öffnen, sollten Sie Folgendes sehen:

 --- title: "Interview with Kinsta CEO" date: 2021-05-20T13:00:00+09:00 description: "" Season: 1 episode: 6 draft: true ---

Ohne Archetypen müssten Sie die Front-Matter-Parameter für jeden neuen Beitrag, den Sie erstellen, manuell angeben. Während Archetypen auf den ersten Blick komplex und unnötig erscheinen mögen, können sie Ihnen auf lange Sicht viel Zeit sparen.

Hugos Inhaltsordner

Der Inhaltsordner ist der Ort, an dem Ihr eigentlicher Beitragsinhalt abgelegt wird. Hugo unterstützt sowohl Markdown- als auch HTML-Formate, wobei Markdown aufgrund seiner Benutzerfreundlichkeit die beliebtere Option ist. Der Inhaltsordner ist nicht nur der allgemeine Speicherplatz für Beiträge, sondern kann auch zur weiteren Organisation von Beitragsinhalten verwendet werden.

Hugo behandelt jedes Verzeichnis der obersten Ebene im Inhaltsordner als Inhaltsabschnitt . Inhaltsabschnitte in Hugo ähneln benutzerdefinierten Beitragstypen in WordPress. Wenn Ihre Website beispielsweise Beiträge, Seiten und Podcasts enthält, würde Ihr Inhaltsordner Verzeichnisse für Beiträge , Seiten und Podcasts enthalten, in denen sich Inhaltsdateien für diese verschiedenen Beitragstypen befinden würden.

Hugos Layouts-Ordner

Der Ordner „ Layouts “ enthält HTML-Dateien, die die Struktur Ihrer Website definieren. In einigen Fällen sehen Sie möglicherweise eine Hugo-Site ohne Layouts -Ordner, da sie sich nicht im Stammverzeichnis des Projekts befinden muss und stattdessen in einem Themenordner gespeichert werden kann.

Ähnlich wie WordPress-Themes, die PHP für die Vorlagenerstellung verwenden, bestehen Hugo-Vorlagen aus Basis-HTML mit zusätzlicher dynamischer Vorlagenerstellung, die von den integrierten HTML- html/template und text/template von Golang unterstützt wird. Die verschiedenen HTML-Vorlagendateien, die zum Generieren des HTML-Markups Ihrer Website erforderlich sind, befinden sich im Layouts -Ordner.

Hugos Themenordner

Für Websites, die eine eigenständigere Methode zum Speichern von Vorlagendateien und Assets bevorzugen, unterstützt Hugo einen Themenordner . Hugo-Themes ähneln WordPress-Themes insofern, als sie in einem Themenverzeichnis gespeichert sind und alle notwendigen Vorlagen enthalten, damit ein Thema funktioniert.

Während einige Hugo-Benutzer es vorziehen, themenbezogene Dateien im Stammverzeichnis des Projekts zu speichern, ermöglicht das Speichern dieser Dateien im Themenordner eine einfachere Verwaltung und gemeinsame Nutzung.

Hugo Datenordner

Im Datenordner von Hugo können Sie zusätzliche Daten (im JSON-, YAML- oder TOML-Format) speichern, die zum Generieren der Seiten Ihrer Website benötigt werden. Datendateien sind für größere Datensätze von Vorteil, deren direktes Speichern in einer Inhalts- oder Vorlagendatei möglicherweise umständlich ist.

Wenn Sie beispielsweise eine Liste der USD-Inflationsraten von 1960 bis 2020 erstellen möchten, würden Sie etwa 80 Zeilen benötigen, um die Daten darzustellen (eine Zeile für jedes Jahr). Anstatt diese Daten direkt in eine Inhalts- oder Vorlagendatei einzufügen, können Sie sie im Datenordner erstellen und mit den erforderlichen Informationen füllen.

Hugo statischer Ordner

Im statischen Ordner von Hugo speichern Sie statische Assets, die keine zusätzliche Verarbeitung erfordern. Der statische Ordner ist normalerweise der Ort, an dem Hugo-Benutzer Bilder, Schriftarten, DNS-Verifizierungsdateien und mehr speichern. Wenn eine Hugo-Site generiert und zur einfachen Bereitstellung in einem Ordner gespeichert wird, werden alle Dateien im statischen Ordner unverändert kopiert.

Wenn Sie sich fragen, warum wir JavaScript- oder CSS-Dateien nicht erwähnt haben, liegt das daran, dass sie während der Website-Entwicklung oft dynamisch über Pipelines verarbeitet werden. In Hugo werden JavaScript- und CSS-Dateien normalerweise im Themenordner gespeichert, da sie eine zusätzliche Verarbeitung erfordern.

So fügen Sie ein Thema zu einer Hugo-Site hinzu

Das Herunterladen und Installieren eines vorgefertigten Designs ist eine großartige Möglichkeit, mit Hugo zu beginnen. Hugo-Designs gibt es in allen Formen und Größen, und viele davon sind kostenlos im offiziellen Hugo-Design-Repository verfügbar. Lassen Sie uns weitermachen und das beliebte Hyde-Design auf unserer Hugo-Website installieren.

Navigieren Sie zunächst in Terminal zum Themenordner Ihres Projekts:

 cd <hugo-project-directory>/themes/

Verwenden Sie als Nächstes Git, um das Hyde-Theme in das Themenverzeichnis Ihres Projekts zu klonen.

 git clone https://github.com/spf13/hyde.git

Fügen Sie als Nächstes die folgende Zeile zu Ihrer config.toml -Datei hinzu, um das Hyde-Design zu aktivieren:

 theme = "hyde"

An dieser Stelle ist das Hyde-Design installiert und konfiguriert. Der nächste Schritt besteht darin, Hugos integrierten Entwicklungs-Webserver zu starten, um die Site in Ihrem Webbrowser anzuzeigen.

So zeigen Sie eine Hugo-Site in der Vorschau an

Hugo wird mit einem integrierten Webserver für Entwicklungszwecke geliefert, was bedeutet, dass Sie keinen Webserver eines Drittanbieters wie Nginx oder Apache installieren müssen, nur um Ihre Website lokal anzuzeigen.

Um den Webserver von Hugo zu starten, führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus:

 hugo server -D

Hugo erstellt dann die Seiten Ihrer Website und stellt sie unter http://localhost:1313/ zur Verfügung:

Wenn Sie die URL in Ihrem Webbrowser aufrufen, sollten Sie Ihre Hugo-Site mit dem Hyde-Theme sehen:

Standardmäßig überwacht der lokale Entwicklungsserver von Hugo Änderungen und erstellt die Site automatisch neu. Da die Build-Geschwindigkeit von Hugo so schnell ist, können Aktualisierungen Ihrer Website nahezu in Echtzeit angezeigt werden – etwas, das in der Welt der statischen Website-Generatoren selten zu sehen ist. Um dies zu demonstrieren, erstellen wir unseren allerersten Beitrag in Hugo.

So fügen Sie Inhalte zu einer Hugo-Site hinzu

Das Hinzufügen von Inhalten zu einer Hugo-Site unterscheidet sich stark von einem vollwertigen CMS wie WordPress oder Ghost. Bei Hugo gibt es keine integrierte CMS-Ebene zur Verwaltung Ihrer Inhalte. Stattdessen wird von Ihnen erwartet, dass Sie die Dinge so verwalten und organisieren, wie Sie es für richtig halten.

Mit anderen Worten, es gibt keinen ausdrücklich „korrekten“ Weg, Content-Management in Hugo durchzuführen. Wir werden in diesem Abschnitt eine Methode zum Hinzufügen und Verwalten von Inhalten vorstellen, aber Sie können die Dinge gerne ändern, wenn Sie sich mit Hugo vertrauter machen.

Inhaltsabschnitte in Hugo

In Hugo ist das erste Tool zum Organisieren von Inhalten, das Ihnen zur Verfügung steht, der Inhaltsbereich . Ein Inhaltsbereich in Hugo ähnelt einem Beitragstyp in WordPress – Sie können ihn nicht nur als Inhaltsfilter verwenden, sondern Sie können ihn auch als Identifikator beim Erstellen benutzerdefinierter Themen verwenden.

Wenn Sie beispielsweise einen Blog -Inhaltsabschnittsordner haben, können Sie ihn verwenden, um alle Ihre Blog-Posts zu speichern und eine bestimmte Seitenvorlage zu rendern, die nur für Blog-Posts gilt.

So fügen Sie Beiträge in Hugo hinzu

Lassen Sie uns in diesem Sinne einen Inhaltsbereich für Blog-Posts erstellen und einige Inhalte hinzufügen. Erstellen Sie einen neuen Ordner mit dem Namen posts im Inhaltsordner Ihres Projekts – dies ist der Inhaltsbereich .

Lassen Sie uns eine weitere Organisationsebene innerhalb des Posts -Ordners erstellen, indem wir einen 2021 -Ordner erstellen. Zu diesem Zeitpunkt sollte Ihr Inhaltsverzeichnis wie folgt aussehen:

Lassen Sie uns nun unseren ersten Beitrag erstellen. Wie bereits erwähnt, unterstützt Hugo sowohl Markdown- als auch HTML-Dateien für Inhalte. Im Allgemeinen ist es besser, sich an Markdown-Dateien zu halten, da sie einfacher zu schreiben, zu formatieren und zu lesen sind.

Erstellen Sie im Ordner content/posts/2021 eine neue Datei mit der Endung .md (die Markdown-Dateierweiterung). Sie können die Datei beliebig benennen, aber die empfohlene Syntax zum Benennen einer Hugo-Inhaltsdatei lautet YYYY-MM-DD-a-sample-post.md .

Zusätzlich zum manuellen Erstellen einer Inhaltsdatei können Sie auch die Hugo-CLI verwenden, um mit dem folgenden Befehl einen neuen Beitrag zu erstellen (stellen Sie sicher, dass Sie den Befehl aus Ihrem Projektverzeichnis ausführen):

 hugo new posts/2021/2021-08-30-a-sample-post.md

Beachten Sie, dass der Inhaltsordner im obigen Pfad fehlt. Dies liegt daran, dass Hugo davon ausgeht, dass alle Inhaltsdateien standardmäßig in den Inhaltsordner verschoben werden.

Wenn Sie die neu erstellte Inhaltsdatei öffnen, sollten Sie oben im Dokument einige Zeilen mit Metadaten sehen, die etwa so aussehen:

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true ---

Diese in YAML formatierten Metadaten werden als „Front Matter“ bezeichnet. Die automatisch generierte Titelseite ist ein wesentlicher Vorteil der Hugo CLI. Auf der Vorderseite werden eindeutige Daten für einen Beitrag (Name des Beitrags, Daten, Entwurfsstatus, Tags, Kategorien usw.) gespeichert. Das Standardformat für die Titelei kann mit Hilfe von Archetypen pro Abschnitt konfiguriert werden.

Jetzt fügen wir dem Beitrag etwas Text hinzu. Stellen Sie beim Schreiben eines Beitrags immer sicher, dass sich Ihr Inhalt unter der Titelei befindet:

Sobald Sie die Inhaltsdatei gespeichert haben, sollten Sie sehen, dass Hugo Ihre Site in Terminal neu erstellt. Im Screenshot unten sehen Sie, wie Hugo die gesamte Seite in 22 ms neu erstellt hat!

Wenn Sie Ihre Hugo-Site in Ihrem Webbrowser besuchen, sollten Sie den neuen Beitrag sehen.

So fügen Sie eine Seite in Hugo hinzu

Nachdem wir nun einen Beitrag zu unserer Hugo-Site hinzugefügt haben, fügen wir eine Seite hinzu. Die meisten Content-Management-Systeme, einschließlich WordPress, unterscheiden zwischen Beiträgen und Seiten. Typischerweise handelt es sich bei einem Beitrag um einen veralteten Inhalt, während eine Seite aus immergrünen oder statischen Inhalten besteht.

Um eine Seite zu erstellen, benötigen wir zunächst einen Seiteninhaltsbereich . Erstellen Sie dazu im Inhaltsordner von Hugo einen Ordner namens pages . Verwenden Sie anschließend den folgenden Befehl, um Ihrer Website eine neue „Über“-Seite hinzuzufügen:

 hugo new pages/about.md

Beachten Sie, wie sich die Namenskonvention für Seiten von Beiträgen unterscheidet. Im Gegensatz zu Posts sind Seiten nicht an ein bestimmtes Datum gebunden, daher ist es unnötig, das Erstellungsdatum in den Dateinamen aufzunehmen.

Nun fügen wir etwas Text zur „Info“-Seite hinzu:

An diesem Punkt sollten Sie die About-Seite in Ihrem Webbrowser sehen:

Nun, da wir zwei Inhaltsabschnitte haben – Beiträge und Seiten – lassen Sie uns durchgehen, wie Sie einige Anpassungen an der Website vornehmen können, wie z. B. das Bearbeiten des Titels und der Beschreibung, das Hinzufügen der Info-Seite zum Seitenleistenmenü, das Ändern des Formats von Permalinks und das Entfernen Seiten aus dem Post-Feed.

So ändern Sie den Seitentitel und die Beschreibung

Die genaue Methode zum Ändern des Seitentitels und der Beschreibung hängt von Ihrer Seitenkonfiguration und/oder Ihrem aktiven Design ab. Im Falle des Hyde-Themes können der Seitentitel und die Beschreibung in der Hugo-Konfigurationsdatei ( config.toml ) geändert werden.

Wir wissen das aufgrund des folgenden Themencodes, der die Seitenleiste rendert:

 <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 Sie sich konzentrieren sollten, 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 Templating-Engine und ermöglichen dynamisch generierte Daten in gerenderten Seiten. Beispielsweise weist {{ .Site.Title }} Hugo an, die Datei config.toml zu überprüfen und den Wert abzurufen, der dem Title -Schlüssel zugeordnet ist.

Da die Standardkonfiguration von Hugo My New Hugo Site als Site-Titel verwendet, wird dies in der Seitenleiste angezeigt. Wenn wir den Seitentitel in config.toml in etwas anderes ändern, wird sich die Änderung auch auf das Frontend auswirken.

Lass uns weitermachen und den Title-Parameter in der config.toml von My New Hugo Site zu Kinsta's Hugo Site ändern .

Weiter zur Seitenbeschreibung sehen Sie, dass Hugos Templating-Engine bedingte Logik unterstützt. Ins Klare übersetzt, weist der folgende Code Hugo an, zu prüfen, ob dem Beschreibungsschlüssel in der Datei config.toml ein Params- Wert zugewiesen ist. Wenn nicht, ist hier eine Standardzeichenfolge, die stattdessen verwendet werden kann.

 {{ 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, rendert Hugo standardmäßig „Ein elegantes Open-Source- und Mobile-First-Design für Hugo, erstellt von @mdo. Ursprünglich für Jekyll gemacht.“

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 nun auch im Frontend sichtbar:

So entfernen Sie Seiten aus dem Post-Feed

Bei den meisten Blogs ist es üblich, dass der Post-Feed auf der Startseite nur Posts anzeigt. Standardmäßig enthält das Hyde-Design alle Inhaltsdateien im Post-Feed. Um dieses Verhalten zu ändern, müssen Sie die range Funktion in der index.html -Vorlage bearbeiten, die die Startseite generiert.

Die range -Funktion von Hugo iteriert über einen definierten Satz von Elementen und macht dann etwas mit den Daten. Standardmäßig erstreckt sich die index.html -Vorlage des Hyde-Designs über .Site.RegularPages und filtert Daten wie Permalink, Beitragstitel und Beitragszusammenfassung heraus, bevor der HTML-Code gerendert wird.

Da .Site.RegularPages alle regulären Seiten auf Hugo enthält, einschließlich sowohl Beiträge als auch Seiten, wird die „Über“-Seite gerendert. Indem wir die range in .Site.RegularPages "Section" "posts" , können wir Hugo anweisen, nur durch reguläre Seiten im Posts -Bereich zu filtern – die Inhaltsdateien in dem Posts -Ordner, den wir zuvor erstellt haben.

Nehmen wir diese Änderung jetzt vor, indem wir die Vorlage von hier aus 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 }}

Dazu:

 {{ 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 Sie diese Änderung vorgenommen haben, werden auf der Startseite nur Beiträge wie diese angezeigt:

So verwenden Sie Partials in Hugo

Eine der leistungsstärksten Templating-Funktionen von Hugo sind Partials – HTML-Vorlagen, die in eine andere HTML-Vorlage eingebettet sind. Partials ermöglichen die Wiederverwendung von Code über verschiedene Vorlagendateien hinweg, ohne den Code in jeder Datei verwalten zu müssen.

Beispielsweise ist es üblich, verschiedene Seitenabschnitte (Kopfzeile, Fußzeile usw.) in ihren separaten Teildateien zu sehen, die dann in der baseof.html -Vorlagendatei eines Themas aufgerufen werden.

In der baseof.html -Datei im Ananke-Design können Sie ein Beispiel für einen Teil in Zeile 18 sehen – {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} .

In diesem Fall {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} weist Hugo an, den Inhalt von Zeile 18 durch die site-style.html im Ordner /layouts/ partials zu ersetzen. 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 }}

Durch das Auslagern dieses Codes in eine separate Datei kann die baseof.html- Vorlagendatei organisiert und leicht lesbar bleiben. Obwohl Partials nicht notwendig sind, insbesondere für grundlegende Projekte, sind sie für größere Projekte mit komplexerer Funktionalität nützlich.

So verwenden Sie Shortcodes in Hugo

Hugo-Shortcodes ähneln Partials darin, dass sie die Wiederverwendung von Code auf einer Vielzahl von Seiten ermöglichen. Shortcodes sind HTML-Dateien, die sich im Ordner /layouts/ shortcodes befinden. Der Hauptunterschied besteht darin, dass Partials für HTML-Vorlagen gelten, während Shortcodes für Markdown-Inhaltsseiten gelten.

In Hugo können Sie mit Shortcodes Funktionsmodule entwickeln, die Sie auf Seiten Ihrer Website verwenden können, ohne Codeänderungen für jede Seite zu verwalten.

Wenn Sie einen Blog betreiben, müssen Sie wahrscheinlich den Hauptinhalt Ihrer Posts durchgehen, um die Jahresreferenzen auf das aktuelle Jahr zu aktualisieren. Je nachdem, wie viele Posts Sie auf Ihrer Website haben, kann diese Aufgabe lange dauern!

Durch die Verwendung eines Hugo-Shortcodes in Ihren Inhaltsdateien müssen Sie sich nie wieder Gedanken über die Aktualisierung von Jahresreferenzen machen!

Beginnen wir mit der Erstellung eines Shortcodes in /layouts/shortcodes/current_year.html mit den folgenden Inhalten:

 {{ now.Format "2006" }}

Shortcodes können mit dieser Syntax in Beiträge eingebettet werden – {{< shortcode_name >}} . In unserem Fall können wir den current_year.html 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 Sie den Beitrag im Webbrowser anzeigen, sollten Sie das aktuelle Jahr in der ersten Zeile des Beitrags wie folgt sehen:

So fügen Sie Bilder zu einem Beitrag in Hugo hinzu

Im Gegensatz zu WordPress und anderen vollwertigen Content-Management-Systemen enthält Hugo kein Drag-and-Drop-System zum Verwalten von Bildern. Somit wird das Entwerfen eines Bildverwaltungssystems an den Endbenutzer ausgelagert.

Während Hugo keine standardisierte Methode zum Verwalten von Bildern hat, beruht eine beliebte Methode darauf, Bilder im /static -Ordner zu speichern und sie in Beiträgen und Seiten mit einem Shortcode zu referenzieren. Lassen Sie uns durchgehen, wie Sie in Hugo eine grundlegende Bildorganisation durchführen können.

Als erstes müssen wir eine Organisationsstruktur für unsere Bildbibliothek erstellen. Das hört sich zwar komplex an, aber alles, was erforderlich ist, ist die Erstellung einiger zusätzlicher Verzeichnisse im /static -Ordner.

Beginnen wir mit der Erstellung eines Uploads -Ordners in /static . Erstellen Sie im Ordner „ Uploads “ einen Ordner mit dem Namen „ 2021 “, in dem alle im Jahr 2021 hochgeladenen Bilder gespeichert werden.

Als Nächstes fügen wir zwei Bilder ( blue1.jpg und blue2.jpg ) zum Ordner 2021 hinzu.

In HTML werden Bilder mit dem <img> -Tag angezeigt. Um beispielsweise blue1.jpg anzuzeigen, können wir den folgenden HTML-Code verwenden:

 <img src="/uploads/2021/blue1.jpg" alt="Blue is the warmest color!">

Obwohl es möglich ist, diesen HTML-Code direkt zur Markdown-Inhaltsdatei hinzuzufügen, ist es besser, einen Shortcode zu erstellen, mit dem Sie jedes Bild aus dem Upload-Ordner anzeigen können. Auf diese Weise können Sie, falls Sie jemals das img -Tag aktualisieren müssen, die Shortcode-Vorlage bearbeiten, ohne jede Instanz des img -Tags zu bearbeiten.

Um die Shortcode-Vorlage zu erstellen, erstellen Sie eine neue Datei unter /layouts/shortcodes/img.html mit dem folgenden Inhalt:

 <img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}

Fügen Sie als Nächstes den folgenden Shortcode zu einem Blog-Beitrag hinzu:

 {{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}

In der Shortcode-Vorlage {{ .Get "src" }} und {{ .Get "alt" }} Hugo an, den Inhalt der Parameter src< und alt< abzurufen, wenn ein Shortcode aufgerufen wird.

Wenn Sie jetzt den Blogbeitrag neu laden, sollten Sie das Bild so sehen:

So stellen Sie eine Hugo-Site bereit

Bis zu diesem Beitrag haben Sie gelernt, wie Sie Hugo installieren, eine Website erstellen, ein Design hinzufügen, grundlegende Änderungen an Konfigurationsdateien vornehmen und die Funktionalität Ihrer Website mit Partials und Shortcodes erweitern. An diesem Punkt sollten Sie über eine funktionierende Website verfügen, die online bereitgestellt werden kann.

Da Hugo ein statischer Site-Generator ist, können Sie das von ihm generierte HTML, CSS und JS überall mit einem Webserver bereitstellen. Da die technischen Anforderungen für die Bereitstellung statischer Websites so gering sind, können Sie sie kostenlos bei einer Vielzahl von Anbietern wie Netlify, Vercel, Cloudflare Pages und mehr hosten.

Zuvor haben wir den hugo server -D verwendet, um einen lokalen Entwicklungsserver hochzufahren, um Änderungen an unserer Website in Echtzeit anzuzeigen. Um die Site vollständig zu generieren, können wir den hugo -Befehl im Root-Verzeichnis unseres Projekts verwenden. Nachdem die Site-Generierung abgeschlossen ist, sollten Sie einen neuen öffentlichen Ordner in Ihrem Projektverzeichnis sehen. In diesem Ordner finden Sie alle Dateien, die auf einen Server oder Cloud-Speicherdienst wie Amazon S3 hochgeladen werden müssen.

Das lokale Generieren Ihrer Website und das manuelle Hochladen auf Amazon S3 oder einen Server, auf dem Nginx ausgeführt wird, ist eine Möglichkeit, eine statisch generierte Website bereitzustellen. Es ist jedoch nicht das effizienteste, da Sie jedes Mal, wenn Sie eine Änderung vornehmen, manuell neue Dateien hochladen müssen.

Stattdessen ist es eine bessere Option, Ihren Hugo-Projektordner mit einem GitHub-Repository zu verknüpfen und das GitHub-Repository mit einem automatisierten Bereitstellungsdienst wie Netlify zu verknüpfen. Mit diesem Setup können Sie Ihre Website bearbeiten, die Änderungen auf GitHub übertragen und ohne manuellen Eingriff einen neuen Build und eine neue Bereitstellung auf Netlify auslösen. Lassen Sie uns nun durchgehen, wie all dies zu tun ist!

So laden Sie Ihr Hugo-Projekt auf GitHub hoch

Zunächst müssen Sie ein GitHub-Repository für Ihr Projekt erstellen. Erstellen Sie dazu ein GitHub-Konto (falls Sie noch keines haben) und laden Sie die offizielle GitHub-Desktop-App herunter. Klicken Sie nach der Installation der GitHub-App in der Menüleiste auf Datei und wählen Sie Neues Repository aus. Geben Sie dem Repository einen Namen Ihrer Wahl, belassen Sie die anderen Optionen vorerst in ihren Standardzuständen und klicken Sie auf Repository erstellen .

Standardmäßig (unter macOS) erstellt die GitHub-App neue Repositories in /Users/username/Documents/GitHub . Da wir unser Repository my-hugo-site genannt haben, finden Sie unser Repository unter /Users/brianli/Documents/GitHub/my-hugo-site .

Verschieben Sie als Nächstes alle Dateien in Ihrem ursprünglichen Projektordner in den neuen GitHub-Repository-Ordner. Achten Sie darauf, den öffentlichen Ordner zu löschen, da wir diesen Ordner nicht auf GitHub hochladen müssen.

Wenn Sie zurück zur GitHub-App navigieren, sollten Sie nun eine Liste der geänderten Dateien sehen. Um das Repository auf GitHub hochzuladen, fügen Sie eine Zusammenfassung hinzu, klicken Sie auf Commit to main und dann in der oberen rechten Ecke auf Publish Repository .

Standardmäßig ist die Option „Diesen Code privat halten“ aktiviert. If you want your code to be open-source and publicly accessible, feel free to uncheck it. Finally, click Publish Repository once again.

Now, if you go to GitHub, you should see your repository online like so:

How to Link GitHub Repo to Netlify

If you don't already have a Netlify account, sign up for one here. To link a GitHub repository to Netlify, click New site from Git in the Netlify dashboard.

Under Continuous Deployment , select the GitHub option.

Next, use the search box to find your Hugo project repository.

Next, specify the settings for the continuous deployment. Since Netlify can detect a Hugo configuration, the default settings should work fine for a basic deployment.

As you get more familiar with Hugo, you may delve into environment variables, custom build commands, and more. For the time being, setting the build command to hugo and the public directory to public will allow you to deploy a simple Hugo site. After specifying the build command and public directory, click Deploy Site .

Da Hugo ein so schneller statischer Site-Generator ist, sollte die Bereitstellung für eine einfache Site nur wenige Sekunden dauern. Sobald die Bereitstellung abgeschlossen ist, können Sie eine Staging-URL im Netlify-Dashboard sehen. Klicken Sie auf die URL, um die bereitgestellte Site anzuzeigen.

Hier ist unsere Hugo-Seite auf Netlify. Wie Sie sehen können, ist es identisch mit der Website in unserer lokalen Umgebung:

An dieser Stelle können Sie eine benutzerdefinierte Domäne und ein SSL-Zertifikat für Ihre von Netlify gehostete Website einrichten. Dazu empfehlen wir, sich auf die offizielle Netlify-Dokumentation zu beziehen.

Da wir Netlify mit GitHub verknüpft haben, wird ein neuer Commit zum GitHub-Repo des Hugo-Projekts automatisch eine neue Bereitstellung auf Netlify auslösen!

Zusammenfassung

Hugo ist einer der beliebtesten Static-Site-Generatoren der Welt, und das aus gutem Grund. Es verfügt nicht nur über eine superschnelle Build-Verarbeitung, sondern wird auch mit leistungsstarken Templating-Funktionen geliefert, die Partials und Shortcodes unterstützen.

In diesem Lernprogramm haben Sie gelernt, wie Sie Hugo konfigurieren, ein neues Projekt erstellen, Inhaltsdateien hinzufügen, Designdateien bearbeiten und eine fertige statische Site bereitstellen. Wir empfehlen, die offizielle Hugo-Dokumentation durchzugehen, um mehr über Hugo und seine erweiterten Funktionen wie benutzerdefinierte Funktionen, Frontmaterie und CSS/JS-Buildpacks zu erfahren.

Was halten Sie von Hugo und anderen Static-Site-Generatoren? Bitte teilen Sie uns dies in den Kommentaren unten mit!