Markdown + Hugo = Web für Minimalist:innen

Stellen Sie sich vor: Sie tippen auf einer Schreibmaschine einen Text, halten anschließend das Papier in die Luft – und eine Sekunde später erscheint dieser Text in einem modernen Layout auf einer Webseite. So ungefähr kann man sich den Ablauf vorstellen, wenn Textdateien mit dem Tool „Hugo“ kombiniert. Das Ergebnis? Ein Blog, ein Portfolio, eine Dokumentation, ein Foto-Journal – was immer Sie sich denken können.

Ein paar Worte zu Markdown

In den letzten Jahren wird Markdown zunehmend von Personen geschätzt, die viel mit Text umgehen müssen oder wollen – Journalist:innen oder Autor:innen beispielsweise. Aber auch für Backrezepte, Journaleinträge, Mitschriften, Projektanträge, Besprechungsprotokolle bis hin zu umfangreichen Buchmanuskripten eignet sich diese einfache Form der Texterfassung. Ein simpler Editor ist alles, was man benötigt. Da ich über die Möglichkeiten von Markdown bereits eine kleine Artikelserie verfasst habe („Mit Markdown ein robustes System für Notizen realisieren“), mag ein kurzes Video zur Auffrischung genügen:

Markdown-Texte in Highspeed-Webseiten verwandeln mit Hugo

Für eigene Angebote im Web gibt es viele Anlässe. Einige Beispiele:

• Man möchte eine Homepage für den Verein basteln, für den man tätig ist.
• Ein Reise-Blog soll die besten Fahrrad-Routen aufzeigen, die man im Allgäu entdeckt hat.
• Unterrichtsideen sollen für Kolleg:innen zur Verfügung gestellt werden.
• Fundstücke aus dem Archiv der eigenen Stadt sollen öffentlich ausgestellt werden.
• Literaturbesprechungen, Fotoanregungen, Umweltthemen und … und … und.

Solche Projekte kann man überraschend attraktiv und vielfältig mit simplen Markdown-Texten umsetzen.

Das Prinzip von Hugo & Co.

Ein sehr großer Teil der Seiten im Netz liegt nicht fix und fertig auf den Servern. Vielmehr erzeugt der Klick auf einen Link zunächst eine Reihe von Aktionen im Hintergrund: Aktuelle Inhalte werden von Server-Datenbanken übertragen, Wetterdaten oder News werden von anderen Servern geholt, Kommentar-Felder mit Datum versehen usw. Dies alles geschieht natürlich sehr schnell, dennoch kann dieser „Zusammenbau“ zu Verzögerungen führen, auch die Belastung des Servers kann durch hohe Abrufraten zu „Stockungen“ führen (aktuelles Beispiel: die Schul-Lernplattformen). Weitere Nachteile:

Hugo ist ein prominenter Vertreter von Tools*), die einen anderen Weg beschreiten: Auf Ihrem heimischen PC wird die (HTML-)Webseite bereits vollständig gestaltet und erst danach auf den Server übertragen. Die Besucher Ihres Angebots erhalten also bei jedem Klick umgehend die fertige Seite ohne Verzögerungen. Sollten Sie einmal umziehen wollen, so kopieren Sie nur den Hugo-Ordner aus Ihrem PC-Verzeichnis auf den neuen Server – der Umzug ist in wenigen Sekunden abgeschlossen. Und Sie können besonders preiswerte Angebote von den Serveranbietern nutzen, da Sie nur eine kleine Ecke Platz benötigen – aber auf PHP, MySQL-Datenbanken usw. verzichten können.

• Sie wissen oft nicht, was komplexe Systeme (z. B. WordPress mit seinen zahlreichen Erweiterungen) in Ihren Blog „packen“, was zu rechtlichen Problemen führen kann (Stichwort „DSGVO).
• Datenbanken und andere Komponenten auf einem Server sind anfällig für Angriffe.
• Ein Umzug auf einen neuen Server ist oft mit einem erheblichen Aufwand verbunden.

Der Ablauf

Hier gibt es eine schlechte, gute und sehr gute Botschaft. Die schlechte Botschaft: Erstinstallation von Hugo (Windows/MacOS/Linus) und Einstieg ist für „Nicht-Nerds“ nicht ganz einfach. Die gute Botschaft: Armin hat in seinem Blog eine ausgezeichnete und klein-schrittige Anleitung für Hugo-Neulinge gegeben. Da erspare ich mir die Doppelung – er kann so was viel besser als ich. Und nun noch die sehr gute Nachricht: Hat man diese erste Hürde geschafft, ist der weitere Weg unkompliziert. Man erstellt einfache (Markdown-)Textdateien, die man wie gewohnt auf einem Pfad ablegt. Beispielsweise „C:\Hugo\Mein_Blog\posts“ mit „1_der-anfang.md“ und „2_das-ende.md“. Später aktualisiert man bei Bedarf diese Dateien. Oder man fügt eine neue hinzu – etwa „meine_anschrift.md“.

[1] In der Abbildung links sieht man den Texteditor (ich verwende für Markdown gerne Typora, aber iA Writer und viele weitere Tools machen hier alle einen guten Job).
[2] Jede Textdatei im Verzeichnis ergibt später eine Webseite. Speichert man eine neue Textdatei, so entsteht auch eine weitere Webseite.
[3] Im Editor tippt man seinen Text, fügt Bilder, Links und Zitate ein**). Aber auch Video- und Audio-Dateien können eingebunden werden (Hugo verfügt für diese Zwecke über zusätzliche Befehle, die man in die Textdatei aufnimmt.)

[4] Eine Vorschau der Webseite kann man jederzeit im Browser aufrufen (Hugo bringt einen kleinen Server mit, der auf dem PC/Notebook läuft). Es gibt zahlreiche Layout-Vorlagen (sog. Themes), die man auswählen kann (man kann auch jederzeit das Theme wechseln).
[5] Wenn alles fertig ist, wird der Ordner mit den umgewandelten Seiten auf den „echten“ Server verschoben.***) Fertig.

Fazit

Wer möglichst unkompliziert****) mit einem Blog beginnen möchte, der ist nach wie vor mit Systemen wie WordPress oder Bludit gut bedient (Bludit bringt ja sogar einen Markdown-Editor mit). Allerdings muss auch hier, wenn man Werbeeinblendungen/Abo-Gebühren vermeiden möchte, ein gewisser Aufwand zu Beginn in Kauf genommen werden. (Ich selbst benutze WordPress schon über 10 Jahre, aber jeder Server-Umzug ist „anstrengend“ und in den letzten Monaten stört mit der neue Gutenberg-Editor gewaltig, der flottes Schreiben unterbindet.)

Hingegen halte ich das System für jene, die ohnehin Markdown für Texte verwenden, für sehr lohnend. Weitere Pluspunkte:

• Man kann in der gewohnten „Ordner-Text“-Struktur arbeiten, die man auch für andere (Offline-)Dokumente nutzt und behält damit die Übersicht.
• Abschnitte aus Dokumenten (z. B. die Einleitung eines Aufsatzes oder zentrale Gedanken) lassen sich einfach in eine Hugo-Textdatei kopieren und gelangen so auf direktem Weg ins Netz.
• Man kann beliebig viele unterschiedliche Webangebote (auch mit unterschiedlichem Design) im Hugo-Ordner führen. Die Struktur bleibt übersichtlich.

Hat man Hugo einmal korrekt installiert, so stellt sich wirklich ein „Schreibmaschinen-Gefühl“ für das Publizieren von Web-Inhalten ein. Das hat was … 😉

Homepage Hugo
Tutorial zur Installation von Armin
Podcast „Markdown“
Podcast „Hugo ohne Holunder“
YouTube-Tutorial-Serie von Mike Dane

*) Man findet derartige Tools unter dem Begriff „Static Site Generators“. Hier eine Liste.

**) Am Beginn einer Textdatei stehen die Metadaten (z. B. Autor und Datum). Dieser kleine Vorschub wird von Hugo automatisch erzeugt. Man kann diese Daten aber auch von einer vorherigen Datei kopieren und anpassen oder via Makro (siehe Artikel zu „Fastkeys“ im Blog).

***) Der Upload kann z. B. mit dem sehr guten (kostenlosen) Tool „FreeFileSync“ automatisiert werden.

****) Die technischen Installationsbeschreibungen auf der Hugo-Seite sind allerdings unnötig abschreckend. Anwender von Windows benötigen nur die eine (!) Mini-„Hugo.exe“-Datei, die völlig ausreichend ist.