24.06.2020 / Autor: Christian Eiden

Serverless mit Hugo und Netlify CMS

Schnelle und sichere Websites. Komplett vorgerendert, direkt aus dem CDN ausgeliefert. Serverless, ohne die Notwendigkeit einen eigenen Webserver zu betreiben. Neteleven relaunched die eigene Website mit Hugo und Netlify CMS.

Serverless mit Hugo und Netlify CMS
Serverless mit Hugo und Netlify CMS

Schnelle und sichere Websites. Komplett vorgerendert, aus dem CDN ausgeliefert. Serverless, ohne die Notwendigkeit einen eigenen Webserver zu betreiben.

Klingt das zu gut um wahr zu sein? Die Philosophie hinter diesen Schlagworten heißt JAMStack.

Was ist JAMStack?

Der Name JAMStack leitet sich ab von JavaScript (J), das verwendet wird um auf APIs (A) zuzugreifen, um daraus Markup (M) zu generieren. Es handelt sich dabei nicht um ein konkretes Toolset, sondern vielmehr um eine Philosophie, wie moderne Websites zu bauen sind.

Der Fokus liegt dabei auf Performance, Sicherheit und einer einfachen und kosteneffizienten Skalierbarkeit der Website.

Jamstack
Jamstack

Da die Seiten als statisches Markup generiert werden, können sie direkt durch ein CDN ausgeliefert werden. Dynamische Bestandteile, wie z.B. ein Kontaktformular, werden durch die Verwendung von JavaScript und externen APIs realisiert.

Hugo als Static Site Generator

Die Erzeugung des Markups geschieht mit Hilfe eines Static Site Generators. Einer der bekanntesten und wahrscheinlich der schnellste, ist dabei das in Go implementierte Open Source Projekt Hugo.

Hugo VSC
Hugo VSC

Der Inhalt der späteren Seiten liegt in einer lokalen Verzeichnisstruktur vor. Diese Struktur entspricht der Struktur der späteren Webseite, was für die meisten Seiten eine treffende Annahme darstellt. Die Daten bestehen aus einem strukturierten Teil, der z.B. Titel, Autor usw. enthält, sowie meist einem Inhaltsbereich, der als Markdown gepflegt wird. Somit ist es einfach möglich, strukturierte und unstrukturierte Inhalte zu verwenden und damit eine hohe Flexibilität zu erreichen.

Anhand einfach aufgebauter Templates wird dann aus den gepflegten Inhalten das finale Markup erzeugt. Dabei sind nützliche Features, wie Sitemaps oder Open Graph Tags, automatisch verfügbar und können ohne jeden Aufwand verwendet werden.

Das besondere an Hugo ist seine Einfachheit und seine Geschwindigkeit. So ist z.B. keine komplizierte Installation notwendig, es reicht ein einziges Executable, welches als ZIP Datei herunter geladen werden kann.

Netlify CMS zur Pflege von Inhalten

Nur selten soll die Pflege der Inhalte komplett durch die Entwicklung, noch dazu im Filesystem, geschehen. Um Redakteuren eine einfache Pflege zu ermöglichen, bietet sich der Einsatz eines CMS an.

Ein CMS System, das sich sehr gut mit Hugo kombinieren lässt, ist Netlify CMS . Bei Netlify CMS handelt es sich um eine React basierte Webanwendung, die komplett im Browser läuft, und somit keinen dynamischen Webserver zur Ausführung benötigt. Es ist eigentlich "nur" ein konfigurierbarer Editor, der das von Hugo benötigte Dateiformat erzeugt.

Netify Backend
Netify Backend

Da das CMS kein eigenes Backend besitzt, können Änderungen nur im Git Repository vorgenommen werden. Netlify CMS kommuniziert daher direkt mit GitHub oder GitLab als Backend. Hierdurch ist es auch möglich, einen einfachen redaktionellen Workflow umzusetzen, bei dem eine Änderung vor der Publikation erst freigegeben werden muss. Netlify CMS setzt dies intern mit eigenen Braches und Mergerequests um.

neteleven.de Relaunch

Diese schlanke Architektur haben wir uns zu Nutze gemacht, um neteleven.de neu aufzulegen. Das Ergebnis ist eine schlanke, einfach weiterzuentwickelnde und wartbare Seite, mit einer sehr hohen Performance, die unsere Anforderungen voll erfüllt.

Es kamen die folgendes Werkzeuge zum Einsatz:

  • Hugo 0.72
  • Netlify CMS 2.10.50

Als Git Backend verwenden wir GitLab, welches von Netlify CMS sehr gut unterstützt wird. In der GitLab CI Pipeline wird das Markup generiert.

Die Website wird in einem Azure Blob Storage gehosted. Das hat den Vorteil, dass wir uns nicht um laufende Sicherheitspatches und andere Updates kümmern müssen. Zusätzlich bietet Azure die Möglichkeit die Daten direkt redundant zu speichern und somit die Ausfallsicherheit zu erhöhen.

Damit eine eigene Domain genutzt werden kann, kommt zusätzlich Azure CDN zum Einsatz. Damit ist es möglich, eigene Domains zu nutzen und diese dann mit gültigen Zertifikaten, z.B. von Let's Encrypt, auszustatten. Zusätzlich bietet das CDN einen DDoS Schutz und eine mächtige Regelengine an.

Das Kontaktformular wurde als Azure Function umgesetzt. Hierbei handelt es sich um eine Runtime zum Ausführen von Funktionen. In unserem Fall ist die API in Python geschrieben. Da der Code auf der PaaS von Azure läuft, fallen auch hier Aufwände für Patching, Ausfallsicherheit und Skalierung weg.

Eine Alternative zum Hosting bei Azure stellt das Hosting bei Netlify dar. Netlify automatisiert dabei die Schritte, die bei Azure manuell gemacht wurden.

Vorteile

Wie bereits erwähnt, hat das oben beschriebene Vorgehen folgende Vorteile:

  • Hohe Performance der Website
  • Einfache und schnelle Entwicklung
  • Sicherheit durch statische Website
  • Die verwendeten Werkzeuge sind Open Source
  • Keine eigene Server-Infrastruktur notwendig
  • Einfache Möglichkeit zur Skalierung
  • Einfache Erweiterbarkeit durch die Anbindung von APIs

Fazit

Der Einsatz von Hugo eignet sich besonders gut für kleine bis mittlere Auftritte, bei denen der Fokus nicht auf User Generated Content liegt wie z.B. Unternehmensseiten oder Landingpages . Netlify CMS ist eine schlanke und kostenfreie Alternative zu großen CMS Systemen, bietet jedoch einen begrenzteren Funktionsumfang.

Datenschutzhinweis

Diese Webseite nutzt externe Komponenten. Weitere Informationen finden Sie in unseren Datenschutzinformationen.