HTML Generator Hugo – Mein erstes Projekt

patientenombudsverein.de

Hugo ist ein sogenannter statischer HTML-Generator. Damit ist gemeint, dass nach dem Generierungsprozess die erstellte Website ohne Datenbank und PHP funktioniert. Nur durch HTML und wenn man möchte mit etwas JavaScript. Die Website von Hugo ist unter https://gohugo.io/ zu erreichen.

Größte Vorteile von Hugo

  • Keine regelmäßigen Updates von CMS-Code für WordPress, Drupal, etc. und deren Plugins und Module.
  • Ganz stark reduziertes Sicherheitsrisiko
  • Sehr schnelle Ladezeiten der Webseiten
  • Einfache Installation und Updates

Die alte Website

Die alte Website von diesem Hugo Projekt wurde mit dem CMS Drupal in der Version 7.0 realisiert. Das benutzte kostenlose Theme wird nicht weiter entwickelt. Diverse inhaltliche Bestandteile wurden nicht mehr benötigt. Eine komplette Neuentwicklung war so oder so angesagt.

Die neue Hugo Website

Als Zielgruppe der Website sind Patienten und pflegende Angehörige definiert. Das Alter der Besucher ist durch die Zielgruppe eher in den älteren Altersgruppen zu finden. Aus diesem Grund habe ich die Font-Größe 1.0rem = 18px gewählt. Da ich selber zu der Altersgruppe gehöre, weiß ich wovon ich schreibe. Lange Rede kurzer Sinn, die URL der Website lautet:

https://www.patientenombudsmann.de

In der letzten Zeit habe ich öfter die schlechte Erfahrung von nicht mehr weiterentwickelten, kostenlosen Themes gemacht. Aus diesem Grund war klar, daß ich auch das Theme selber erstelle.

Die Technik der Hugo Website

Auf dem Webserver läuft ein Apache, kein PHP und keine Datenbank (MySQL). Durch dieses sehr reduzierte Environment ist der Webserver fast nicht angreifbar. Betriebssystem und Apache-Updates werden durch unsere Techniker aktuell gehalten.

Wenn der Generierungsprozess von Hugo durch den Terminalbefehl hugo ausgelöst wird, werden die statischen Webseiten, alle Menü-Verknüpfungen, Bilder und PDF-Dateien im Verzeichnis public gespeichert. Der Inhalt dieses Verzeichnisses muss komplett in das Website Verzeichnis des Apache Servers kopiert werden. Vorher lösche ich dort den alten Inhalt – sicher ist sicher. Das wars.

Keine aufwändigen und langwierigen Backups des Verzeichnisses und der Datenbank damit, wenn es nicht funktioniert, wieder alles auf den alten Stand zurückgesetzt werden kann.

Die Entwicklung einer Hugo Website

Die Seitenstruktur wird durch sogenannte Templates, das sind HTML-Dateien, aufgebaut. Dadurch erhält man ein Rumpfgerüst – Head, Header, Content, Footer. Dieses Rumpfgerüst ist immer gleich. Im Content Bereich wird der jeweilige Inhalt eingebunden. Der Inhalt besteht überwiegend aus Markdown-Dateien. Durch den Generierungsprozess wird daraus HTML-Code.

Wenn der Inhalt für Markdown-Dateien zu komplex wird, kann man Markdown und HTML mischen, zusätzliche Shortcodes mit HTML erstellen und einbinden. Oder, oder… Es gibt sehr viele Möglichkeiten, man bekommt alles was man will dargestellt.

Da keine Datenbank vorhanden ist, ermöglicht Hugo, über yaml-Dateien, das sind Textdateien mit einer Record-Struktur – Feldname = Inhalt – und entsprechenden Go-Template­be­fehlen, die automatische Verarbeitung dieser Daten während der Generierung. In meiner ersten Hugo-Website wird das zum Beispiel unter Wir über uns | Der Vorstand und Wir über uns | Die Mitglieder sehr extensiv benutzt.

Damit ich mir die Arbeit etwas einfacher mache, habe ich Bootstrap – eine front-end component library – lokal eingebunden. Ansonsten benutze ich SCSS für das Design. Hugo erstellt daraus automatisch CSS welches von den Browsern verstanden wird.

Meine Hugo Entwicklungsumgebung

Ich bin seit einigen Jahren komplett auf Apple umgestiegen. Im Firmenbüro benutze ich aber auch Debian und ganz selten (nur zu Testzwecken) Windows. Also macOS auf einem MacBook Pro privat und iMac 27″ 5k in der Firma. Hugo läuft generell unter Windows, Linux und macOS.

Unter macOS gibt es die Paketverwaltung Brew. Darüber kann Hugo ganz einfach installiert und auch upgedated werden. Mit einfach meine ich auch einfach.

Vor Hugo habe ich den statischen HTML-Generator Jekyll für ein anderes Projekt benutzt. Die Installation und das Update von Jekyll, mit den ganzen Ruby Abhängigkeiten ist ein Horror. Jekyll an sich ist gut, aber sehr langsam.

Der Source von meinem ersten Hugo Projekt liegt in meinem iCloud-Bereich. Dadurch kann ich in der Arbeit und auch zu Hause oder sonst wo auf den Source zugreifen. Das klappt ganz gut.

Als Entwicklungsumgebung nutze ich den kostenlosen Microsoft Visual Studio Code Editor. Den gibt es für Windows, Linux und macOS. Die VSC Workspace Konfiguration habe ich ebenfalls in die iCloud ausgelagert. Damit habe ich aber Probleme wenn ich von verschiedenen Computern über den Editor auf den Source zugreife. Dann muss jedes Mal der Workspace neu erstellt werden. Das geht aber sehr schnell und ist eigentlich auch kein Problem. Und eigentlich könnte ich die Datei auf dem jeweiligen Computer speichern.

Einige Links die bei den ersten Schritten mit Hugo helfen können

Fazit

Hugo gefällt mir sehr gut. Ich werde hier im Blog nach und nach einige Beiträge mit speziellen Tipps dazu veröffentlichen.

Kontrolle des SEO Fokus-Keyword: HTML Generator Hugo – Mein erstes Projekt

Das Fokus-Keyword dieser Seite ist HTML Generator Hugo - Mein erstes Projekt, daraus wird folgende SEO-Kontroll-Suche:

Google Kontrollsuche

In dem Beitrag WordPress Plugin – Yoast SEO beschreibe ich die Kontroll- und Op­ti­mie­rungs­mög­lich­kei­ten von dem auch für diesen Beitrag benutzten SEO Plugin. Dieser Beitrag wird vom Yoast Seo Plugin mit Lesbarkeit: OK und SEO: OK, bewertet.

Wie bewerten Sie diesen Beitrag?

Eine schnelle Klick-Bewertung - möglichst mit 5 Sternen - wäre nett. Ein Kommentar mit Ihren Erfahrungen zu diesem Thema würde mich noch mehr freuen. Beides zusammen ...

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (Bis jetzt keine Bewertung)
Loading...

Ihr Kommentar fehlt hier

Ihre E-Mailadresse wird nicht öffentlich angezeigt. Erforderliche Felder sind mit * markiert.

Wenn im Kommentar ein Link vorhanden ist, muss der Kommentar von mir freigeschaltet werden. Dies kann manchmal etwas dauern. Sie erhalten eine E-Mail wenn der Kommentar freigeschaltet wurde.

Ihre E-Mailadresse wird wegen der Avatar-Integration mit gravatar.com abgeglichen. Nähere Informationen entnehmen Sie bitte meiner Datenschutzerklärung.

Durch die wei­te­re Nut­zung der Web­site stim­men Sie der Ver­wen­dung von Cookies zu. Wei­te­re In­for­ma­tio­nen er­hal­ten Sie unter Cookies und in mei­ner Da­ten­schutz­er­klä­rung.

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen