So geht's: Blog ohne PHP

Static Site Generatoren (SSG) generieren, wie ihr Name beschreibt, statische Websites. Am Ende fallen dabei nur HTML und CSS Dateien raus, die vom Webserver ohne rechenintensive Interpretation von PHP Skripten ausgeliefert werden können. Dadurch erhöhen sich die Geschwindigkeit und die Sicherheit der Website. Denn außer des Webservers in Form von Apache, nginx oder Ähnlichem wird serverseitig kein weiterer Code ausgeführt, der eventuell Sicherheitslücken enthalten könnte.

Der Nachteil: eine reduzierte Interaktivität mit der Website. Zwar lässt sich Javascript weiterhin einbinden, aber ohne Code auf der Serverseite lassen sich die Benutzereingaben nicht einfach verwerten. Dennoch erleichtert das Tool-Set der SSG das Hinzufügen neuer Inhalte, bspw. eines Blogartikels.

Hugo ist ein in Golang geschriebener SSG und hatte 2013 seinen ersten öffentlichen Release. Das Projekt beschreibt sich selbst als optimiert auf Geschwindigkeit, Einfachheit und Konfigurierbarkeit und ist für jegliche Arten von Websites konzipiert. Unterstützt werden die meisten gängigen Betriebssysteme wie Windows, Linux und Mac – wobei die generierten HTML-Dateien sich von jedem Webserver auf beliebiger Plattform ausliefern lassen.

Die Inhalte für Hugo werden in der Auszeichnungssprache Markdown verfasst. Dies mag sich zuerst komplex anhören, ist aber ganz einfach. So gehts:

---

title: "Bloggen Ohne PHP"

date: 2020-09-15T11:03:25+02:00

draft: true

---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum odio a quam aliquet vehicula. In hac habitasse platea dictumst. Praesent iaculis erat ut justo eleifend egestas. Sed aliquam tristique mauris.

## Cras imperdiet arcu tincidunt ipsum tincidunt

Maecenas sollicitudin nibh nec orci rutrum, at sodales libero commodo. Morbi vel ultricies justo, eget varius lorem. Curabitur sagittis sit amet lacus sagittis ullamcorper. In eget facilisis lectus. Fusce vitae diam varius, ultrices ligula sed, rhoncus felis.

Am Anfang müsst ihr einige Metadaten für Hugo definieren: 'title' und 'date' erklären sich selbst. Das 'draft' Metadatum definiert, ob der Artikel nur ein Entwurf ist und deswegen nicht beim Erstellen der Webseite mit publiziert werden soll. Ist der Artikel fertiggestellt, setzt ihr dort 'false'. Danach folgt der eigentliche Text. Zwischenüberschriften markiert ihr durch '##'. Weitere Möglichkeiten der Textformatierung findet ihr in der offiziellen Spezifikation von Markdown.

Der Vorteil von Auszeichnungssprachen wie Markdown ist eine simple Möglichkeit der Versionierung, wie zum Beispiel mit der beliebten Versionsverwaltung Git. Hierauf aufbauend lässt sich mit Kollaborationssoftware wie Gitlab oder Github auch die Zusammenarbeit mit Redakteuren oder anderen Autoren vereinfachen. Außerdem könnt ihr ein Continuous Deployment Prozess mit beliebigen CI/CD Tools erstellen.

Eine per Hugo erstelle Website mit Gitlab Pages zu hosten, ließe sich zum Beispiel mit folgender gitlab-ci.yml umsetzen.

image:

  name: klakegg/hugo

  entrypoint: [""]

variables:

GIT_SUBMODULE_STRATEGY: recursive

pages:

  script:

  - hugo

  artifacts:

    paths:

    - public

  only:

  - master

Der 'public' Ordner enthält nach dem Aufruf von 'hugo' die fertig erstellte Website. Anstatt ebendiesen Ordner den Gitlab Pages zu überlassen, kann er von der Gitlab CI auch per SSH oder FTP auf einen Webspace hochgeladen werden. Dadurch wird die Site live geschaltet, sobald Änderungen auf dem Master Branch des Git Repositories landen.

Damit ihr mit Hugo starten könnt, müsst ihr das Programm auf der eigenen Arbeitsmaschine installieren. Wie? Das ist in der offiziellen Hugo Installationsanleitung beschrieben. Eine neue Website könnt ihr wie folgt anlegen:

> hugo new site meinblog

Damit legt ihr einen neuen Ordner mit der benötigten Struktur an.

> cd meinblog/ && ls

archetypes/ config.toml  content/  data/ layouts/  static/  themes/

In der Datei `config.toml` wird die `baseURL` auf die Domain gesetzt, unter der die Website aufrufbar sein soll. Außerdem müsst ihr den `languageCode` auf den Code der Sprache setzen, die verwendet werden soll. Für Deutsch ist dies `de-de`. Danach solltet ihr die Standardsprache mithilfe des Parameters `DefaultContentLanguage` einstellen. Erst dann werden die Standardtexte von Hugo auch deutschsprachig generiert. Hier reicht für Deutsch `de`. Um das zu verwendende Theme zu definieren, fügt ihr 'theme = ananke' hinzu.

Die fertige 'config.tom' sieht so aus:

baseURL = "http://example.org/" # mit eigener Domain ersetzen

languageCode = "de-de"

title = "My New Hugo Site" # mit eigenem Titel ersetzen

theme = "ananke"

DefaultContentLanguage = "de"

Das Ananke Theme wird nicht zusammen mit Hugo ausgeliefert. Daher müsst ihr dies extra installieren:

> git init

> git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

Nun könnt ihr mit 'hugo new artikel/neuer-artikel.md' auch schon den ersten Artikel hinzufügen. Um sich das Ergebnis anzuschauen, bringt Hugo einen Webserver mit, den ihr mit 'hugo server' startet. Sollen Entwürfe mit angezeigt werden? Dann fügt folgenden Parameter hinzu: 'hugo server -D'. 

Startet nun den Server. Schon ist die Site über die URL http://localhost:1313/ aufrufbar.

Dank Hugo lassen sich einfache, statische Websites simpel und schnell erstellen, ohne sich erst in die Komplexität eines CMS einarbeiten zu müssen. Auch die Konfiguration eines PHP Interpreters oder einer Datenbank wie MySQL entfällt. Die Möglichkeit, seine Website im Git zu verwalten, schafft neue Wege der Kooperation und Automatisierung. Für interaktive Elemente wie einen Warenkorb müssen jedoch externe Dienste eingebunden werden.

Hoffentlich konnte euch dieser Artikel einen guten ersten Einblick in die Welt der Static Site Generatoren geben. Falls ihr mehr wissen wollt, findet ihr in der offiziellen Dokumentation viele weitere Ressourcen zur Website-Erstellung mit Hugo. ;-) Ich wünsche euch viel Erfolg bei der Erstellung!