Mein Name ist Hugo

Oct 5, 2018 von
Schlagwörter: Hugo

Nein, hier geht es nicht um den französischen Schriftsteller Victor Hugo, sondern darum, wie dieser Blog technisch umgesetzt ist und warum wir ihn so und nicht anders implementiert haben. Hugo ist ein statischer Webseitengenerator und Open-Source-Software. Eine interne Dokumentation war sowieso vonnöten, warum also nicht gleich einen ersten Blog-Artikel daraus machen?

Eine kurze Diskussion

Wer einen Blog erstellen möchte, sollte sich im Wesentlichen mit zwei Fragen befassen:

  1. Über was möchte ich schreiben?
  2. Wie setze ich den Blog technisch um?

Während die erste Frage jeder Autor individuell beantworten muss, kann man die zweite Frage durchaus verallgemeinern. So viele Möglichkeiten gibt es ja nun auch wieder nicht. Wir sind folgenden Weg gegangen.

Auf Blog-Plattformen wie WordPress oder Blogger von Google haben wir von vornherein verzichtet. Gründe dafür waren u.a.:

  • Blog-Plattformen produzieren oftmals ziemlich aufgeblähtes HTML mit Unmengen an CSS- und Javascript-Includes, eingebettetem Javascript-Code usw.).

  • Es ist schwierig die volle Kontrolle über das Layout zu erhalten.

  • Ganz zu Schweigen von möglichen Problemen mit der Datenschutzgrundverordnung (DSGVO) bei einem Managed Hosting auf Google oder Wordpress.

  • Und auf das Installieren und Administrieren von MySQL und PHP für ein eigenes Hosting von WordPress hatten wir irgendwie keine Lust.

Stattdessen haben wir uns nach Alternativen umgeschaut und sind in der Welt der statischen Webseitengeneratoren hängen geblieben. Ein statischer Webseitengenerator produziert aus einer Sammlung von Inhaltsdateien (in der Regel sind dies Texte in der Auszeichnungssprache Markdown) eine statische Webseite mit allem Drum und Dran, in unserem Fall also einen Blog. Dieser kann dann auf jedem noch so einfachen Webserver hochgeladen werden, es wird keine Datenbank, kein PHP oder sonst etwas benötigt.

Statische Webseitengeneratoren gibt es zahlreiche. Wir haben uns für die Open-Source-Software Hugo entschieden:

  • Hugo lässt sich sehr einfach installieren: Zip-Archiv herunterladen, entpacken und mit der resultierende EXE-Datei arbeiten, mehr muss nicht gemacht werden. Hugo ist in der Programmiersprache Go geschrieben (daher auch das “go” im Namen).

  • Hugo ist sehr schnell. Das Generieren eines kompletten Blogs dauert nicht mehr als eine Sekunde.

  • Hugo ist einfach anzupassen. Hat man einmal das Templating-System verstanden (und das ist nicht schwer), kann man auf jeden Aspekt der generierten HTML-Dateien Einfluss nehmen.

Uns macht es Spass, mit Hugo zu arbeiten. Wir haben sogar ein eigenes Theme entwickelt (dazu mehr in einem zukünftigen Blog-Artikel). In den nächsten Abschnitten zeigen wir euch, wie man Hugo unter Windows 10 installiert, einen ersten Blog-Artikel schreibt und das Ergebnis auf einem Webserver publiziert.

Hugo installieren und konfigurieren

Los geht’s:

  1. Lege auf deinem Computer unter C:\Programme einen neuen Ordner Hugo an.

  2. Lade Dir das aktuelle Windows-Zip-Archiv von dieser GitHub-Seite herunter: https://github.com/gohugoio/hugo/releases. Für die Version 0.49 wäre dies beispielsweise das Zip-Archiv hugo_0.49_Windows-64bit.zip.

  3. Entpacke das Zip-Archiv in deinem neuen Ordner C:\Programme\Hugo.

Du siehst jetzt drei neue Dateien in deinem Ordner: hugo.exe, LICENSE und README.md. Falls du irgendwie mehr Dateien erwartet hattest, dann bist du nicht der/die erste. Aus mehr besteht Hugo aber nicht.

Um dir die zukünftige Arbeit mit Hugo zu erleichtern, erweitere bitte die Umgebungsvariable Path um deinen neuen Hugo-Ordner:

  1. Öffne die Windows-Systemsteuerung und klicke dort auf System.

  2. Klicke links auf Erweiterte Systemeinstellungen. Ein Dialogfenster öffnet sich.

  3. Klicke auf der Registerkarte Erweitert auf die Schaltfäche Umgebungsvariablen.

  4. Markiere unter Benutzervariablen die Variable Path und klicke auf Bearbeiten. Ein weiteres Dialogfenster öffnet sich.

  5. Füge nun den Pfad c:\Programme\Hugo hinzu und bestätige alle Dialogfenster.

So, Hugo ist nun installiert. Wir setzen unseren Blog auf.

Öffne die Eingabeaufforderung von Windows und tippe folgendes ein (Bestätigen mit der Eingabetaste nicht vergessen):

hugo new site c:\mein-blog

Hugo erstellt jetzt das Grundgerüst eines Hugo-Projekts im Ordner c:\mein-blog.

Wir sind aber noch nicht fertig. Hugo weiß nichts davon, dass du ein Blog aufsetzen möchtest. Und schon gar nicht wie dieser Blog denn aussehen soll. Das ist aber kein Problem, du musst lediglich ein Hugo-Theme installieren.

Wir nutzen jenes Theme, welches wir für unseren STÜBER SYSTEMS Blog erstellt haben:

  1. Besuche die GitHub-Seite https://github.com/stuebersystems/hugo-theme-berlin.

  2. Klicke dort auf Clone or download und wähle die Option Download ZIP.

  3. Entpacke das Zip-Archiv im Ordner c:\mein-blog\themes.

Dort findest du nun einen neuen Unterordner mit Namen hugo-theme-berlin-master. Benenne ihn um in berlin (ist kürzer und klingt besser).

So, du bist fast fertig.

Es fehlt noch eine Anpassung in der Datei c:\mein-blog\config.toml. Öffne diese Datei in einem Texteditor und ändere den Inhalt wie folgt ab (Speichern nicht vergessen):

baseurl = "https://example.com/"
title = "Mein Blog"
languageCode = "de"
defaultContentLanguage = "de"
theme = "berlin"

Sehr gut. Jetzt fehlt nur noch etwas Inhalt.

Übernimm wieder die Eingabeaufforderung und wechsle in deinen Blog-Ordner:

cd c:\Mein-Blog

Und gleich danach tippst du folgendes ein:

hugo new posts/mein-erster-artikel.md.

Eine neue Datei mein-erster-artikel.md wird im Ordner c:\mein-blog\content\posts erzeugt. Öffne diese mit einem Texteditor und ändere den Inhalt wie folgt ab (Speichern nicht vergessen):

---
title: "Mein erster Artikel"
date: 2018-10-05T18:09:05+02:00
---

Das ist mein erster Artikel.

<!--more-->

## Mein erster Abschnitt

Das ist mein erster Abschnitt...

Fast geschafft. Zurück zur Eingabeaufforderung. Tippe folgendes ein:

hugo

Hugo erzeugt jetzt im Ordner c:\mein-blog\public deine Blog-Webseite mit allem Pipapo. Du kannst sie dir in deinem Web-Browser anschauen. Tippe dazu zunächst folgendes ein:

hugo server

Hugo besitzt einen eingebauten Web-Server, der gestartet wird. Öffne deinen Web-Browser und navigiere zur URL:

http://localhost:1313

Da ist er, dein Blog! Ja, es sieht noch ein wenig leer aus. Ist aber auch kein Wunder, du hast erst einen kleinen Blog-Artikel geschrieben. Aber: Der Anfang ist gemacht.

Publizieren

Dein erster Blog-Artikel ist fertig, nun möchtest du deinen Blog publizieren. Dafür benötigst du:

  1. Einen Webserver, entweder einen eigenen oder einen vorkonfigurierten bei einem Webhoster deiner Wahl (z.B. Hosteurope, Strato, 1&1, etc.).

  2. Du richtest eine neue Webseite ein. Bei einem Webhoster kann man das in der Regel ganz bequem über eine grafische Oberfläche machen.

  3. Du kopierst alle Dateien aus dem Unterordner public auf die neue Webseite. In der Regel geschieht dies per FTP oder WebDAV.

Das war’s, dein Blog ist live.

Es ist egal, ob dein Webserver unter Windows oder Linux läuft und du musst auch keinen Zugriff auf MySQL oder PHP haben. Dein Blog besteht ausschließlich aus statischen Dateien und läuft auf so ziemlich jedem Webserver.

Fehlt noch was?

Ja, wir haben noch nicht über das Kommentieren von Blog-Artikeln, das Automatisieren des Publikationsvorgangs sowie das kollaborative Schreiben von Blog-Artikeln gesprochen. Das alles sind natürlich Themen für zukünftige Blog-Artikel :-)

Zusammenfassung

Wer einen eigenen Blog schreiben möchte und in der Lage ist, mit der Kommandozeile zu arbeiten und Dateien von A nach B zu kopieren, der kann sich mit Hugo unabhängig machen von Blogger, Wordpress & Co und seine eigene, schlanke und schnelle Blog-Plattform aufbauen.

Ausführliche Infos zu Hugo findest du auf den offiziellen Hugo-Webseiten:

Und selbstverständlich fördert eine Google-Suche nach “Hugo Einführung” oder “Hugo tutorial” eine Vielzahl an hilfreichen Webseiten zu Tage.

Teile diesen Artikel
comments powered by Disqus