Anzeige
Anzeige
Test
Artikel merken

Open-Source-Tool Hugo ausprobiert: Das kann der Static-Site-Generator

Ihr seid bei der Erstellung von Websites auf Speed bedacht? Dann sind euch statische Site-Generatoren sicherlich kein Fremdwort. Wir haben mit dem Open-Source-Tool Hugo einen Kandidaten getestet. 

Von Thomas Peham
3 Min. Lesezeit
Anzeige
Anzeige

(Grafik: Shutterstock)

Hugo ist ein Open-Source Static-Site-Generator, mit dem man statische Websites erstellen kann. Dabei liefert Hugo HTML und CSS-Dateien ohne Rückgriffe auf eine Datenbank aus. Der Vorteil ist, dass Websites schnell geladen und auf einem beliebigen Webserver ohne spezielle Anforderungen bereit gestellt werden können. Wir haben den Static-Site-Generator getestet und erklären, wie man Hugo für die Erstellung von statischen Websites einsetzen kann.

Warum braucht man Hugo als Website-Generator überhaupt?

Anzeige
Anzeige

Hugo ermöglicht, ähnlich wie Jekyll, das Erstellen von statischen Websites ohne den Einsatz von Datenbanken. Content-Management Systeme wie WordPress erstellen eine Webseite jedes Mal neu, wenn sie jemand aufruft. Im Gegensatz dazu werden bei Static-Site-Generatoren die Pages bei Erstellung des Contents schon fertig als HTML- und CSS-Dateien erstellt. Die Vorteile von Static-Site-Generatoren sind jedoch nicht nur Performance-spezifisch.

Website-Generatoren bieten eine vollständige Kontrolle über Inhalt und Webdesign. Wenn etwa eine Website mit mehreren unterschiedlichen Layouts und Inhalten geplant ist, kann ein Static-Site-Generator sehr hilfreich sein. Neben dem Vorteil der Sicherheit – statische Sites können keine serverseitigen Skripte ausführen–, bieten sie den Vorteil, dass kein spezifisches Wissen über bestimmte Eigenheiten des Content-Management-Systems notwendig ist. Es werden lediglich HTML- und CSS-Fähigkeiten benötigt.

Anzeige
Anzeige

Ursprünglich von Steve Francia gestartet, umfasst die Hugo-Community mittlerweile mehr als 165 Mitwirkende, 35 vorgefertigte Website-Templates und tausende Anwender.

Anzeige
Anzeige

Hugo im Praxistest

Ich war Anfang des Jahres mit der Frage konfrontiert, wie wir das Erstellen von neuen Landing Pages effizienter gestalten und eine Website relaunchen können. Nachdem wir schon ein anderes Projekt erfolgreich mit Hugo als Static-Site-Generator umgesetzt hatten, war es naheliegend, auch unsere Hauptwebsite mit Hugo umzusetzen.

Damit verbunden war auch ein neues Toolset:

Anzeige
Anzeige
Mit dem Umstieg auf Hugo war ein neues Toolset erforderlich. (Grafik: Usersnap)

Mit dem Umstieg auf Hugo war ein neues Toolset erforderlich. (Grafik: Usersnap)

Static Hosting mit Netlify

Nach der Entscheidung, Hugo als Static-Site-Generator für das Relaunch-Projekt einzusetzen, begann unsere Suche nach einem geeigneten Static Hoster. Da wir Hugo in Kombination mit Github verwenden, musste unser zukünftige Web-Hosting-Anbieter auf Github abgestimmt und mit diesem kompatibel sein.

Nachdem Divshots – unser bestehender Web-Hoster – nach Akquisition von Google geschlossen wurde, führten wir unsere statischen Websites zu Netlify. Netlify unterstützt nicht nur Hugo, sondern auch eine Vielzahl an modernen Web-Technologien.

Versionskontrolle mit Github

Die Begeisterung für Github in der Entwickler-Community können wir nur teilen. Github eignet sich hervorragend zur Quellcode-Verwaltung und Versionskontrolle. Die Einrichtung eines privaten Repository für unsere neuen Landingpages, sowie die Integration von Github mit Netlify war somit unkompliziert.

Anzeige
Anzeige
Die Einrichtung von Git-Repositories ist natürlich nicht schwer. (Screenshot: Usersnap)

Die Einrichtung von Git-Repositories ist natürlich nicht schwer. (Screenshot: Usersnap)

Mit dem Command hugo kann Hugo bei Netlify konfiguriert werden. Dabei muss das gewünschte Projekt und Repository ausgewöhlt werden.

Netlify startet anschließend den Website-Release-Prozess, nachdem dieser von Github angestoßen wurde.

In unserem Fall sah die Konfiguration wie folgt aus:

Anzeige
Anzeige

Repository: usersnap/landing-pages
Branch: master
Build cmd: cd src && npm install &&node_modules/bower install && node_modules/brunch/bin/brunch
build —production && cd .. && hugo
Public folder: /public

(Wir verwenden eine Reihe weiterer Tools zur Verarbeitung von Javascript und CSS.)

Das Testing der neuen Site

Ehe eine neue Landingpage veröffentlicht wird, durchläuft diese bei uns einen automatischen sowie manuellen Testing-Prozess. Dafür verwenden wir Codeship für automatisierte Tests und unser eigenes Tool Usersnap für manuelle Tests. Bevor unsere statischen Dateien mittels Hugo bei Netlify gehostet werden, wird ein automatischer Test mit Codeship als Continuous-Integration-Lösung angestoßen. Wir haben dazu zwei Umgebungen – für eine Test- und eine Live-Version – erstellt.

So sieht der Testing-Ablauf insgesamt aus. (Grafik: Usersnap)

So sieht der Testing-Ablauf insgesamt aus. (Grafik: Usersnap)

Um effiziente Feedback-Zyklen sicherzustellen, wird das Entwickler-Team direkt über Slack über die Test-Ergebnisse benachrichtigt.

Anzeige
Anzeige

Fehler-Dokumentation mit einem Static-Site-Generator

Rasche Feedback-Zyklen sind für eine fehlerfreie Website entscheidend und Benachrichtigungen sind wichtig, um schnell reagieren und kritische Fehler lösen zu können.

Um jedoch Website-Strategien festzulegen und konkrete Funktionen umzusetzen, bedarf es einer detaillierten Planung. Der Einsatz einer Feature-Matrix gibt dabei eine erste Übersicht über aktuelle Fehlermeldungen, Kundenwünsche und Funktionsanforderungen.

Des Weiteren wird die Verwendung eines Projekt-Management-Tools zur Verwaltung von konkreten Webprojekten empfohlen – wir verwenden an dieser Stelle Blossom.

Anzeige
Anzeige

Fazit

Als wachsendes Unternehmen sind wir bemüht, unseren Website-Prozess stetig zu optimieren. Vor allem bei zunehmender Personenanzahl in Entwicklungsabteilungen bieten Static-Site-Generatoren wie Hugo effiziente Abläufe zur Erstellung und Veröffentlichung von Websites an.

Über den Autoren:

Thomas Peham ist Marketing-Manager beim österreichischen SaaS-Startup Usersnap. Zuvor war er als Projektmanager beim Styria-Verlag tätig. Nebenbei schreibt Thomas für unterschiedliche Tech-Medien, betreibt einen eigenen Blog und hat kürzlich die Interviewplatform waytopassion.com gestartet.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
4 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Andreas

Praxisnah. Verständlich. Kurz. Vielen Dank!

Antworten
Andreas

Eins noch: Spannend ist bei den Generatoren immer die Mehrsprachigkeit. Aus diesem Grund musste ich mal von Jekyll zu Middleman wechseln.

Gibt es da noch einen Satz zu Hugo?

Antworten
Thomas Peham

Hallo Andreas, danke für deinen Kommentar! Meiner Erfahrung nach funktioniert Hugo sehr gut auch für mehrsprachige Websites. Wir haben etwa eine englische- und deutsche Version, wobei beide Übersetzungen auch unabhängig gewartet werden und es nicht für jede Landing Page eine 1:1 Übersetzung gibt.

Bei weiteren Fragen dazu, gerne auch per Mail unter hello(at)thomas-peham(dot)com.

Jürgen Tepe

Hätte da nicht „Sponsored Post“ drüberstehen müssen?

Ausser, daß Hugo ein Static-Site-Generator ist, erfährt man in diesem Artikel nur, daß Usersnap ihn zusammen mit Github, Blossom, Codeship und, natürlich: Usersnap – nutzt. Was Hugo nun eigentlich kann, muss man sich auf dessen Site selbst raussuchen. Für einen Artikel mit diesem Titel ist der Inhalt recht dünn(freundlich ausgedrückt), für einen Werbepost allerdings ärgerlich lang.

Nun, zumindest so ehrlich ist t3n, daß am Ende dabeisteht, daß der Autor Content Marketing betreibt…

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige