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.

Die DSGVO und die Website

Die Europäische Datenschutzgrundverordnung besagt im Kern, dass die personenbezogenen Daten eines Nutzers nur dann verarbeitet und gespeichert werden dürfen, wenn dieser dem vorab zustimmt oder es ein berechtigtes Interesse desjenigen gibt, der die Daten verarbeitet. Nun fragt sich mancher Blogger, der weder Anmeldung noch Kommentare noch Loggingfunktionen nutzt, welche Weitergabe personenbezogener Daten man ihm vorwerfen könne. Was die Sache auch in diesem Fall heikel macht, ist die Tatsache, dass auch die IP-Adresse, über die sich jeder Besucher auf einer Webseite auf dem Server meldet, als personenbezogene Information gilt. Der Nutzer muss gemäß DSGVO über jede Verarbeitung der IP-Adresse informiert werden. Die gesammelten Erläuterungen bilden dann die Datenschutzerklärung der Webseite. Zwar gibt es Generatoren, die von Privatnutzern kostenlos genutzt werden dürfen. So ganz sicher ist dann – und gerade unter Wordpress – immer noch nicht, ob diese Datenschutzerklärung jede Übertragung personenbezogener Daten berücksichtigt.

Wordpress ist recht komplex. Beim Einsatz von Themes, die etwa Google-Fonts einsetzen, wird beim Anruf der Vorlage auch der Server von Google kontaktiert. Kein Wordpress-Betreiber weiß mit Sicherheit, welche Daten ein eingesetztes Plug-in verarbeitet. Bei statischen HTML-Seiten werden hingegen keine Besucherinformationen verarbeitet – sofern das Logging des Webservers ausgeschaltet ist und keine Systeme wie Google Analytics zum Einsatz kommen.

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.0Erstellen 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.

Markdown: Die allerwichtigsten Regeln

Die Auszeichnungssprache Markdown spielt bei Hugo eine wichtige Rolle. Der Grundgedanke dahinter besteht darin, Formatierungen in einfachen Textdateien zu ermöglichen, aus denen dann HTML-Dokumente oder Office-Dateien werden. Dazu bedient sich Markdown einer einfachen Syntax. Kursiven Text rahmen Sie beispielsweise mit einem einfachen Sternchen ein: „*Das wird kursiv*“. Fetter Text nutzt doppelte Sternchen: „**Fetter Text**“. Eine Überschrift der ersten Ebene legen Sie mit dem Zeichen „#“ an, die der zweiten Ebene mit zweien: „## Überschrift der Ebene 2“. Einen Link setzen Sie so: „[Das ist der verlinkte Text](http://...)“ Möchten Sie auf ein Bild verweisen, nutzen Sie dieses Kommando: „Beschreibung des Bildes“. In diesem Fall wird die Datei dem statischen Verzeichnis „images“ entnommen, das Sie angelegt haben, wie im Haupttext dieses Artikels beschrieben.

Eine ausführliche Referenz zu Markdown in deutscher Sprache finden Sie unter http://markdown.de/ .

PC-WELT Marktplatz

0 Kommentare zu diesem Artikel
2383615