Auf dem Weg zu diesem Blog

[TOC]

Hello friend ng (Hugo)

Doch wer ist ng? Was hat er mit statischen Webseiten zu tun? Die Frage wird später beantwortet. Zunächst gilt es zu klären, was er mit Hugo zu tun hat.

Wer ist Hugo?

Hugo ist ein Vertreter der sog. static site generators (SSG), der in Go geschrieben ist. Mit Hugo lassen sich Webseiten erstellen. Wie mit anderen CMS (Wordpress, Joomla, Drupal etc.) nur eben nicht dynamisch mit PHP, Datenbank und was sonst noch dazu gehört. Sondern statisch. Einen Vergleich zwischen dynamisch und statisch kann man z.B. hier sehen. Oder einfach im Netz suchen, inzwischen gibt es eine Fülle von Informationen dazu.

Wie alle Generatoren für statische Webseiten ist Hugo

  • schnell,
  • leicht in der Anwendung und
  • gut konfigurierbar.

hugo

Neben Hugo gibt es noch andere SSGs wie

  • Gatsby,
  • Next,
  • Hexo,
  • Jekyll,
  • Pelica etc.

Hier gibt es eine Übersicht, dort eine andere - mit Information zur Verbreitung, Sprache, Lizenz und Template. Meine Entscheidung ist, wg. der oft gerühmten Geschwindigkeit und der Vielzahl der Templates, auf Hugo gefallen - obwohl mir Next, Gatsby oder Hexo (wg. Javascript) auf den ersten Blick mehr zugesagt haben. Eine detaillierte Beschreibung und Links zu den genannten Generatoren gibt es unter https://www.staticgen.com/.

Im weiteren Verlauf des Experiments (so möchte ich das beschreiben, was ich hier tue) will ich noch andere SSGs testen. Sei es, dass sich die Kriterien für meine Entscheidung als nicht so bedeutend bzw. unzutreffend erweisen, sei es, dass meine Neugier die scheinbar vernünftige Auswahl dominieren wird. Zunächst aber weiter mit Hugo.

Mit Hugo lässt sich ein Verzeichnis mit Inhalten und Templates erstellen, die zu einer vollen HTML-Website gerendert werden, inkl. der erzeugten Sites (mit Posts oder einzelnen Pages, z.B. das Impressum dieses Blogs). Somit werden PHP mitsamt einer Datenbank oder andere Programmiersprachen nicht mehr benötigt. Die generierten Seiten müssen nur noch auf den Webspace geladen werden. Und alles ist getan.

Hugo installieren

Hugo ist ein Open-Source Programm, das plattformübergreifend angeboten wird, und auf dem Rechner installiert werden muss. Die Installation ist einfach (das ist die gute Nachricht) und nicht nur hier, sondern auch ausführlich von Armin Hanisch beschrieben. Es gibt nicht nur die offizielle, ausführliche Dokumentation, sondern auch diverse Tutorials, z.B. von Mike Dane. Das Arbeiten mit Hugo ist nicht ganz so einfach (das ist die weniger gute Nachricht), weil auf der Konsole (Kommandozeile) gearbeitet wird. Doch der Reihe nach.

Ist das Programm normalerweise im Verzeichnis C:\hugo\bin installiert, erweist es sich als sinnvoll eine Umgebungsvariable für hugo.exe zu setzen.

  • cmd - path (Angabe des Pfades) - temporär setzen mit: path %path%; „C:\hugo\bin“
  • dauerhaft: Computer -
    • Eigenschaften -
    • Einstellungen ändern -
    • Reiter Erweitert: Umgebungsvarablen: Path -
    • Bearbeiten -
    • Wert der Variablen: C:\Users\akpe\.windows-build-tools\python27; und so weiter mit C:\hugo\bin ergänzen -
    • mit OK bestätigen -
    • Fertig.

Ein Hugo-Projekt erstellen

Um ein Projekt (Webseite, Blog oder was auch immer im Netz veröffentlicht werden soll) mit Hugo zu erstellen, müssen auf der Konsole (Kommandozeile) bestimmte Befehle eingegeben (getippt) werden. Das hört sich komplizierter an als es ist.

Unter einem Windows Betriebssystem wird die sog. Windows-Eingabeaufforderung (Windows - Programme - cmd.exe) benötigt.

Komfortabler, da es mehr Einstellungsmöglichkeiten gibt, in der Nutzung ist das Programm Console2 (a Windows console window enhancement).

by By Vamsi Krishna – Posted on Aug 10, 2014 in Windows

Mehr dazu bzw. auch Hinweise für die Arbeit mit anderen Betriebssystemen sind hier zu finden.

Nachdem Hugo installiert ist, befindet sich das Programm im Verzeichnis C:\hugo\bin. Auf Console2 bewegen wir uns mit

# cd C:/hugo

dorthin, legen ein neues Unterverzeichnis an 1

# mkdir Sites

und erstellen ein neues Projekt

# hugo new site Name-des-Projekts

Als Name des Projekts kann der Name des Themes eingegeben werden2.

Mit der Eingabe des Befehls wird ein neues Projekt wird mit folgendem Verzeichnisinhalt angelegt (zur detaillierteren Darstellung siehe auch Directory Structure oder hier):

  • archetypes (Schablonen für neue Dateien, z.B. default.md)
  • assets
  • config (die Datei für die Grundkonfiguration von Hugo)
  • content (alle Pages und Posts im Markdown-Format sowie alle Bilder in dem jeweiligen Unterverzeichnis)
  • data (zusätzliche Dateien, Übersetzungen, ist ansonsten leer)
  • layouts (optionale Dateien für das Theme in den jeweiligen Unterverzeichnissen)
  • static (enthält statische Dateien und Verzeichnisse, Scripts, manchmal auch Bilder)
  • themes (ist in der Regel zunächst noch leer, wird erst mit der Installation des Themes gefüllt)
  • public (alle Dateien für die Website, die erst mit dem Generieren der HTML-Sites erstellt werden).

Damit steht das Grundgerüst, aber es fehlt noch das spezielle Design (mit Beispielseiten zum ersten Anschauen), mit anderen Worten: das Theme.

Themes für Hugo

Themes bestimmen das Aussehen der Website und für Hugo gibt es davon jede Menge. Für jeden Geschmack sollte hier etwas zu finden sein. Getaggt sind sie nach Kriterien wie z.B.

und sieht im Überblick so aus:

![List I Hugo Themes](/posts/Complete List I Hugo Themes.png)

Wie Themes per Download einer Zip-Datei zu installieren sind, ist hier gut beschrieben.

Mit git geht es einfacher. Für das Theme Hello friend ng z.B. so:

#  git clone https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng

Selbstverständlich kann man sich ein Theme auch selbst erstellen.

Themes: Call me Sam, Hermit, Hello Friend NG

Es gibt eine Menge von Themes für Hugo. Drei stehen in der engeren Auswahl. Mal das eine, dann wieder das andere.

Call me Sam

  • Showcase content
    • Content-focused page templates for list pages, single pages, and posts
    • A responsive CSS grid gallery page that renders from a folder of images
  • Customize
    • Custom navigation menu set via config.toml
    • Custom footer text
  • Developer-approved
    • Syntax highlighting
    • Share-ready pages with Open Graph and Twitter metadata you can customize in config.toml and page front-matter
    • Effortless use of Hugo Pipes to generate CSS from Sass files

Quelle

Hermit

  • A single-column layout and carefully crafted typography offers a great reading experience.
  • Navigations and functions are placed in the bottom bar which will hide when you scroll down.
  • Featured image is supported. It will be displayed as a dimmed background of the page.
  • Displays all of your posts on a single page, with one section per year, simple and compact.
  • Extremely lightweight and load fast. No third party framework, no unnecessary code.
  • Responsive & Retina Ready. Scales gracefully from a big screen all the way down to the smallest mobile phone. Assets in vector format ensures that it looks sharp on high-resolution screens.

Quelle

Hello friend ng

  • Theming: dark/light mode, depending on your preferences (dark is default, but you can change it)
  • Great reading experience thanks to Inter UI font, made by Rasmus Andersson
  • Nice code highlighting thanks to PrismJS
  • An easy way to modify the theme with Hugo tooling
  • Fully responsive
  • Support for social

Quelle

config.toml konfigurieren

Die wichtigsten Einstellungen liegen in einer Textdatei, der config.toml, die sich mit einem Texteditor bearbeiten lässt. Bei der Installation ist die config.toml jedoch nicht im Hauptverzeichnis zu finden. Eine Beispieldatei config.toml ist im Theme-Ordner /themes/hello-friend-ng/exampleSite zu finden und kann in das Wurzelverzeichnis der Hugo-Seite kopiert und danach nach eigenen Wünschen angepasst werden.

Notwendig sind folgende Einstellungen in der config.toml:

  • baseURL = “/” (Definition der Wurzel-URL einer Website)
  • languageCode = “De-de”
  • defaultContentLanguage = “en” (de lässt sich hier nicht eintragen, warum auch immer)
  • title = “Unterwegs” (Name des Blogs)
  • theme = “hello-friend-ng” (das verwendete Theme)

In der config.toml lassen sich weitere einzelne Seiten anlegen, die im Menü angezeigt werden, z.B.

[menu]
  [[menu.main]]
    identifier = "impressum"
    name       = "Impressum"
    url        = "impressum/"
    weight     = 10
    
  [[menu.main]]
    identifier = "posts"
    name       = "Posts"
    url        = "posts/"
    weight     = 20
    
  [[menu.main]]
    identifier = "projects"
    name       = "Projekte"
    url        = "projects/"
    weight     = 30

  [[menu.main]]
   identifier = "tags"
    name      = "Tags"
    url       = "tags/"
    weight    = 40

  [[menu.main]]
   identifier = "datenschutz"
    name      = "Datenschutz"
    url       = "datenschutz/"
    weight    = 50

und so weiter …

Social Icons können angeben werden mit:

  [[params.social]]
    name = "twitter"
    url = "https://twitter.com/"
  [[params.social]]
    name = "instagram"
    url = "https://instagram.com/"

und andere mehr …

Weitere Erläuterungen sind in der Hugo-Dokumentation bzw. hier zu finden.

Neue Inhalte erstellen

Sites (regular pages)

Um eine neue Site im Wurzel-Verzeichnis content/pages zu erstellen3 genügt folgender Befehl:

# hugo new pages/page-title.md

Statt page-title.md ist der Site-Name anzugeben, z.B. Projekte. Der Name wird als Titel der Site übernommen (alle Anfangsbuchstaben werden groß angezeigt).

Blog Posts

Neue Beiträge (Posts) werden im content/posts Verzeichnis mit folgendem Befehl erstellt:

# hugo new posts/post-title.md

Statt post-title.md ist der Beitrag-Name einzutragen, z.B. Code poetry Der Name wird als Titel des Beitrags übernommen.

Bei der internen Verlinkung ist darauf zu achten, dass nur der Titel von Post (/posts/Datum/Titel-des-Posts) oder Site (Titel-der-Site) ohne die Endung .md angegeben wird.

Live Vorschau (LiveReload)

Da Hugo wird mit eingebautem LiveReload geliefert wird, müssen keine zusätzlichen Pakete installiert werden. Um den Hugo Server zu starten und sich die erstellten Sites im Browser unter //localhost:1313 anzusehen, genügt der folgende Befehl:

# hugo server 

hugo-server

Da neu erstellte Sites als Entwurf draft: true angelegt werden, muss der Hugo Server mit

# hugo -D server

gestartet werden. Ansonsten werden die als Entwurf gekennzeichneten Sites nicht angezeigt.

Während der Entwicklung einer Site können nun alle Änderungen, Ergänzungen oder Löschungen direkt (oder nur unwesentlich zeit verzögert) nachvollzogen werden. Überwacht werden folgende Verzeichnisse:

  • /static/
  • /content/
  • /data/
  • /layouts/
  • /themes/hello-friend-ng/
  • /config.toml

Wann immer Änderungen vorgenommen werden, wird Hugo gleichzeitig die Website neu aufbauen und weiterhin Inhalte bereitstellen. Sobald der aktuelle Entwicklungsprozess abgeschlossen ist, fordert LiveReload den Browser auf, die Seite neu zu laden.

Die meisten Stufen des Entwicklungsprozesses sind so schnell, dass die Änderungen möglicherweise nicht bemerkt werden. Es ist also möglich auf einem zweiten Monitor (oder einer anderen Hälfte des Monitors), die aktuellste Version der Website zu sehen, ohne den Texteditor verlassen zu müssen.

In den Webspace mit public

Zunächst müssen die Sites im HTML-Format generiert werden. Dies geschieht im Verzeichnis C:/hugo/Site/hallo-friend-ng mit dem Befehl

# hugo 

Im Verzeichnis C:/hugo/Site/hallo-friend-ng/public sind alle dann Dateien hinterlegt, die auf den Webserver hochgeladen werden müssen. Dies kann z.B. mit FileZilla erledigt werden (siehe dazu das Tutorial). Wer nicht unter Windows arbeitet, benutzt für den ein Abgleich des erzeugten Ausgabeordners am besten rsync. Mehr dazu gibt es demnächst hier.


  1. da wir mehrere Versionen oder Templates testen wollen ↩︎

  2. da so leichter die Übersicht behalten wird ↩︎

  3. das Verzeichnis wurde nachträglich erstellt, um mehrere Sites in dem Unterverzeichnis content/pageszu verwalten ↩︎