Website Relaunch mit Open Source SSG Hugo

Ein herkömmliches Content Management System bringt meist eine sehr komplexe Oberfläche mit reichlich Modulen für den Benutzer mit, welcher sich möglichst wenig mit HTML auseinandersetzen möchte. Das hört sich erstmal gut an, doch die meisten Module finden für den Otto Normalanwender keinen Nutzen, da sie für dessen Arbeit größtenteils nicht benötigt werden. Das hat zur Folge, dass man von diesen nur verwirrt oder behindert wird. Nutzt man ein solches CMS, so begibt man sich in eine Abhängigkeit vom Hersteller. Das kann zu komplexen Umstrukturierungen, oder im schlimmsten Fall sogar zum kompletten Umbau einer Website führen.

Zuerst betrieben wir unsere Website eine lange Zeit über das Open Source CMS Joomla. Für unsere erste “Visitenkarte” im Web, war das auch vollkommen ausreichend. Leider hat sich der WYSIWYG Editor als sehr unflexibel herausgestellt. Umfangreiche Anpassungen an der Struktur oder am Layout mussten dann im PHP-Template gemacht werden. Einige unschöne Erfahrungen mit unsicheren Plugins haben Joomla dann den Todesstoß versetzt. Angenehm überrascht, was sich in der Zwischenzeit am Markt getan hat, wechselten wir zuletzt zum kommerziellen Anbieter Wix. Leider bringt der die gleichen Probleme mit wie sein Vorgänger. Gerade im Bereich der sozialen Medien, hat uns Wix sehr behindert, da die Vorschauseiten nicht richtig dargestellt wurden. Dazu kamen noch die erheblichen Ladezeiten, die dank einer 30MB großen Seite, mit Tonnen an Javascript, zu Stande kommen.

Frustriert von unseren bisherigen Versuchen, haben wir uns noch einmal darauf besonnen, was wir eigentlich machen wollen. Im Grunde besteht unsere Webseite aus statischen Seiten, die für jeden Besucher gleich aussehen. Dass Seiten hinzugefügt werden können, wie z.B. für unsere Newsseite, rechtfertigt in unseren Augen noch kein CMS, geschweige denn eine Datenbank. Das muss doch auch einfacher gehen! Also habe ich mich mit diesen Anforderungen auf die Suche nach einer für uns besser geeigneten Technologie gemacht.

Wenn man sich nach Alternativen zum CMS umschaut, stoßt man schnell auf sogenannte Static-Site-Generators. Sie kombinieren Content und Template und generieren daraus einmalig eine statische Seite, welche überall gehostet werden kann. Ohne Datenbank. Ohne lange Ladezeiten. Und vor Allem ohne Abhängigkeit von dem Hersteller. Zu den bekanntesten SSGs gehört Hugo, geschrieben in der Sprache Go und zu nutzen in der Kommandozeile. Kein überstrapaziertes und unübersichtliches User Interface. Aber mit einfacher, individualisierbarer Technologie.

Perfekt! Genau das, was wir gesucht haben. Doch jetzt heißt es umziehen. Und der kostenfreie Umzugshelfer Hugo ist bereits arrangiert! Gleich dazu haben wir unsere Fassade noch einmal streichen lassen und uns ein neues Template besorgt. Wir haben lokal eine neue Website mit Hugo erstellt…

$ hugo new site sq-website
Congratulations! Your new Hugo site is created in /Users/user/Sites/sq-website.

…und sind erstmal damit angefangen den Content unserer bisherigen Landingpages mit den HTML-Elementen des neu-zugelegten Templates zu verschmelzen. Das bedeutete erstmal viel Arbeit, aber zu einem guten Zweck.

Denn die nun geschaffenen HTML-Schnipsel können als sogenannte Shortcodes in Hugo definiert und für weitere Seiten wiederverwendet werden. Natürlich mit anderem Inhalt, und da kommt Hugo erst richtig ins Spiel. Die von uns geschriebenen Shortcodes, die das Gerüst um den eigentlichen Inhalt bilden, können an beliebig vielen, von uns definierten Stellen mit selbst- und vordefinierten Variablen ergänzt werden.

<!-- Beispiel eines Shortcodes (sq-website/layouts/shortcodes/example.html) -->
<div id="01">
    {{ if .Get "title" }}
        <h3>{{ .Get "title" }}</h3>
    {{ end }}
    <div id="02">
        {{ .Inner }}
    </div>
</div>

Bei Hugo wird jede einzelne Seite aus ihrer spezifischen Markdown-Datei gerendert. Die von uns vorgeschriebenen Shortcodes können nun mit Variablen als Paramerter einfach in Markdown aufgerufen werden. Content-Pflege leicht gemacht!

<!-- Beispiel einer Landingpage (sq-website/content/beispiel.md) -->
# Beispieltitel
<!-- Shortcode aufrufen -->
{{% example title="Super Titel!" %}}
Dieser Text innerhalb des aufgerufenen Shortcodes wird bei dessen .Inner Variable 
eingefuegt und kann _einfach_ in **Markdown** geschrieben werden.
{{% /example %}}

Starten wir die Seite nun lokal mit dem Befehl $ hugo server, ist unsere oben genannte beispiel.md unter http://localhost:1313/beispiel zu erreichen und wird von Hugo wie folgt gerendert:

<!-- Beispiel einer Landingpage (sq-website/content/beispiel.md) -->
<h1 id="beispieltitel">Beispieltitel</h1>
<!-- Shortcode aufrufen -->
<div id="01">
    <h3>Super Titel!</h3>
    <div id="02">
        <p>Dieser Text innerhalb des aufgerufenen Shortcodes wird bei dessen .Inner Variable 
        eingefuegt und kann <em>einfach</em> in <strong>Markdown</strong> geschrieben werden.</p>
    </div>
</div>

Das bietet uns die langersehnte Möglichkeit unsere Website komplett ohne HTML zu pflegen, wenn wir sie einmalig damit aufbereitet haben. So können komplette Landingpages ganz simpel nach Baukastensystem erstellt und geändert werden. Der Weg dahin war zwischenzeitig zwar mühsam, aber hat sich vollstens ausgezahlt!