Hugo? Hugo!

In meinem Beitrag am 13. Mai hatte ich mir Gedanken zu meinen Webauftritten und den Systemen dahinter gemacht. Und dabei auf Hugo verwiesen, einem Generator für statische Seiten. Mit dieser Anleitung wollte ich darstellen, wie ich das gemacht habe. Eventuell hilgt es ja dem einen oder der anderen.

Das Paket ist schnell heruntergeladen und entpackt. Erfreulich: nur die ausführbare Datei, eine Lizenz und eine Infodatei sind dabei. Super!

Die Anleitung zur Installation ist eher kompliziert. Man soll unter anderem Brew installieren, das richtige Paket finden, per Shell installieren et cetera. Puh, das schreckt doch erstmal ab. Aber nicht verzagen - Fragen!

Mein Hoster all-inkl.com (Partnerlink) gefragt, wie ich das am besten umsetze und den Tipp bekommen, es auf dem Server hochzuladen und dort auszuführen.

Und das ist wirklich ganz einfach!

Hugo auf Webserver betreiben

  1. Passendes Package (in meinem Fall Linux 64 Bit tar.gz) runterladen
  2. Folgende Struktur auf dem Server anlegen (Ordnernamen sind Beispiele!)
    • xxx/Kundennummer/FTP Root
    • HUGOORDNER
      • bin Gesamter Pfad (im Beispiel): xxx/Kundennummer/FTP Root/HUGOORDNER/bin
  3. die hugo Datei in den Ordner bin hochladen
  4. CHMOD auf 755 (bei meinem Provider)
  5. über SHH verbinden (ich nutze das Terminal am Mac und auf dem Android Smartphone JuiceSSH)
  6. cd HUGOORDNER auf Hugo Verzeichnis gehen
  7. cd bin in das bin Verzeichnis gehen
  8. ./hugo new site BEISPIEL eine neue Seite (BEISPIEL) anlegen (bei all-inkl musste ich noch ./ vor dem hugo Befehl setzen, das müsstet ihr einfach ausprobieren, wie es bei euch ist)
  9. .. (eine Ebene höher)
  10. cd BEISPIEL in das Verzeichnis der neuen Seite wechseln
  11. Im Seitenordner BEISPIEL dann unter /themes das gewünschte Theme hochladen und - wichtig - umbenennen- das “-master” kann weg!
  12. config.yaml via Filezilla oder Cyberduck herunterladen, bearbeiten, dort zum Beispiel das Theme einbinden, speichern, hochladen und Datei auf dem Server überschreiben.
  13. die Beispielseiten aus dem Theme, oder falls bereits vorhanden, Inhalts als markdown (TEST.md) hochladen auf den Server
  14. ../bin/hugo Hugo ausführen. Mit dem Befehl wechselt man aus dem Seitenverzeichnis eine Ebene höher und ins bin Verzeichnis. Das hat den Charme, bei mehreren Seiten nur eine bin zu haben, die aus der jeweiligen Seite ausgeführt werden kann.

Wenn alles richtig eingerichtet war, also die config.yaml und die Inhalte stimmen, dann sieht man im SSH folgendes :

../bin/hugo
Pages | 18
Paginator pages | 0
Non-page files | 0
Static files | 17
Processed images | 0
Aliases | 10
Sitemaps | 1
Cleaned | 0

Total in 461 ms

(als Beispiel, die Zahlen ändern sich je nach Umfang der eigenen Seite)

  1. Inhalte nun aktualisieren, anpassen, schreiben, hochladen. Ich nutze als markdown Editor mit stackedit.io ein Onlinetool.
  2. erneut ../bin/hugo Hugo ausführen.
  3. Seite im Browser der Wahl per F5 neu laden. Die Änderungen sollten nun da sein.

Als Beispiel ein Projekt von mir: Kochblog “Mann am Herd" - gestartet Mai 2020 - mit Hugo und PaperCSS als Theme.

Fazit

Klar geht es auch so, wie es die offizielle Anleitung beschreibt, mit mehr Code Eingaben, lokaler Installation, einer Verbindung zu Github und so weiter, aber ich mag meine Lösung, weil sie es ermöglicht, Hugo auf dem Server zu betreiben und man - egal, wo man gerade ist - sich lediglich per webftp zum Upload der Inhaltsseiten verbinden muss und per Smartphone via SSH die Seite mit Hugo aktualisieren kann. Egal, ob es der Dienstrechner, der private Mac oder der Laptop von Freunden ist.