Eine Website mit Hugo erstellen
24.03.2020
Das ist mein erster Eintrag. Heute ist ein sonniger Märztag mit einer kalten Bise. Wie erstelle ich eine Website für Farbenweg?
Eine statische Website?
Ich habe mich für eine statische Website entschieden. Hier finden wir einen Bericht von Chris über [statische Website-Generatoren] (http://cinereal.info/article/new-website-static-site-generator/). Die statische Website wird automatisch aus einer Vorlage (Template) und dem Inhalt (Content) generiert. Als Hauptvorteile gelten schnelle Ladezeiten und hohe Sicherheit der statischen Sites.
Die Website erstelle ich mit den drei Komponenten Hugo, Windows PowerShell ISE und Visual Studio Code.
- [Hugo] (https://gohugo.io/) ist ist ein statischer Website-Generator.
- [Windows PowerShell ISE] (https://docs.microsoft.com/en-us/powershell/scripting/getting-started/getting-started-with-windows-powershell?view=powershell-7) ist ein Kommandozeilenprogramm, das in Windows standardmäßig zur Verfügung steht.
- [Visual Studio Code] (https://code.visualstudio.com/) ist ein Quelltext-Editor.
Statische Websites können an auf [Github] (https://github.com/) gehostet werden. Chris hat einen bebilderten Artikel zum Einstieg in [Github-Sites] (http://cinereal.info/article/github-pages/) verfasst. Nach dieser Anleitung erstellen wir in wenigen Schritten eine erste Website.
Die Hugo-Website erstellen
In der Windows PowerShell erstellen wir den Ordner für die neue Hugo-Website. In meinem Fall heißt der Ordner „blog-farbenweg“:
md blog-farbenweg
cd blog-farbenweg
hugo new site ./
Automatisch sind die Ordner archetypes, content, data, layouts, resources, static und themes und die Datei config.toml entstanden. Sie sind typisch für eine Hugo-Website. Als zweites passen wir die config.toml an. Die baseURL entspricht dem lokalen Server.
baseURL = "http://localhost:1313/"
languageCode = "de-de"
title = "Farbenweg"
Eine leere Website ist generiert.
Ein Hugo-Theme herunterladen
Hugo stellt zahlreiche Themes zur Verfügung. Um ein Theme zu installieren, wechseln wir ins entsprechende Verzeichnis.
cd themes
git clone https://github.com/jrutheiser/hugo-lithium-theme
cd ../
Das Theme kann in der Konfigurationsdatei config.toml festgelegt werden:
baseURL = "http://localhost:1313/"
languageCode = "de-de"
title = "Beispiel Hugo"
theme = "hugo-lithium-theme"
Dann kopieren wir die Inhalte von ExampleSite in unser Website-Verzeichnis. Für den Einstieg in Hugo kann ich das [Lithium-Theme] (https://themes.gohugo.io/hugo-lithium-theme/) empfehlen. Es ist einfach und übersichtlich.
Den Markdown-Inhalt erstellen
Um einen ersten Blogeintrag zu erstellen, verwenden wir den Befehl hugo new post/___.md:
hugo new post/Website-mit-Hugo-erstellen.md
Es entsteht im Unterverzeichnis content/post/ eine Datei mit der folgenden Struktur:
---
title: "Website mit Hugo erstellen"
date: 2020-03-24T09:51:12+01:00
draft: true
---
Das ist mein erster Post. Heute ist ein sonniger Märztag mit einer kalten Bise.
Zwischen den Strichen befindet sich die [Front Matter] (https://gohugo.io/content-management/front-matter/), in der Metadaten definiert werden. Den Inhalt des Posts erstellen wir mit [Markdown] (https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet). Das ist eine Auszeichungssprache mit guter Lesbarkeit im Vergleich zu HTML.
Als nächstes fügen wir ein Bild ein. Wir legen es in das Verzeichnis static/images.
Um die Website anzuschauen starten wir
hugo -D serve
und gehen auf den lokalen Server http://localhost:1313/. Der Artikel und das Bild werden angezeigt.
Die Website auf Github-Domain ziehen
Um die Website auf einer Github-Domain anzuzeigen, gehen wir folgendermaßen vor: Wir erstellen einen Github-Account mit dem Namen der Website.
Bei der ersten Verwendung des Github-Repositorys klonen wir das Repo in den Public-Ordner:
git clone https://github.com/farbenweg/farbenweg.github.io public
Bei den weiteren Änderungen ist das Klonen nicht mehr nötig. Dann genügen die fünf folgenden Zeilen, um Änderungen auf die Domain zu ziehen:
hugo
cd public
git add --all
git commit -m "inital commit"
git push origin master
Um den Post zu sehen, stellen wir im Bereich oberhalb des Post (Front Matter):
draft: false
Und in der config.toml wählen wir als neue baseURL den Domainnamen:
baseURL = "https://farbenweg.github.io/"
Ein neues Layout des Lithium-Themes
Das neue Layout umfasst
- neue Schriftarten,
- Merienda für die Titel,
- Lato für die Texte,
- grüne Titel
- einen höheren und hellgrünen Header,
- ein größeres Logo im Header,
- grüne Schrift beim Überfahren der Navigation.
Der Code in /themes/hugo-lithium-theme/layouts/partials/head.html für die neue Schriftart lautet:
<link href='https://fonts.googleapis.com/css?family=Merienda' rel='stylesheet'>
In /themes/hugo-lithium-theme/static/css/main.css können beliebige Änderungen für ein neues Layout gemacht werden. Um das ursprüngliche Theme nicht zu verlieren, empfiehlt es sich allerdings, die Änderungen nicht direkt dort zu machen. Stattdessen kopieren wir die CSS-Dateien in den Ordner static/css/ und die Partials in den Ordner layouts/partials/ und bearbeiten sie dort.
Das Github-Repository leeren
Nach längerem Testen haben sich im Github-Repository eine Menge Daten angesammelt, die nicht mehr gebraucht werden. Ich möchte diese Daten löschen. Wenn ich das Theme wechsle, gehe ich ebenfalls so vor, um das Repository ganz zu leeren. Ich wechsle in den Ordner: farbenweg\blog-farbenweg\public [master ≡]>
git pull
git rm -r .
git commit -m "leer"
git push
Jetzt ist das Repository leer und ich kann die aktuelle Website hochladen.
Github-Website auf beliebiger Domain anzeigen
Um eine andere Domain zu verwenden, erstellen wir das entsprechende Repository auf Github. Dann klonen wir das Repository in unseren public-Ordner.
git clone https://github.com/farbenweg/farbenweg.ch public
Eventuell löschen wir die alte Website zuerst:
cd public
git rm -r .
git commit -m "leer"
git push
Dann kompilieren wir die Website und ziehen sie auf die Domain:
hugo
cd public
git add --all
git commit -m "inital commit"
git push origin master
Jetzt sind alle Dateien im Repository. Noch ist nichts im Browser zu sehen. Dazu erstellen wir die Datei CNAME. Sie enthält den Domainnamen, wenn wir eine beliebige Domain wählen. In meinem Fall steht in der Datei CNAME einfach:
farbenweg.ch
Nun funktioniert die Hugo-Website auf der Domain farbenweg.ch.
Favicon
Jedes Gerät und Betriebssystem verlangt sein eigenes Favicon. Deshalb erstellen wir das Favicon am besten in verschiedenen Größen und Dateiformaten. Die ganz kleinen Favicons nennen sich favicon.ico oder favicon.png und befinden sich oben im Fenster oder im Tab. Sie sind 16 x 16 Pixel, 32 x 32 Pixel oder 48 x 48 Pixel klein:
Dann gibt es etwas größere Icons, die sich touch-icon.png oder apple-icon.png nennen. Sie werden in mobilen Browsern, in Favoriten-Listen oder in Lesezeichen des Browsers verwendet.
Da auf meinem alten Smartphone (Samsung Galaxy S4 mini) im Browser das Favicon nicht funktioniert, wird meine Suche nach einer Lösung immer obsessiver. Ich finde immer mehr Größen und Typen von möglichen Favicons für die diversen Geräte und Betriebssysteme. Es gibt diverse Online-Generatoren für Favicons. Ein hochgeladenes Bild wird in verschiedene Formate umgewandelt.
Der Code in head.html lautet dann:
<link rel="icon" type="image/ico" sizes="16x16" href="/favicon.ico">
<link rel="icon" type="image/ico" sizes="32x32" href="/favicon.ico">
<link rel="icon" type="image/ico" sizes="64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="apple-touch-icon-precomposed" sizes="192x192" href="/apple-icon-192x192.png">
<link rel="icon" type="image/png" sizes="36x36" href="/android-icon-36x36.png">
<link rel="icon" type="image/png" sizes="48x48" href="/android-icon-48x48.png">
<link rel="icon" type="image/png" sizes="72x72" href="/android-icon-72x72.png">
<link rel="icon" type="image/png" sizes="96x96" href="/android-icon-96x96.png">
<link rel="icon" type="image/png" sizes="144x144" href="/android-icon-144x144.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="256x256" href="/android-icon-256x256.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-icon-512x512.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
Ein erweitertes Hugo-Lithium-Theme
Nach dem Einstieg in Hugo-Websiten suchte ich eine Erweiterung mit Bildern zu den Posts. Ich stieß auf das [Theme von Janik Vonrotz] (https://github.com/janikvonrotz/hugo-lithium-theme), das vom Lithium-Theme abgeleitet ist.
git clone https://github.com/janikvonrotz/hugo-lithium-theme
Neben des Post-Bildes verwendet dieses Theme u.a. eine Suchfunktion, ein Archiv-Template und Open-Graph-Metadaten, die z.B. beim Versenden eines WhatApp-Links angezeigt werden.
Deutsche Umlaute in URLs ersetzen
Die deutschen Umlaute in Post-Titeln sollten in der URL richtig ersetzt werden. Beispielsweise möchte ich den Titel „Können“ nicht als /konnen/, sondern als /können/ in der URL. Deshalb verabschiede ich mich in der config.toml wieder vom Akzent-Entfernen, das ich eingeführt hatte. Stattdessen führe ich einen Slug anstelle des Titles ein:
# RemovePathAccents = true
[permalinks]
# post = "/:year/:month/:day/:title/"
post = "/:year/:month/:day/:slug/"
In der Front-Matter des entsprechenden Artikels definieren wir nun neben dem Title auch den Slug:
---
title: "Können Ketten retten?"
slug: /Koennen-Ketten-retten/
date: 2020-04-24T21:56:25+02:00
draft: false
---
Das „Ü“ in der „Über“-Seite einfach durch ein „U“ zu ersetzen, entspräche nicht der Bedeutung des Wortes… Es geht ja nicht um ein Taxiunternehmen 😄. Deshalb habe ich in der config.toml auch einen Slug für die Page eingeführt und die URL geändert:
# RemovePathAccents = true
[permalinks]
# page = "/:title/"
page = "/:slug/"
[[menu.main]]
name = "Über"
url = "/ueber/"
weight = 3
In der Front-Matter von Ueber.md steht nun:
---
title: Über
slug: /Ueber/
date: 2020-04-27T08:22:57+00:00
author: Monika Gloor
images:
- /images/logo.png
---
Außerdem können wir mit dem Slug den Titel der Search-Seite anpassen:
---
title: "Suche"
slug: /search/
date: 2019-06-07T20:22:57+02:00
disable_comments: true
---
Kontaktformular
Für die Kontakt-Seite verwende ich momentan [Formspree] (https://formspree.io). Die Einrichtung erfolgt einfach mit der gewünschte E-Mail-Adresse und ist in wenigen Mausklicks erledigt. HTML-Codes für das Kontaktformular werden bereitgestellt. Mein Formular enthält den Namen, die E-Mail-Adresse und das Nachrichtenfeld.
Deutsche Anführungszeichen
Nach einiger Zeit fiel mir auf, dass die Anführungszeichen auf meiner Website englisch waren. Ich ersetzte sie durch deutsche Anführungszeichen. Das öffnende Anführungszeichen ist unten und nach links geschwungen, das Schlusszeichen ist oben und nach rechts geschwungen.
| „ | Anführungszeichen (öffnend) | ALT+0132 |
| “ | Anführungszeichen (schließend) | ALT+0147 |
Google Analytics einbinden
Um Google Analytics auf die Website einzubinden, fügte ich im header.html die folgende Zeile ein:
{{ template "_internal/google_analytics.html" . }}
Ich registrierte mich und fügte meine Tracking-ID in der config.toml ein:
googleAnalytics = "UA-xxxxxxxxx-x"
Dann machte ich folgende Sicherheits-Einstellungen in der config.toml:
[privacy]
[privacy.disqus]
disable = true
[privacy.googleAnalytics]
anonymizeIP = true
disable = false
[privacy.instagram]
disable = true
[privacy.twitter]
disable = true
[privacy.vimeo]
disable = true
[privacy.youtube]
disable = true
In der Datei head.html ergänzte ich ein favicon, das den Google-Richtlinien entspricht. Das ist ein Icon des Typs “shortcut icon” in der Größe eines Vielfachen von 48 x 48 Pixel:
<link rel="shortcut icon" href="/favicon1.ico">
In der Google Search Console beantragte ich die Indexierung für einzelne Seiten meiner Website. Die automatische Indexierung ließ noch ein paar Stunden auf sich warten. Am längsten dauerte es, bis das Favicon in den mobilen Suchergebnissen auftauchte. Jetzt sieht es so aus:
