Wechsel zu Hugo

mdn

Die Umstellung ist vollbracht, der Blog sowie meine Webseite und die vorherige KnowHow-Sektion sind nun umgezogen worden. Daher hallo und herzlich willkommen zur neuen Version des Blogs. Es wurden alle alten Inhalte übernommen und ein paar neue wurden auch schon ergänzt.

Abwägung

Zuerst natürlich mal die Frage, warum habe ich den Umzug überhaupt durchgeführt.

Vorteile

Zum einen kommen die bekannten Vorteile die jeder bei einer Umstellung angibt:

  1. die erhöhte Geschwindigkeit der Webseitenaufrufe, da es statische Seiten sind
  2. die geringere Ressourcenbelastung
  3. der Schutz des Server, da keine serverseitigen Skripte aufgerufen werden

War mir persönlich noch wichtiger ist:

  1. die Sicherung meiner Daten in einem Git-Verzeichnis Vorher hab ich mir täglich einen Abzug der Datenbank aus meinem Wordpress-Blog zugeschickt. In dieser war aber nur ein Abzug der Datenbank enthalten, somit waren alle hochgeladenen Dateien verloren.
  2. Geschützt vor Veränderung meiner Daten Da ich leider den Fall schon hatte, dass mein Blog gehackt wurde, und darin Artikel verändert wurden, war immer wieder am überprüfen ob Änderung von anderen durchgeführt wurden. Dies würde ich nun durch das Git-Repository sofort bemerken.
  3. Inhalt wird in Markdown geschrieben Da ich immer wieder Probleme mit dem Onlineeditor hatte, da dieser ständig die Formatierung etwas verändert hatte, musst eich zu häufig in den HTML-Code und dort wieder alles anpassen.

Nachteile

Dann kommen wir noch zu den Nachteilen einer Hugo bzw. statische Webseite:

  1. kein Online-Editor vorhanden
  2. keine Kommentare möglich

Da ich typischerweise meine Artikel immer von Zuhause geschrieben habe, benötige ich die Online-Funktionalität nicht. Zudem könnte ich über die Weboberfläche meines Git-Repository auch die Dateien anpassen bzw. erzeugen. Zusätzlich wird diese automatisiert auf dem Server erzeugt, sobald Änderungen am Repository erkannt werden.

Und zu den Kommentaren, da leider von den über 2000 Kommentaren nur 42 sinnvolle (einschließlich meiner Antworten) enthalten waren, habe ich mich hier dazu entschlossen das ganze auf Email-Basis umzustellen. Diese bedeutet, wenn ihr einen Kommentar zu einem Artikel anbringen wollt, dann schreibt mir bitte eine Nachricht. Wenn dabei nicht angegeben wurde, dass der Kommentar nicht veröffentlicht werden soll, dann übernehmen ich den Kommentar sowie eine Antwort zu bei der nächsten Revision.

Umstellung

Die Umstellung hab ich in mehreren Schritten durchgeführt. Wie man mit Hugo arbeitet, bzw. ein eigenen Theme erstellt, habe ich in einen anderen Artikel beschrieben.

Aufbauen

Nach dem erstellen der Seite und dem Repository, hab ich mir eine Test-Domain angelegt, auf der ich die ganze Webseite überprüfen kann. Um es hier einfach zu haben, hab ich mir dazu noch ein publish-Skript wie hier beschrieben erzeugt und diese als Webhook aufgerufen. Damit wird der aktuelle Stand automatisch auf der Testdomain nach dem pushen erzeugt. Somit sehe ich auch gleich ob es Live genauso aussieht, wie im Testbetrieb mit dem Hugo-Server.

Übernahme der Daten aus der Webseite

Da die Webseite nicht viel Inhalt besitzt und dieser teilweise überarbeitet werden musste, habe ich mich hier dazu entschlossen diesen per Hand zu übernehmen. Dabei war darauf zu achten, dass die Zugriffspfade gleich bleiben. Dies war zum einen Notwendig damit vorhandene Verlinkungen weiterhin funktionieren. Zum anderen benötigt der WorkScheduler die aktuellen Zugriffspfade um die Aktualisierungen zu erkennen.

Hierfür habe ich die Urls über die Ordner-Struktur einfach nachgebaut und den Inhalt der Webseiten übernommen. Danach habe ich die Texte entsprechend umformatiert und überarbeitet.

Zum schluss musste ich mir noch eine Lösung für die Downloads einfallen lassen. Diese benötige ich zum einen in der Seite als Downloads. Zum anderen werden diese im Feed benötigt. Damit ich die Daten nicht mehrfach pflegen musste, hab ich die Informationen als Json-Datei hinterlegt.

Diese wird auf der Webseite über einen Shortcode aus dem Theme importiert. Für den Feed, da dieser als Unterordner definiert war, benötigte ich eine 2te Datei vom Type feed. Über slug wurde der Pfad entsprechend des alten definiert und über dataname wird der Dateiname der Json-Datei aus dem data-Ordner angegeben.

Der Aufbau der Datei ist wie folgt:

[
    {
        "title": "<der dargestellte Titel>",
        "url": "<adresse zur Datei>",
        "filesize": "<optional: Größe der Datei in Bytes>",
        "comment": "<Ein Kommentar zu dieser Version>",
        "published": <Datum der Freigabe im ISO8601-Format>
    },
    ...
]

Somit war die Webseite in Hugo übernommen.

Blog

Hier war etwas mehr arbeit notwendig. In meinen Fall hab ich mir das AddOn hugo-export installiert, und damit einen Abzug aller Posts erzeugt. Danach hab ich alle Dateien nochmal bearbeitet, gesäubert und in entsprechende Unterorder geschoben. Ich habe mich nun für folgenden Aufbau entschieden:

blog\
|-- <Jahr>
|   |-- _index.md
|   |-- 000-<Titel>.md

Jedes Jahr hat somit einen eigenen Ordner, wodurch die Artikel gegliedert sind. Die _index.md-Datei ist notwendig, damit die Jahreszahl als eigene Zugriffsebene erkannt wird. Diese muss in meinen Theme vom Typ archive sein, damit die Jahresübersicht richtig funktioniert. Und jeder Artikel hat eine aufsteigende Nummerierung, damit die Artikel in Ordner nach Erstellung sortiert angezeigt werden. Dies ist nicht notwendig, wurde vom hugo-export so übernommen.

Zusätzliche Dateien die in den Artikeln zum Download angeboten werden, liegen im static-Ordner ab. Dort ebenfalls im Unterordner blog<Jahr>.

Die KnowHow Beiträge sind in einen eigenen Unterordner knowhow gewandert und werden dort hoffentlich bald um neue Einträge erweitert.

Die Liste mit den mir wichtigen Links findet man auf den Hauptseiten in der Sidebar. Diese werden ebenfalls in einer eigenen Json-Datei gepflegt und diese über die config.toml definiert. Das Format dazu ist recht einfach und übersichtlich gehalten:

[
    {
        "name": "<Name der Kategorie>",
        "visible": <1 wenn sie angezeigt werden soll, sonst 0>,
        "urls":
        [
            {
                "url": "<die Url>",
                "name": "<der dargestellte Name des Links>",
                "target": "<wie der link geöffnet werden soll, z.B. _blank für neues Fenster>",
                "description": "<Kurze Beschreibung die unter den Link steht>",
                "visible": <wie oben, nur hier für den einzelnen Link>
            },
            ...
        ]
    },
    ...
]

Damit waren alle Daten aus dem Blog übernommen. Einzig die Kommentare sind noch offen. Diese liegen aktuell noch als Json-Datei ab und müssen noch eingebunden werden, hierfür muss ich mir aber noch eine sinnvolle und gut erweiterbare Struktur überlegen.

GoLive

Für das aktivieren der neuen Webseite musste nur wenig durchgeführt werden.

Bei der Webseite selbst war es relativ einfach. Zuerst musste das publish-Skript noch für die produktiv Umgebung angepasst werden. Dieser Part wird immer dann ausgeführt, wenn eine neue Release im Git-Repository erstellt wird. Nachdem die Seite erstellt wurde, musst nun noch der hinterlegte Pfad in der VHost-Konfiguration auf den neuen Ordner umgestellt werden. Für die Sonderlösung mit dem Feed, musst in der VHost-Konfiguration dann neben index.html und index.php auch noch die index.xml Datei mit aufgenommen werden. Da wie oben erwähnt die Zugriffspfade gleich geblieben sind, wird hier keine weitere Umleitung benötigt.

Da ich den Blog nun mit in die Webseite integriert habe, ist die eigene Domain nicht mehr notwendig. Da es aber auch hierauf noch einige Links gibt, sowie diese Adresse in den Suchmaschinen hinterlegt sind, wollte ich dafür eine Umleitung schaffen. Auch hier war es relativ einfach, da die Zugriffspfad fast identisch waren und sich von der neuen Webseite nur in den Unterordner Blog verschoben wurden. Für diesen Umzug hab ich die Original-Dateien entfernen und eine .htaccess-Datei hinterlegt mit dem nachfolenden Inhalt:

# Umstellung des Blogs auf den neuen GoHugo-BLog
RewriteEngine On
RewriteRule ^(.*)$ https://example.com/blog/$1 [R=301,L]

Fazit

Im Nachgang bin ich mir nun nicht mehr sicher, ob es bei der Übernahme der Artikel aus dem Blog, nicht einfacher gewesen wäre den Text direkt von der Webseite zu kopieren. Da im Nachgang doch vieles nochmal nachgearbeitet werden musste und die Struktur auch nicht wirklich sinnvoll war.

Sonst bin ich sehr zufrieden mit der neuen Lösung, da diese trotz nicht vorhandenen Online-Editor doch sehr einfach und leicht zu bedienen ist. Gerade die Verwaltung über das Git-Repository, finde ich als Entwickler, die beste Lösung um meine Daten zu sichern.

Und nun freue ich mich darauf neue Artikel zu erstellen und euch sinnvolle Informationen zukommen zu lassen.

web allgemein