{"id":44109,"date":"2021-10-29T10:22:11","date_gmt":"2021-10-29T09:22:11","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=44109&preview=true&preview_id=44109"},"modified":"2023-08-24T22:39:54","modified_gmt":"2023-08-24T21:39:54","slug":"hugo-statische-seite","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/hugo-statische-seite\/","title":{"rendered":"Wie man mit Hugo eine rasend schnelle statische Seite erstellt"},"content":{"rendered":"

Hugo ist ein Generator f\u00fcr statische Seiten (SSG), der in Go<\/a> (auch bekannt als Golang) geschrieben ist, einer leistungsstarken kompilierten Programmiersprache, die h\u00e4ufig f\u00fcr die Entwicklung von Backend-Anwendungen und -Diensten verwendet wird.<\/p>\n

Heute ist Hugo in der Lage, die meisten Webseiten innerhalb von Sekunden zu erstellen (<1 ms pro Seite). Das erkl\u00e4rt, warum Hugo sich selbst als „das schnellste Framework der Welt f\u00fcr die Erstellung von Webseiten“ bezeichnet.<\/p>\n

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\u00f6nnen.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Was ist Hugo? Und warum ist es so popul\u00e4r?<\/h2>\n
\"Homepage<\/a>
Homepage der Webseite von Hugo.<\/figcaption><\/figure>\n

Steve Francia entwickelte den Hugo Generator f\u00fcr statische Seiten<\/a> im Jahr 2013 und Bj\u00f8rn Erik Pedersen \u00fcbernahm 2015 die Leitung des Projekts. Hugo ist ein Open-Source-Projekt, das hei\u00dft, sein Code kann von jedem eingesehen und verbessert werden.<\/p>\n

Als Generator f\u00fcr statische Seiten nimmt Hugo Markdown-Inhaltsdateien, l\u00e4sst sie durch Themes-Templates laufen und spuckt HTML-Dateien aus<\/a>, die du ganz einfach online stellen kannst – und das alles extrem schnell.<\/p>\n

Im Jahr 2021 gibt es Dutzende, wenn nicht Hunderte von statischen Generatoren. Jeder Generator f\u00fcr statische Seiten hat seinen Reiz<\/a>. Jekyll ist bei Ruby-Entwicklern sehr beliebt, und obwohl es nicht so schnell ist wie andere Optionen, war es einer der ersten Generatoren f\u00fcr statische Seiten, der weit verbreitet wurde. Gatsby<\/a> ist ein weiterer beliebter SSG, der sich gut f\u00fcr die Entwicklung von statisch einsetzbaren Seiten mit dynamischen Funktionen eignet.<\/p>\n

Was hebt Hugo bei so vielen SSGs auf dem Markt ab?<\/p>\n\n

Hugo ist schnell<\/h3>\n

Was die reine Leistung angeht, ist Hugo der beste Generator f\u00fcr statische Seiten der Welt. Forestry hat gezeigt, dass Hugo im Vergleich zu Jekyll 35 Mal schneller<\/a> ist. Au\u00dferdem kann Hugo eine 10.000-seitige Seite in 10 Sekunden rendern – eine Aufgabe, f\u00fcr die Gatsby \u00fcber eine halbe Stunde brauchen w\u00fcrde. Hugo ist nicht nur die schnellste SSG in Bezug auf die Erstellungszeiten, sondern auch schnell zu installieren.<\/p>\n

Im Gegensatz zu Jekyll, Gatsby und anderen SSGs, die \u00fcber einen Paketmanager installiert werden m\u00fcssen, wird Hugo als eigenst\u00e4ndige ausf\u00fchrbare Datei geliefert. Das bedeutet, dass du Hugo sofort herunterladen und benutzen kannst, ohne dich um Software-Abh\u00e4ngigkeiten k\u00fcmmern zu m\u00fcssen.<\/p>\n

Templates erstellen ist in Hugo ganz einfach<\/h3>\n

Im SSG-Jargon bezeichnet „Template“ das Hinzuf\u00fcgen von Platzhaltern f\u00fcr dynamische Inhalte auf einer HTML-Seite. Um auf den Titel einer Seite zuzugreifen, kannst du die Variable {{ .Title }}<\/code> verwenden. In einem HTML-Template von Hugo werden die {{ .Title }}<\/code> also h\u00e4ufig in H1-Tags eingeschlossen, etwa so:<\/p>\n

<h1>{{ .Title }}<\/h1><\/code><\/pre>\n
Zur Erstellungszeit erfasst Hugo automatisch den Titel in einer Inhaltsdatei und f\u00fcgt ihn zwischen den beiden <h1><\/code>-Tags ein. Hugo verf\u00fcgt \u00fcber eine Vielzahl von eingebauten Template-Variablen, und du kannst sogar eigene Funktionen schreiben, um Daten zur Build-Zeit zu verarbeiten. F\u00fcr die Erstellung von Templates nutzt Hugo die in Go integrierten Bibliotheken html\/template<\/code> und text\/template<\/code>. Das hilft dabei, die Anwendung zu entschlacken, da Hugo keine Bibliotheken von Drittanbietern f\u00fcr Templates installieren muss.<\/p>\n
Wie man Hugo installiert<\/h2>\n
Hugo wird als kompilierte ausf\u00fchrbare Datei ausgeliefert. Das bedeutet, dass du nicht viele Abh\u00e4ngigkeiten herunterladen und verwalten musst, nur um loszulegen. Es ist f\u00fcr macOS, Windows und Linux verf\u00fcgbar.<\/p>\n