Hugo – bloggen ohne PHP und Datenbank

Dies ist der dritte Teil der Serie zur digitalen Teilhabe, schlankem Bloggen und “own your stuff” Die ersten beiden Teile:

Update Oktober 2021: ich habe unten zwei Links zum Thema “wie implementiere ich eine Suche in einer statischen Website?” ergänzt.

Bloggen, keine Software pflegen

Ein Orkan zog über das Internet und er hat einen Namen: DSGVO. Wer die letzten Monate nicht gerade auf einem Selbstfindungstrip in Tibet verbracht hat, kann das Thema wahrscheinlich nicht mehr lesen und hören. Dies wird auch, da können Sie ganz beruhigt sein, kein Artikel zu diesem Thema. Allerdings ist vielen Nutzern einer Blogging-Platfform (WordPress, Blogspot, Medium) bewusst geworden, welch komplexes System sie da benutzen. Externe Scripts und Schriftarten, Cookies und Tracking-Pixel, Kommentarformulare und Werbebanner, eingebettete Inhalte von fremden Server und was noch alles. Dazu unter Umständen einen ganzen Zoo an Plug-Ins, die Sie unter WordPress auch als zahlender Benutzer nicht vollständig kontrollieren können (erst wenn Sie WordPress auf einem eigenen Server betreiben).

Diese Situation und auch die zunehmende Nutzung von Blogs in Bildungsprojekten haben dazu geführt, dass sich viele Leute umsehen, was es denn für Alternativen zu diesem “fetten” Ansatz gäbe. Die gibt es. Herbert (@DigitalWriter auf Twitter) hat dazu einen sehr informativen Artikel über das System Bludit geschrieben.

Diese Systeme sind schlank, aber erfordern für den Betrieb immer noch PHP und damit mehr Konfigurations- und Pflegeaufwand als das berühmte “einfach nur ein paar Seiten ins Netz stellen”. Ich möchte an dieser Stelle daher eine schlanke, ja sogar minimalistische Software vorstellen, mit der ich seit einigen Jahren mein Blog betreibe. Dabei kann ich mich auf das Schreiben meiner Artikel (in Markdown) beschränken und arbeite mit minimalem Technikeinsatz.

Was halten Sie denn von folgender Lösung?

  • Open Source, kostenlos, seit Jahren von einem aktiven Team entwickelt
  • Die “Installation”: Herunterladen einer ZIP-Datei, auspacken, irgendwohin kopieren
  • Es reicht ein relativ schwaches Notebook (wenn Windows 7 drauf läuft, haben Sie gewonnen)
  • Die Software gibt es für Windows, für Linux, für den Mac und noch einige andere Systeme
  • Sie benötigen keine Datenbank, kein PHP, keine Zusatzsoftware
  • Sie können die Software ohne einen Webserver lokal nutzen
  • Es sind beliebig viele Blogs parallel möglich
  • Sie können die Software lokal auf Ihrem Rechner betreiben, auch ohne Internet-Verbindung
  • Jeder Artikel ist eine einzelne, einfache Textdatei
  • Es gibt eine Menge an freien Layouts/Themes
  • Sie erstellen Arikel ganz einfach in Markdown

Klingt ganz interessant, nicht wahr? Vor allem, wenn ich Ihnen sage, dass Sie damit Ihr Blog innerhalb von weniger als einer halben Stunde am Laufen haben. Wo der Haken ist? Nirgendwo, Sie müssen nur etwas Aufgeschlossenheit mitbringen, um dem digitalen FastFood den Rücken kehren zu können. Und Sie müssen ein ein Kommando in der Eingabeaufforderung eingeben können. Eines.

Moment Mal, “Eingabeaufforderung”?

Gerade erzähle ich Ihnen was von “einfach” und jetzt komme ich mit der Eingabeaufforderung ums Eck? So richtig Kommandos eingeben? Ja, weil’s einfacher ist. Klingt komisch, ist aber so. Ich verstehe Ihren Standpunkt sehr gut. Viele Betreiber eines Blogs haben ja gerade z.B. WordPress gewählt, wiel die Bedienung so “einfach” war und alles über eine Weboberfläche läuft. Das macht ein System aber immer auch aufwändiger. Sowohl für WordPress als auch für Bludit benötigen Sie einen Webserver, d.h. in den meisten Fällen einen Provider und schreiben, vorschauen und basteln geht auch nicht ohne Internet-Verbindung. Zusätzlich müssen Sie sich in einer grafischen Admin-Oberfläche zurecht finden und können ohne Browser und Zugriff aufs Internet nichts an der Konfiguration Ihres Blogs ändern. Alles Dinge, die bei Hugo problemlos möglich sind. Aber dazu später mehr.

Sie können problemlos die Kommandozeile nutzen. Alles, was wir tun werden, ist einen Ordner zu wechseln (entspricht dem Klick auf einen Ordner im Windows Explorer) und ein Programm zu starten, indem wir den Namen eingeben. Und keine Angst: kaputt machen können Sie in Windows Dinge viel leichter über den Windows Explorer :-)

Hugo — die Tour

Dieses System nennt sich Hugo. Hugo ist ein Verteter der sogenannten static site generator (SSG). Das bedeutet, für die Veröffentlichung wird das Blog als eine Sammlung von HTML-Seiten erzeugt. Sie benötigen keine Datenbank, kein PHP, kein Ruby, etc. – der Webserver reicht. Sie kopieren das erzeugte Blog auf Ihren Webspace und sind fertig.

Das “statisch” ist übrigens weit weniger schlimm, als es klingt. Mein Blog benutzt JavaScript, es gibt Links zu Videos und eine schöne Schriftart (natürlich selbst gehostet). Statisch meint in diesem Fall, dass der Webserver nichts anderes tun muss, als die HTML-Seiten auszuliefern und die Konvertierung der Artikel in HTML bereits vor der Auslieferung erfolgt. Andere Systeme wie WordPress tun das auf Anfrage “dynamisch” immer wieder und benötigen entsprechend Leistung. Dieser Unterschied fällt dratischer aus, als Sie jetzt vielleicht denken. Jeder Zugriff auf Ihr Blog bei Systemen wie WordPress muss durch den Webserver, dann wird vom PHP-Interpreter der Code ausgeführt, der dann auf die MySQL-Datenbank zugreift, um die Daten zu laden. Anschließend geht es alle drei Schichten wieder zurück. Bei einer statischen Seite kommt der Zugriff auf das Blog, der Webserver liefert die Seite als HTML aus, fertig!

Zusätzlich ist der Angriffsvektor, also die Größe der “Zielscheibe”, die Ihr Server bietet, wesentlich kleiner, da für die Funktion des Blogs nur der Webserver nötig ist. Das bedeutet, Sie können das Thema Sicherheitspatches, Upgrades des Blogsystems oder von Plugins getrost vergessen. Die Datenbank muss auch nicht aktualisiert oder gepflegt werden und PHP muss auch nicht sein.

Ein weiteres Designziel bei solchen SSGs (s. oben, static site generators) ist das Prinzip “möglichst alles ist eine Textdatei” und “Konvention geht vor Konfiguration”.

Der erste Punkt erlaubt Ihnen damit die freie “Werkzeugwahl”, denn alles was Sie benötigen, ist ein guter Text-Editor. Sie müssen auch keine Einstellungen in irgendwelchen Menübäumen suchen oder Informationen aus einer Datenbank lesen, sondern nur eine Datei öffnen. Sie sind also nicht auf eine Weboberfläche angewiesen, sondern benötigen nur einen Text-Editor (den Sie als Blogger sowieso haben sollten). Bei genügend großer Leidenfähigkeit kann das auch Notepad sein, aber ich empfehle einene der vielen frei verfügbaren Editoren wie z.B. Notepad++ oder Sublime Text oder Atom. Unter MacOS oder Linux gibt es eine noch größere Auswahl, hier findet jeder sicher einen passenden Editor.

“Konvention vor Konfiguration” bedeutet, dass jedes unter Hugo angelegte Blog einer definierten Ordnerstruktur folgt und bestimmte Dinge in bestimmten Dateien abgelegt werden. Damit können sich sicher sein, sich auch in einem “fremden” Blog zurecht zu finden bzw. bei mehr als einem Blog auf Ihrem System Dinge immer an der gleichen Stelle zu finden. Zusätzlich ist die Ablage der Konfiguration in einer Textdatei wesentlich “pflegeleichter” als wenn Sie nur über eine grafische Oberfläche an die Einstellungen kommen.

Der Rest des Artikels beschreibt die komplette Installation und Konfiguration eines Blogs mit Hugo. Weitere Informationen und Hilfen finden Sie in der Dokumentation zu Hugo und im Hugo-Forum.

Installation

Für diesen Artikel nehme ich an, dass Sie unter Windows den Ordner C:\hugo nutzen (bzw. unter MacOS oder Linux den Ordner /opt/hugo und dort mit Hugo arbeiten. Erstellen Sie diesen Ordner. Unter diesem Ordner legen Sie einen Ordner mit dem Namen bin an.

Sie laden sich von der Hugo-Downloadseite das Archiv für Ihr Betriebssystem herunter. Dieses Archiv öffnen oder entpacken Sie, da ist eine Datei mit dem Namen hugo drin (unter Windows hugo.exe). Diese Datei kopieren Sie nun in den Ordner c:\hugo\bin (bzw. auf dem Mac oder unter Linux nach /opt/hugo/bin).

Für Windows bietet es sich an, die hugo.exe in einen Ordner im Befehlspfad zu legen (Details)

Dazu rufen Sie die Systemeeigenschaften auf. In dem Dialogfeld wählen Sie den Reiter [Erweitert] aus klicken dann unten auf die Schaltfläche Umgebungsvariablen...

Systemeigenschaften in Windows

Liste der Umgebungsvariablen

In der oberen Liste mit den Benutzervariablen wählen Sie den Eintrag “Path” aus und klicken dann auf [Bearbeiten].

Den Befehlspfad bearbeiten

Hier durch Klick auf die Schaltfläche [Neu] klicken und den Ordner c:\hugo\bin von oben eintragen. Dann noch auf [OK] klicken und alle Dialogboxen schließen.

Danach können Sie einfach hugo eingeben und müssen nicht immer mit c:\hugo\bin\hugo den kompletten Pfad zum Programm eingeben. Das ist doch einfacher …

(Danke an Andreas für die Screenshots!)

Um ein neues Blog anzulegen (Sie können davon beliebig viele mit einem jeweils eindeutigen Namen haben), sind nur wenige Schritte nötig:

Für Windows

  1. Wählen Sie aus dem Startmenü “Ausführen..."
    (oder die Tastenkombination [Win][R])
  2. Geben Sie cmd.exe ein
  3. Wechseln Sie in den Hugo-Installationsorder mit dem Kommando cd c:\hugo
  4. Geben Sie das Kommando hugo new site BLOGNAME ein.

Für MacOS

  1. Drücken Sie die Tastenkombination [Cmd][Leertaste] (das ruft Spotlight auf)
  2. Geben Sie terminal ein
  3. Wechseln Sie in den Hugo-Installationsorder mit dem Kommando cd /opt/hugo
  4. Geben Sie das Kommando hugo new site BLOGNAME ein.
Beispielausgabe für Windows (Details)

In Windows sieht das beispielsweise für ein Blog mit dem Namen katzen-hueten so aus:

Microsoft Windows [Version 10.0.10240]
(c) 2015 Microsoft Corporation. All rights reserved.

C:\WINDOWS\system32>
C:\> cd c:\hugo
C:\hugo> hugo new site katzen-hueten

Congratulations! Your new Hugo site is created in C:\hugo\katzen-hueten.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.
C:\hugo> 

Schon fertig! Das Blog wurde angelegt und komplizierter wird’s auch nicht auf der Kommandozeile. Sie müssen nur das Kommando hugo kennen.

Wenn ich im restlichen Artikel vom “Basisordner” des Blogs spreche, dann ist damit dieser Ordner (hier c:\hugo\katzen-hueten) gemeint.

Ein Layout-Thema aussuchen

Es gibt den schönen Spruch “über Geschmack lässt sich nicht streiten”. Aus diesem Grund kann bei Hugo das Aussehen (Schriften, Layout, Farben), das als “theme” bezeichnet wird, natürlich auch gewechselt oder selbst erstellt werden. Die aktuelle Auswahl finden Sie auf der Website zu Hugo-Themes. Starten Sie zu Beginn mit einem der minimalistischen Themes und denken Sie daran, dass der weitaus größte Teil der Online-Aktivitäten mittlerweile von Mobilgeräten aus stattfindet.

In diesen Themes wird dauch definiert, wie und auf welche externen Ressourcen das fertige Blog zugreift. In Zeiten der DSGVO sollte es also nach Möglichkeit nicht mehr das bunteste, sondern eher ein datensparsames Theme sein. Ich arbeite gerade an einem minimalistischen, aber dennoch ansprechenden und vor allem “DSGVO-geeigneten” Theme, mit dem Sie möglichst keine Daten von Ihren Besuchern einsammeln und alles Scripts und Schriftarten auf dem eigenen Webspace hosten.

Sie finden das Repository für den Download des Themes auf Gitlab

Hier finden Sie eine ausführliche Anleitung zur Installation von Themes

Hugo konfigurieren

Jetzt noch (genau wie bei Bludit bzw. alle anderen Blogsystemen) ein paar Einstellungen festlegen, die Ihr Blog betreffen. Hier kommt ein weitere Vorteil von Hugo zum Tragen. Die Einstellungen liegen in einer Textdatei. Sie sind also nicht auf eine Weboberfläche angewiesen, sondern benötigen nur einen Text-Editor (siehe oben). Damit bearbeiten Sie die Datei config.toml, die Hugo im Ordner des Blogs angelegt hat. Was die einzelnen Punkte bedeuten, finden Sie in der Dokumentation zu Hugo.

baseURL = "http://example.com/"
languageCode = "de-DE"
language = "de-DE"
defaultContentLanguage = "de-DE"
title = "Katzen hüten"
theme = "purismo"


[params]
    author = "Vorname Nachname"
    profilepic = "/img/avatar.jpg"
    description = "Ein Blog über die Mittagsbetreuung"
    accent = "green"
    showBorder = true
    backgroundColor = "white"
    font = "Raleway" # should match the name on Google Fonts!
    copyright = "Lizenz (wenn nicht anders angegeben): CC-BY-SA 4.0"

Dateistruktur

Der grundlegende Aufbau eines Blogs sieht in der Regel so aus (hier werden nur die Ordner aufgelistet):

katzen-hueten
├── archetypes   <-- hier liegen Schablonen für neue Dateien
├── config.toml  <-- die Konfigurations-Datei für Hugo
├── content      <-- hier liegen die Inhalte
│   ├── page     <-- Seiten (z.B. Impressum, Über...)
│   └── post     <-- Blogposts
├── data         <-- Zusätzliche Daten, Übersetzungen
├── layouts      <-- Optionale Dateien fürs Theme
├── public       <-- hier drin liegt das erzeugte Blog
├── static       <-- Statische Dateien (Bilder, Scripts, CSS ...)
│   ├── css
│   ├── images
│   └── js
└── themes      <-- hier drunter liegen die verfügbaren Themes, jeweils in eigenen Ordnern

Daneben gibt es noch einige Ordner für Scripts, CSS-Dateien und Schriftarten. Pro installiertem Thema (fürs Layout) gibt es ebenfalls einen Ordner, unter dem alle Dateien für das Thema leigen. Das war’s dann aber auch schon. Dieser grundlegende Aufbau ist für alle Hugo-Blogs gleich.

Auf den Server muss später nur der Ordner public mit allen Dateien und Unterordnern, mehr nicht. Dorthinein erzeugt Hugo im Standardfall das Blog.

Artikel verfassen

Der große Vorteil (für die Verwaltung, den Umzug auf ein anderes System oder das automatisierte Bearbeiten) von Systemen wie Bludit, grav oder Hugo ist es, dass jeder Post als eine einzelne Textdatei vorliegt. Die Texte werden wie in jedem modernen Blogsystem in Markdown erstellt. Damit ist für das Bearbeiten auch nur ein Editor (siehe oben) notwendig.

Die Artikel werden dann im Ordner content unter dem Blog-Basisordner abgelegt (in unserem Beispiel C:\hugo\katzen-hueten\content). Jedem Artikel entspricht ein Ordner in diesem Verzeichnis mit dem Namen des Ordner als URL-Pfad. Darin legen Sie den Text Ihres Artikels mit dem Namen index.md ab. Zusätzlich sammeln Sie alle Bilder und andere Medien zu Ihrem Artikel ebenfalls in diesem Ordner. Einfacher geht es kaum, denn alles liegt in einem Ordner, den Sie auch sehr einfach verschieben, archivieren oder anderweitig bearbeiten können.

Markdown-Editor

Damit haben Sie aber auch die Wahl zwischen allen “WYSIWYG”-Editoren, die Markdown direkt anzeigen, wie die Seite später formatiert wird. Sie sind eben nicht auf die Entscheidung des Anbieters festgelegt. Hier wäre beispielsweise Typora eine gute Empfehlung oder auf dem Mac MacDown.

Medien-Management

Da Sie alle Bilder und Medien zu einem Artikel im Ordner des Artikels sammeln, ist ein Medienmanagement mehr oder weniger unnötig, denn alle Bilder, die Sie per Markdown einbinden, liegen ja bereits in diesem Ordner. Ein Bild einbinden, ist also nicht mehr als:

![Titel des Bildes](./bildname.jpg)

Multi-Blogs mit Hugo

Da alles datei-basiert ist, ist es auch überhaupt kein Problem, mehr als ein Blog parallel zu betreiben. Sie legen mit hugo new site NAME einfach ein zusätzliches Blog im Basis-Ordner an. Für die Arbeit im Bildungsbereich ist dieser Ansatz sogar noch besser als bei Systemen wie Bludit, da Sie hier nicht einmal die Installation von Hugo kopieren müssen, sondern nur die reinen Dateiordner mit den Bloginhalten. Sollten Sie diese nach einer Archivierung nochmals verwenden wollen, wird einfach das Verzeichnis wieder zurück kopiert, Hugo gestartet und es läuft! Ebenso ist damit die rückstandsfreie Entsorgung von nicht mehr benötigten Dateien kein Problem. Wenn Sie den Haupt-Ordner des Blogs gelöscht haben, ist alles von diesem Blog entfernt, Sie müssen nicht noch an irgendwelchen anderen Orten nachsehen.

Hugo im Server-Modus (das lokale Blog)

Während der Arbeit an Artikeln (oder später Arbeiten am Layout) möchten Sie sicherlich sehen, wie die Seite später im Browser aussieht. Das funktioniert mit Hugo problemlos, denn Sie brauche dazu nicht mal eine Internet-Verbindung, denn Hugo bringt einen eigenen Webserver mit, der die Dateien Ihres Blogs überwacht und bei Änderungen sofort die Darstellung aktualisiert. Alles, was Sie dazu tun müssen, ist im Basisordner Ihres Blogs Hugo im Server-Modus zu starten. Was so cool klingt, ist einfach nur das Kommando server hinter dem Aufruf von Hugo:

c:\hugo\katzen-hueten> c:\hugo\hugo.exe server

oder unter Linux/MacOS:

/opt/hugo/katzen-hueten:  /opt/hugo server

Das wars auch schon!

Hugo gibt dann eine Meldung aus, dass die Dateien des Blogs überwacht werden und bei Änderungen das Blog neu erstellt wird:

Watching for changes in /Users/armin/Sites/arminhanisch.de/{content,data,layouts,static,themes}
Watching for config changes in /Users/armin/Sites/arminhanisch.de/config.toml
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Sobald Sie eine Datei, einen Artikel ändern, reagiert Hugo:

Change detected, rebuilding site
2018-05-31 00:24:49.911 +0200
Source changed "/Users/armin/Sites/arminhanisch.de/content/post/2018/hugo-bloggen-ohne-php-und-datenbank/index.md": CREATE
Total in 100 ms

Wenn Sie den lokalen Server stoppen wollen, können Sie das einfach mit der Tastenkombination [Strg][C] tun.

Blog erstellen

Hugo aufrufen

Angenommen, Sie waren schriftstellerisch fleißig und wollen Ihre Artikel jetzt im Web sehen. Dazu wird mit Hugo das Blog erzeugt und anschließend auf den Webspace kopiert. Zur Erstellung des Blogs geben Sie im Basisordner Ihres Blog (D:\hugo\katzen-hueten) einfach das Kommando D:\hugo\hugo.exe ein (die Anzahl der Seiten wird sich sicher von den Zahlen hier unterscheiden):

C:\hugo\katzen-hueten> c:\hugo\bin\hugo.exe

                   | DE
+------------------+-----+
   Pages            | 150
   Paginator pages  |  12
   Non-page files   |  26
   Static files     | 252
   Processed images |   0
   Aliases          |  49
   Sitemaps         |   1
   Cleaned          |   0

Total in 542 ms
c:\hugo\katzen-hueten

Ja, stimmt. Hugo benötigte weniger als eine halbe Sekunde, um das komplette Blog zu erzeugen und in HTML-Seiten zu konvertieren! Auch bei mehreren Tausend Seiten bleibt dei Erstellungszeit üblicherweise im Sekundenbereich. Sie können also beruhigt immer wieder ausprobieren, ob alles passt.

Blog kopieren

So. Diese Seiten müssen jetzt auf Ihren Webspace. Da ich Ihren Server nicht kenne und die Möglichkeiten von browser-basierten Uploads über Programme wie FileZilla, WinSCP oder der Kommandozeile reichen, ist die direkte Angabe eines Rezepts hier nicht möglich. Hier einige Links zum Upload per FileZilla, wenn Ihr Webhoster keinen browser-basierten Upload unterstützt:

Für alle, die nicht unter Windows arbeiten: der einfachste Weg ist ein Abgleich des erzeugten Ausgabeordners per rsync.

Nach dem Kopieren ist das Blog live und Sie können die Seiten im Browser aufrufen!

Fazit

Hugo ist eine schlanke, einfache und leicht begreifbare Möglichkeit, die berühmten “paar Seiten HTML einfach mal schnell ins Web zu stellen”. Sie haben alle Artikel als Markdown-Dateien vorliegen, alles ist eine einfache Textdatei und der Aufbau ist so einfach, dass Sie nach kurzer Zeit auch wissen, was wo und warum liegt. Das sind aber nicht die einzigen Vorteile.

Sicherheit

Ihr Webserver liefert nur einfache HTML-Seiten aus, es gibt keine Risiken durch veraltete Software oder noch nicht gestopfte Sicherheitslücken in PHP, der MySQL-Datenbank oder dem Blogsystem – weil es kein Blogsystem auf dem Server gibt! Beispiele zum Risiko von “fat blogs” finden Sie hier - 70% alle WordPress-Installationen weisen Sicherheitslücken auf oder das auch Drupal gravierende Lücken aufweisen kann. Hier wurden Nutzer der Software mit einer Vorwarnzeit von nur sieben Stunen darauf hingewiesen, dass Sie davon ausgehen sollten, dass ihr System gehackt ist, wenn Sie die Updates nicht eingespielt hatten …

Schnelligkeit

Der zu Beginn des Artikels angesprochene Unterschied zwischen der dynamischen Erzeugung von Seiten über ein server-basiertes Blogsystem und dem Ausliefern von statischen HTML-Seiten (und damit die Anforderungen an den Webauftritt) sind größer, als Sie vielleicht denken: im Artikel “Pregenerating Static Web Pages for Better Performance” führt Ben Kane einen Test mit WordPress aus, indem er einmal die normale WP-Installation nutzt und als Vergleich aus dem WP-Blog ein Set von statischen Seiten erzeugt (das, was Hugo von sich aus tut). Im ersten Fall liegt die Leistung des Server bei ca. 7 Anfragen pro Sekunde, im zweiten bei über 655 Anfragen pro Sekunde! Das ist eine Leistungssteigerung von über 9000% – machen Sie das mal in Hardware!

Flexibilität und Portierbarkeit

Wenn Sie von Hugo auf ein anderes Blog umziehen wollen, benötigen Sie keinen IT’ler für den Umzug. Schließlich ist gesamtes Blog eines Sammlung von Ordnern mit Bildern und Markdown-Dateien. Sie können an jede einzelne Datei ran, die Artikel sind in der “lingua franca” der Online-Welt, nämlich Markdown, geschrieben. Es gibt keinen Lock-In-Effekt und Sie sind jederzeit Herr Ihrer Daten auf Ihrem Rechner.

Geringer Resourcenbedarf

Hugo läuft auch auf “kleinen” Rechnern – im wahrsten Sinne des Wortes, denn es gibt sogar eine Version für den RaspberryPi! Ein Windows 7 oder eine Linux-Installation auf einem Notebook ist alles, was Sie brauchen, um loszulegen!

Durch die Vorgenerierung des Blogs sind auch die Anforderungen an den Webserver, der das fertige Blog dann ausliefert, sehr gering. Hier ein kleiner Vergleich, was auf dem Webserver laufen muss, wenn Sie WordPress und wenn Sie Hugo nutzen:

WordPress Hugo
Betriebssystem Betriebssystem
Webserver Webserver
PHP
MySQL
WordPress
Plugins/Templates

Verfügbarkeit

Da für Hugo nur der Webserver und Ihr Webspace nötig ist, fallen auch weniger Wartungsarbeiten, Updates und Backups an und das System läuft stabiler.

Skalierbarkeit

Ich wünsche Ihnen für Ihr Blog jede Menge Leser. Was bei Hugo auch kein Problem ist, denn Tausend Zugriffe pro Sekunde sind für Hugo und einen nginx-Webserver noch kein Problem, während das bei Drupal, Typo3 oder Wordpress ganz anders aussieht. Der Gerechtigkeit halber muss hier aber auch gesagt werden, dass Syteme wie Typo3 oder WordPress mittlerweile ganz andere Zielgruppen haben als um “digitale Teilhabe” bemühte, private Bloggerinnen oder Blogger.

Kosten

Wie ich in Teil 1 der Serie schrieb, lässt sich ein Hugo-Blog mit einer eigenen Domain für ca. 5€ pro Monat betreiben. Für die gleichen Funktionen (änderbares Layout, Plugins, etc.) benötigen Sie mindestens den Premium-Account bei WP, der mit 8€ zu Buche schlägt, andere Systeme sind preislich etwas auf dem gleichen Niveau.

Passt nun ein System wie Bludit oder Ghost.org, also ein “Flat File CMS” besser zu Ihnen oder ein “Static Site Generator” wie Hugo? Diese Entscheidung kann ich Ihnen natürlich nicht abnehmen. Wenn Sie aber minimalistische, verstehbare Software bevorzugen, die Ihnen die volle Kontrolle über Ihr System lösst und bei der Sie lokal an einem Rechner schreiben und bauen können, um wirklich ein Verständnis für die Dinge “hinter” dem Blog-Artikel zu erweben und digitale Sourveränität zu haben, dann sollten Sie sich Hugo einmal detaillierter ansehen.


Suchen in einer statischen Website

Ich habe hier beispielhaft zwei Links aufgeführt, die zeigen, wie sich eine Suche mit JSON und JavaScript bauen lässt. Das sind nicht die einzigen Möglichkeiten, aber zwei Ansätze, die ohne externe Anbieter auskommen.

Volltextsuche für HUGO

Build a Search Bar for Your Hugo Blog With a JSON Index and Some Vanilla JS


Kommentare

Von e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855 am 2018-11-16:

Alles super. Wie geht das dann mit den Kommentaren?

Das steht hier beschrieben.


Von 9d8c5a605e4cb1e6273be62c2ca06fb3c17cef457a587f92ea6f588152ae4ee6 am 2019-05-27:

Armin, toller Artikel. Danke! Gibt es spezielle HOSTER nur für Static Sites, also ohne PHP, MySQL, etc.?

Es reicht ein normaler Webspace. Wenn Du kein Paket mit PHP, etc, pp. bei einem Hoster buchen möchtest, dann ist wahrscheinlich das Angebot von Gitlab https://docs.gitlab.com/ee/user/project/pages/ oder Github https://pages.github.com/ eine gute Wahl.

Share Kommentieren
X

Ich habe einen Kommentar zum Artikel

Sie können die Kommentarfunktion ohne die Speicherung personenbezogener Daten nutzen. Schreiben Sie Ihren Kommentar und klicken Sie auf "Abschicken", der Versand erfolgt per Mail von meinem Auftritt aus an mich zur Prüfung. Dieser Versand und die Übertragung Ihres Kommentars ist zur Erfüllung der von Ihnen mit dem Klick auf "Abschicken" ersichtlichen Absicht technisch notwendig und bedarf keiner weiteren Einwilligung.

Wichtiger Hinweis: Sie haben keinen Anspruch auf die Veröffentlichung Ihres Kommentars. Jeder hier eingegebene Kommentar wird zuerst geprüft. Ich behalte mir die Entscheidung vor, welche Kommentare ich als Ergänzung an den Artikel anfüge.