HUGO ist ein Content Mangement System (CMS) zur Erstellung von statischen HTML Seiten, so extrem schnell, sicher und hat keine besonderen Ansprüche ans Hosting, jeder Webserver kann diese Seiten ausliefern, ohne Datenbank oder PHP. HUGO selber ist in GO geschrieben und kann so umfangreiche Logik zur Erstellung der Seiten verwenden. Der Content selber wird in der einfachen Markdown Auszeichnungssprache erstellt.

Statische HTML Seiten

Statische HTML Seiten können vom Webserver direkt ausgeliefert werden, er benötigt dafür unter 1 Millisekunde. Eine dynamisch generierte Seite benötigt mindestens ein paar Millisekunden, wenn umfangreiche Datenbank Abfragen nötig sind, kann es auch schon mal ein paar hundert Millisekunden dauern bevor eine dynamische erstellte Seite ausgeliefert ist. So sind die Ansprüche beim Hosting auch recht gering, es werden weder PHP noch eine Datenbank dabei benötigt.

Auch bei der Sicherheit sind statische Webseiten klar im Vorteil, auf dem Webserver liegt kein ausführbares Script das Sicherheitslücken haben kann, über die ein Angreifer Zugriff auf den Webserver oder die Datenbank bekommen könnte.

Aber klar, nicht jede Art von Webseite lässt sich mit statischen HTML Seiten umsetzen, ein Webshop, ein Forum und einige anderen Arten von Webseiten können nur dynamisch arbeiten, also immer dann wenn die Webseite sich nach Interaktion mit dem Besucher ändern muss.

HUGO Programmierlogik

Hugo verfügt über ähnliche Programmierlogik wie man sie von Programmiersprachen kennt, es gibt Variabeln, Funktionen, Schleifen und so weiter. So lassen sich all möglichen Designs umsetzen, vorgegebene Systemvariabeln sind dabei auch hilfreich. Ein Code um z.B. zu einem Beitrag bis zu 5 relevante Beiträge zu verlinken sieht dann so aus:

{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
<h3>see also</h3>
<ul>
	{{ range . }}
	<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
	{{ end }}
</ul>
{{ end }}

die Systemvariable .Site.RegularPages.Related enthält die relevanten Beiträge zu einem Artikel bereits, diese werden anhand der verwendeten Keywords, Datum und Tags ermittelt. Die Gewichtung der einzelnen Faktoren lässt sich beliebig konfigurieren, so macht es z.B. Sinn den Keywords hohe Priorität einzuräumen, während das Datum ja eher unrelevant ist.

Oder als weiteres Beispiel ein Code der verschiedene CSS Dateien zu einer zusammenführt, verkleinert und dann verlinkt:

{{ $base := resources.Get "css/index.css" }}
{{ $syntax := resources.Get "css/syntax.css" }}

{{ $style := slice $base $syntax | resources.Concat "bundle.css" | minify | fingerprint }}

<link rel="stylesheet"
      href="{{ $style.Permalink }}"
      integrity="{{ $style.Data.Integrity }}">

Hier werden nun also 2 CSS Dateien geholt, zusammengefügt zu einer bundle.css, per minify verkleinert und dann noch der fingerprint berechnet, und dann alles verlinkt. Der verlinkte Dateiname könnte dann so aussehen bundle.min.e838f1fc02…26256d7ec.css, enthält also auch den hashwert, dieser ändert sich wenn man dann eine der CSS Dateien nochmal editiert, so bekommt der User immer die wirklich aktuellen CSS Dateien.

Auch können Bilder bearbeitet werden, dazu gibt es diverse Filter, und man kann auch die Größe oder Typ ändern, so lässt sich aus einem vorgegeben .jpg Bild automatisiert Bilder in verschiedenen Größen jeweils als .jpg und .webp generieren und als picture set ausgeben, so kann der Browser des Users dann anhand seinen Möglichkeiten und der Bildschirmgröße das passende Bild aussuchen und anzeigen.

Innerhalb des Contents können HUGO Funktionen auch genutzt werden, beliebt sind hier aber eher vorgegebene oder selbst angelegte Shortcodes. Wenn man z.B. einen Link in einem neuen Tab öffnen lassen will kann man sich dies als shortcode anlegen

url-link.html im layout/shortcode Verzeichnis:

{{ $numOfParams := len .Params }}
{{ if and (ge $numOfParams 2) (le $numOfParams 3) }}
    {{ if eq $numOfParams 3 }}
        {{ $.Scratch.Set "target" (.Get 2) }}
    {{ else }}
        {{ $.Scratch.Set "target" "_blank" }}
    {{ end }}

    <a href="{{ .Get 1 }}" target='{{ $.Scratch.Get "target"}}'>{{ .Get 0 }}</a>
{{ end }}

und dann im content per {{< url-link “Example” “http://example.com” “_blank”>}} um einen Link zu der Url mit dem Linktext “Example”, der sich in einem neuen Tab öffnet, zu erstellen.

Content erstellen

Zur Contenterstellung wird die Markdown Syntax genutzt, mit einem oberen Teil zum setzen von Parameter, die anderweitig genutzt werden, z.B. in den Metatags der erstellten HTML Seiten:

+++
keywords = ["Hello World", "Beispiel"]
date = 2021-06-11T12:00:00+02:00
description = "ein kleines Hello World Beispiel"
title = "Hello World"
type = "post"
+++

#  HELLO WORLD (H1 Überschrift)

Dies ist ein Absatz

Dies ist ein weiterer Absatz

## H2 Überschrift

**bold**

*kursiv*

***bold & kursiv***

* Liste Punkt1
* Liste Punkt2

1. andere Liste
1. durchnummeriert
5. HUGO kann selber zählen

> Zitat
>
>> Zitat im Zitat

ergibt dann:

HELLO WORLD (H1 Überschrift)

Dies ist ein Absatz

Dies ist ein weiterer Absatz

H2 Überschrift

bold

kursiv

bold & kursiv

• Liste Punkt1
• Liste Punkt2

1. andere Liste
2. durchnummeriert
3. HUGO kann selber zählen

Zitat

Zitat im Zitat

Gibt natürlich noch mehr, aber man sieht schon, es ist wirklich simpel Content entsprechend zu formatieren.

HUGO Themes

Es gibt hunderte vorgefertigte HUGO Themes die man verwenden kann, aber man muss hier beachten dass man bei HUGO beliebig viele Taxonomien erstellen und nutzen kann, die standard Taxonomien sind section, category und tag. Aber nicht alle Themes nutzen diese auch, wenn man also zur Erstellung ein Theme verwendet das section und tag benutzt, kann man nicht so ohne weiteres zu einem wechseln das category und tag nutzt.

HUGO auf dem PC

HUGO selber ist eine Datei die man entweder direkt in das Arbeitsverzeichnis legen kann oder in einem Systemordner der im Suchpfad enthalten ist. Dann kann man den HUGO Webserver im Arbeitsverzeichnis per

hugo server -DF

starten, das -DF bewirkt dass auch die draft und future posts gerendert werden, also Entwürfe und vordatierte Beiträge. Der HUGO Webserver kann dann per localhost:1313 im Webbrowser auf dem selben PC aufgerufen werden, auch alle Änderungen werden sofort angezeigt. So kann man dann lokal ohne jeglichen Internetzugang am Design rumwerkeln und auch Content erstellen.

Mit dem Aufruf von

hugo

wird dann der Ordner public angelegt und dort die fertigen HTML Seiten inkl. aller Bilder etc. abgelegt, nur der Inhalt dieses Ordners wird dann auf den Webserver im Internet abgelegt, das ist dann die fertig generierte Webseite.

Wie hoch der Aufwand bis zur fertigen Webseite ist, liegt also hauptsächlich am verwendeten Theme und ob man hier noch selber Änderungen machen möchte oder ob man es so out of the box verwendet. Im letzteren Fall ist HUGO wenige Minuten nach der Auswahl des Themes bereit und es können die Beiträge erstellt werden.

Wenn man git in Kombination mit HUGO verwendet lässt sich das Veröffentlichen auch noch etwas automatisieren, so gibt es spezielle Hostinganbieter die aktuelle Änderungen direkt von github holen und dann die Seiten generieren, auch github selber bietet die Möglichkeit an githubpages per HUGO zu erstellen.

Link: HUGO Webseite