2383615

Hugo - Websites ohne Datenschutzstress bauen

26.10.2018 | 15:04 Uhr |

Im Mai 2018 gingen viele Blogs und private Seiten dauerhaft vom Netz – aus Sorge, für Verstöße gegen die neue Datenschutzgrundverordnung haftbar gemacht zu werden. Das statische Blogsystem Hugo vereinfacht den datenschutzkonformen Webaufritt.

Für Blogs oder Internetseiten hat sich in den vergangenen Jahren Wordpress als führende Lösung etabliert. Themes und Plug-ins haben zu dessen Beliebtheit beigetragen. Doch dann kam der Datenschutz. Der tauchte nicht überraschend auf, denn es gab eine Übergangsfrist von zwei Jahren. Aber viele Blogger und Webseitenbetreiber haben sich erst wenige Wochen vor dem Stichtag mit dem Thema auseinandergesetzt und dabei festgestellt, dass der Umbau einer mit Wordpress betriebenen Site nicht ganz einfach ist (siehe Kasten „Die DSGVO und die Website“). Das CMS Hugo eignet sich sowohl für den Betrieb einer klassischen Website oder auch eines Blogs. Richtig konfiguriert gibt es auch keine Probleme mit der Datenschutzgrundverordnung (DSGVO).

Tipp: Gratis Profi-Tools zum Erstellen von Websites

Statische Seiten mit Hugo bieten Vorteile

Technisch ist die Produktion statischer HTML-Seiten natürlich ein Schritt rückwärts. Die mit Hugo angelegten Inhalte liegen als einfache HTML-Seiten vor. Aber das bietet auch Vorteile. Das Tarifpaket beim Hoster kann kleiner gewählt werden, denn es werden zur Anzeige des Blogs weder eine Datenbank noch eine Script-Sprache auf dem Server benötigt. Im Quellcode der Dokumente befinden sich nur die Inhalte, die Sie hineinschreiben. Und schließlich müssen Sie sich auch nicht darum kümmern, den Webauftritt gegen Hacker abzusichern. Jeder, der eine Wordpress-Installation betreut, weiß, dass die Aktualisierung von Grundsystem und Plug-ins durchaus eine herausfordernde Aufgabe sein kann. Auf Aktualität Ihrer Inhalte müssen Sie nicht verzichten, denn die Produktion ist nicht besonders zeitraubend.

Die Entwickler von Hugo stellen Binärpakete für Windows, Mac-OS und Linux direkt auf der Projektseite zur Verfügung. Laden Sie sich das Paket passend zu Ihrer Distribution herunter und installieren es per Doppelklick.

Für Ubuntu und Derivate gibt es aber eine offizielle Paketquelle. Sie können Hugo also direkt aus einem Terminal heraus mit

sudo apt install hugo  

installieren. Anschließend ist das System bereits einsatzbereit.

Öffnen Sie nun ein Terminal und wechseln Sie mit cd ~ in Ihr Home-Verzeichnis. Mit

hugo new site meinewebseite  

legen Sie jetzt lokal den Grundstock Ihrer neuen Seite im Ordner „meinewebseite“ an.

Eine Website mit Hugo starten

Mit einem einfachen Kommando legen Sie die Grundstruktur an.
Vergrößern Mit einem einfachen Kommando legen Sie die Grundstruktur an.

Alle Einstellungen rund um die Website werden in der Konfigurationsdatei „config.toml“ abgelegt. Sie liegt im Stammverzeichnis der gerade angelegten Ordnerhierarchie und kann mit jedem beliebigen Editor bearbeitet werden. Die Datei ist nach dem Anlegen eines neuen Projekts erst einmal nahezu leer. Damit die statischen Seiten später korrekt gebaut werden können, müssen Sie den Parameter „baseURL“ ändern. Dort geben Sie die Internetadresse der Website genauso an, wie sie später im Browser aufgerufen wird. Ändern Sie auch den Wert für „languageCode“ ab. Für Deutschland ist „de-DE“ korrekt. Und unter „title“ definieren Sie den Titel, wie er später im Fenstertitel des Browsers erscheint.

Hugo wird, anders als andere CMS, ohne ein voreingestelltes Theme ausgeliefert. Installieren Sie also zunächst eine Vorlagendatei. Unter https://themes.gohugo.io finden Sie eine große Auswahl solcher Dateien. Für ein Blog ist beispielsweise „Hemingway“ eine attraktive und einfache Vorlage. Auf der Detailseite zu jedem Theme finden Sie neben einer kurzen Vorstellung stets einen Link zu einer Onlinedemo, der Homepage der Entwickler und den Downloadlink. Diese führt in der Regel auf die Projektseite bei Github.

Wählen Sie dort „Clone or download“ aus und danach „Download Zip“. Das Archiv entpacken Sie danach am besten mit der grafischen Archivverwaltung Ihres Desktops. Achten Sie darauf, dass die Option aktiviert ist, die die Ordnerstruktur des Inhalts auch beim Entpacken erhält. Als Ziel wählen Sie den Ordner „themes“ ihrer lokalen Website aus, also etwa „/home/Benutzer/ meinewebseite/themes“.

Die Steuerung von Hugo erfolgt zentral über eine Konfigurationsdatei.
Vergrößern Die Steuerung von Hugo erfolgt zentral über eine Konfigurationsdatei.

Die Themedateien haben beim Download aus Github noch die Erweiterung „master“ im Dateinamen. Sie sparen sich Schreibarbeit, wenn Sie diesen Zusatz entfernen. Jetzt müssen Sie Hugo allerdings noch mitteilen, dass dieses Theme genutzt werden soll. Dazu öffnen Sie die Datei „config.toml“, fügen dort die Zeile

theme = "hemingway"  

ein und speichern die Datei.

Wenn es später bei der Vorschau zu Problemen kommen sollte, etwa eine weiße Seite dargestellt wird, fehlen eventuell Parameter in der Konfiguration. Die Entwickler liefern im Ordner ihres Themes stets einen Ordner „examplesite“ mit. Dort finden Sie auch eine funktionierende Konfigurationsdatei. Durch den Vergleich mit der eigenen Konfiguration fallen eventuelle Fehler schnell auf.

Webentwicklerkurs 2.0 – Erstellen Sie Ihre eigene Website oder App

Der erste Artikel in Markdown

Üblicherweise schreiben Sie Blogpostings und Webseiten unter Hugo mit der Auszeichnungssprache Markdown. Ein Markdown-Dokument ist eine Textdatei, deren Inhalt mit einem überschaubaren Befehlssatz formatiert ist. Sie können die Dokumente also mit jedem beliebigen Editor bearbeiten.

Um ein neues Blogposting anzulegen, wechseln Sie im Terminal in das lokale Verzeichnis Ihrer Site und geben dort ein:

hugo new posts/erster-beitrag.md 

Die neue Datei liegt dann in der Ordnerhierarchie „content“ der neuen Site. Öffnen Sie sie mit einem Editor. Die Einstellungen des Themes haben bereits dafür gesorgt, dass darin einige Zeilen enthalten sind. Ein neues Dokument bekommt dabei den Status „Draft“ zugewiesen. Erst wenn Sie diesen Status auf „false“ ändern, wird beim Erstellen aller Dateien das Dokument später sichtbar.

Seiten und Postings werden bei Hugo in einfachen Textdateien verfasst.
Vergrößern Seiten und Postings werden bei Hugo in einfachen Textdateien verfasst.

Nachdem Sie den ersten Beitrag bearbeitet haben, können Sie sich eine Livevorschau ansehen. Dazu geben Sie im Terminal den Befehl

hugo server -D  

ein. Der Parameter „D“ berücksichtigt auch Beiträge, die noch den Status „Draft“ tragen. Der lokale Server gibt eine Statusmeldung aus und zeigt seine Betriebsbereitschaft an. Wenn Sie mit Ihrem Browser die URL „http://localhost:1313“ aufrufen, sollten Sie Ihren Blog ansehen können. Den Server beenden Sie jederzeit mit Strg-C wieder. Wenn Sie mit Bildern arbeiten wollen, legen Sie im Verzeichnis „static“ Ihrer lokalen Installation den Ordner „images“ an.

Dorthin kopieren Sie Bilddateien, die Sie verwenden wollen. Mit Markdown sind Verweise auf Bilder ganz einfach (siehe Kasten „Markdown: Allerwichtigste Regeln“).

Themes anpassen oder eigene erstellen

Themes in Hugo basieren auf den Templateanweisungen der Programmiersprache Go. Eine Übersicht über alle Funktionen und Variablen finden Sie in der Dokumentation unter https://gohugo.io/functions/ und https://gohugo.io/variables/ . Das Theme selbst besteht einerseits aus den Formatierungsanweisungen in Form einer CSS-Datei sowie Bausteinen, aus denen dann die Seiten gebaut werden. Mit

hugo new theme meintheme  

legt Hugo das Grundgerüst an. Im Verzeichnis „themes/meintheme/layouts/partials/“ liegen die verschiedenen Bausteine, aus denen Seiten und Übersichten zusammengebaut werden. So wird die Datei „header. html“ etwa dazu verwendet, alle Elemente aufzunehmen, die bis zum HTML-Element „<body>“ benötigt werden. Das könnte etwa so aussehen:

<!doctype html><html><head><title>{{ if .IsHome }} {{ .Site.Title }} {{ else }} {{ .Title }} {{ end }}</title><meta charset="utf-8"></head><body>  

Wenn Hugo aus dem Content die HTML-Seiten zusammenbaut, würde es in diesem Fall den in der Konfiguration eingetragenen Titel verwenden, wenn es sich um die Startseite handelt. Andernfalls den Titel des jeweiligen Beitrags.

Und dieser wird dann innerhalb des entsprechenden HTML-Elements verwendet. Auf diese Teile („Partials“) können Sie später jederzeit wieder zurückkommen. Dazu wird ein Verweis in dem Dokumententyp gesetzt, den Sie benötigen. Für die Liste der Blogbeiträge in der Datei „list.html“ dann etwa so: {{ partial „header.html“ . }}. Etwas Experimentieren ist wie bei jedem CMS oder HTML-Editor unumgänglich – aber es lohnt sich!

Transport zum Webserver: Der Weg fertiger Seiten zum Webserver ist trivial. Rufen Sie dazu im Terminal aus dem Verzeichnis Ihrer Site einfach „hugo“ auf und verfolgen Sie die Ausgabe der Kommandos. Die Software legt nun einen neuen Ordner „public“ an. Dessen Dateien können Sie dann mit dem Dateimanager oder einem FTP-Programm auf den Webserver übertragen.

PC-WELT Marktplatz

2383615