Neff Stein-Design Website erstellt mit Hugo

Benötigte Software

• Hugo

Mit QUELLVERZEICHNIS ist das Verzeichnis gemeint in dem die Hugo Webseite liegt.

Server für lokales arbeiten

Der Server für lokales arbeiten funktioniert nur wenn man die Dateien auf einer lokalen Festplatte liegen hat.

cd QUELLVERZEICHNIS
hugo server -D

Nachdem der Server gestartet ist wird auf dem ausführenden Rechner eine Webserver auf Port 1313 gestartet. Dieser ist über http://localhost:1313 verfügbar und erstellt automatisch die Seite neu wenn während des laufen Servers eine Datei im QUELLVERZEICHNIS geändert wird.

Webseite für externes hosting erstellen

cd QUELLVERZEICHNIS
git add --all
git commit -m "NACHRICHT WAS GEÄNDERT WURDE"
git push raspi master 

Webseite mauell für externes hosting erstellen

cd QUELLVERZEICHNIS
hugo --baseURL https://www.neff-steindesign.de

Wenn die Seite manuell erstellt wird werden die generierten Dateien unter QUELLVERZEICHNIS/public abgelegt. Der Inhalt dieses Verzeichnisses kann dann zu Strato hochgeladen werden.

Nachem die Webseite erstellt wurde liegen im Verzeichnis QUELLVERZEICHNIS\public die erstellten Daten, die auf den jeweiligen Webhoster hochgeladen werden.

Neuen Artikel / Neue Seite erstellen

Für TYP können folgende sachen eingesetzt werden: bauen-und-wohnen, grabmale und neuigkeiten

NAME ist der Titel des Artikels in Kleinbuchstaben mit Bindestrichen anstatt Leerzeichen

cd QUELLVERZEICHNIS
hugo new TYP/NAME/index.md

Wenn die neue Seite angelegt wurde liegt diese im Ordner QUELLVERZEICHNIS\content\TYP\NAME als index.md für Bilder muss in disem Ordner ein neuer Ordner bilder (klein geschrieben) erstellt werden und dort können Bilder im jpg Format abgelegt werden. Die Dateiendung sollte ebenfalls wie der Dateiname komplett in Kleinbuchstaben sein und keine Leerzeichen enthalten.

Seiten editieren

Für TYP können folgende sachen eingesetzt werden: bauen-und-wohnen, grabmale und neuigkeiten

NAME ist der Titel des Artikels in Kleinbuchstaben mit Bindestrichen anstatt Leerzeichen

Die zu editierende Seite liegt unter QUELLVERZEICHNIS\content\TYP\NAME als index.md diese ist mit einem Texteditor der Wahl zu öffnen. Es handelt sich um eine Datei im Markdown Format mit TOML Kopfdaten.

In den Kopfdaten sind sachen wie der Titel der Seite, Das veröffentlichungsdatum, der "draft" Status der besagt ob eine Datei veröffentlicht ist oder noch eine Vorschau, die nicht im normalen erstellen der Seite auftauche (dafür bracuht es beim erstellen das -D flag für hugo).

Andererseits werden an dieser stelle auch die Metadaten für Bilder eingegeben. So wie das HTML alt Attribut, das als Bildbeschreibung dient wenn das Bild nicht angezeigt wird, einen Bild Titel und falls es sich um eine Neuigkeit handelt das "featured" Attribut, das besagt welches Bild für das Haupt Bild des News Artikels darstellt.

Beispiel Artikel

+++
title = "Grabmale von Rokstyle"
date = "2018-12-09T01:33:58+01:00"
draft = false
type = "news"
weight = -100
keywords = ["Wort1", "Wort2"]

[[resources]]
title = "Rokstyle Banner"
src = "**rokstyle-banner.jpg"
[resources.params]
    alt = "Rokstyle Banner"
    description = "[Rokstyle](http://rokstyle) Banner"
    featured = true
+++

An dieser Stelle startet der [Markdown](http://markdown) Inhalt.

Wenn wir dieses Beispiel einmal durchgehen befindet sich zwischen den beiden Zeilen die nur +++ enthalten die Kopfdaten / Metadaten der Seite. Dort werden sachen wie der Titel der Seite, das Veröffentlichungs Datum und Metadaten für Bilder angelegt.

• title: Der Titel der Seite
• date: Das Veröffentlichungsdatum
• draft: Der "Veröffentlich" Status (false: nicht veröffentlicht, true: veröffentlicht)
• type: Der Typ der Seite. Wird in der regel automatisch festgelegt beim erstellen.
• weight: Das "Gewicht" Der Seite. Wenn der Wert vorhanden ist und ins negative geht wird die Seite mit dem kleinsten "Gewicht" als erstes in Listen angezeigt.
• keywords: Eine liste von Schlüsselworten für Suchmaschinen. Diese Worte sollten irgendwo auf der Seite auftauchen

Für jedes Bild sollte ein Block für eine Resource angelegt werden. Dieser stellt sich wie folgt zusammen

• resources: Leitet den Block ein
• title: Der Titel der Bildes
• src: Der Pfad zum Bild relativ zur index.md
• [resources.params]: Leitet Parameter ein
• alt: Bildbeschreibung für das HTML ALT Attribut für den IMG tag. Sollte vorhanden sein
• description: Bildbeschreibung für den IMG tag. Optional, kann Markdown enthaten (für Links o.Ä.)
• featured: Kann true oder false sein und besagt ob das Bild bei einem Neuigkeiten Artikel als primäres Bild verwendet wrid. Optional, sollte nur bei einem Bild auf der Seite auf true stehen, sonst wird das 1. gefundene Bild mit featured=true genommen.

Bilder

Alle Bilder sollten vorab auf eine kleinstmögliche Dateigrösse gebracht werden, z.b. indem man die Auflösung auf maximal 3000px in der längsten Kantenläge des Bildes, maximal 72DPI, JPEG Qalität von maximal 75%.

Hintergrundbild

Das Hintergrundbild liegt unter themes/neff/static/img/background*.jpg in 4 Verschiedenen Dateien aufgeteilt. Je einmal eine HD und eine SD Variante für eine Horizontale und Vertikale ausrichtung.

Um das Hintergrundbild zu überschreiben können gleichnamige Dateien unter static/img angelegt werden. Diese überschreiben das was im Theme definiert ist.

Für die Dateigrössen sollte man sich an den vorhandenen Dateien orientieren.

Bilder im Artikel

Bilder für Artikel sollte in einem sogennanten "Page Bundle" liegen. das bedeutet das man einen neuen artikel anlegt indem man eine index.md in einem Verzeichnis anlegt was dem Namen des Artikels / der Seite in Kleinbuchstaben mit Bindestrichen anstatt von Leerzeichen liegt. Neben der index.md Datei sollte man dann ein Verzeichnis Bilder anlegen, in diesem werden die Bilder mit möglichst sinvollem Dateinamen (klein geschrieben, Bindestriche anstatt Leerzeichen.) und klein geschriebener Dateiendung also *.jpg und nicht *.JPG.

Wenn der Ordner soweit hergerichtet ist müssen noch Metadaten zu den Bildern im jeweiligen Artikel vorhanden sein, sonst werden für Bildtitel und ALT attribut von dem Bild nur der relative Pfad zum Bild angezeigt, was nicht sonderlich schön aussieht, und schlecht für die "Accessibility" und für Suchmaschinen ist. Diese Metadaten stehen jeweils in den Kopfdaten der Seite. Sie sehen wie folgt aus

[[resources]]
title = "TITEL"
src = "bilder/DATEINAME.jpg"
[resouces.params]
    alt = "Bildbeschreibung für HTML"
    description = "Bildbeschreibung für den Benutzer, optional kann Markdown enthalten."

Bilder können auf 2 Verschiedene Weisen in die Seite eingebettet werden. Eine davon ist der image Shortcode, die andere ist der gallery Shortcode. Der image Shortcode bettet ein einzelnes Bild im fliessenden Text ein. Der gallery Shortcode wird genutzt um eine Galerie von Bildern anzuzeigen. Genutzt werden die beiden wie folgt.

Image Shortcode

Ein Bild links im fliessenden Text

{{< image "bilder/BILD.jpg" "left" >}}

Ein Bild rechts im fliessenden Text

{{< image "bilder/BILD.jpg" "right" >}}

Gallery Shortcode

{{< gallery "bilder/**.jpg" >}}

Youtube Video

Youtube Videos werden ebenfalls mit einem Shortcode eingefügt, für diesen benötigt man als id argument die YouTube Video ID, Diese findet man in der URL zum Video inder Form von z.B. https://youtube.com/?watch=VIDEO_ID&fullscreen=true

{{< youtube id="VIDEO_ID" class="youtube" >}}