Neuer Artikel

So, wenn wir gerade ein neuen Trash-Talk oder Tutorial mit der Welt teilen wollen. Öffne im Git-Repository den Ordner „content“, dann den Ordner „en“. Je nachdem, ob es sich um eine How To oder einen Blogbeitrag handelt, erstelle eine neue .md-Datei im entsprechenden Ordner.

Wir fügen der Datei Frontmatter (das ist ein Header-Abschnitt für Hugo mit Parametern) mit title, summary, date, tags, canonical_url und lang.

Anschließend wird im Markdown-Stil geschrieben. Nach der Übersetzung in andere Sprachen füge die Datie dem jeweiligen Ordner hinzu. Vergiss nicht, den Sprachparameter im Frontmatter korrekt zu setzen – sonst wird die Seite nicht angezeigt.

Testen mit Hugo

hugo server --watch --poll=1000ms -D --disableFastRender

Kompilieren mit Hugo

hugo --minify

Dateien auf dem Server aktualisieren – fertig!

Einrichtung

Superschnelle Einrichtung eines einfachen Blogs. Installieren Sie einfach Hugo, fügen Sie ein Theme hinzu, und schon haben Sie einen stabilen, funktionierenden Blog.

config.toml und Inhaltsordnerstruktur

Wir können die gesamte Website zentral in der config.toml konfigurieren (diese kann auch im YAML-Format vorliegen). Hier definieren Sie verschiedene Variablen/Parameter, die von Hugo und/oder dem Theme für die Logik, Texte, das Hauptmenü und die Dateistruktur verwendet werden.

Meine Konfiguration ist eine klassische Internationalisierung (i18n), da ich mindestens auf Englisch und Deutsch veröffentlichen möchte. Der Inhalt befindet sich im Inhaltsordner. Dort gibt es für jede unterstützte Sprache einen Ordner der das Stammverzeichnis darstellt, z.B. de oder en. Für jeden Ordner gibt es außerdem für das Stammverzeichnis, z.B. en, eine Abschnittsdatei (_index.md) und einzelne Seiten, wie diese hier.

Abschnittsdateien listen standardmäßig alle einzelnen Seiten im selben Ordner auf. Sie eignen sich gut, um den Titel zu ändern oder dem Leser zu erklären, worum es in diesem Abschnitt geht. Ich habe eine Abschnittsseite für die Startseite, den Blog und How Tos. Ein Unterordner im Stammverzeichnis ist immer ein Abschnitt. Auch die URL gibt dies an. Der Sprachordner, z.B. „de“, ist pacheco.de/de/. Wenn Sie einen Ordner „blog“ mit MD-Dateien darin haben, ist pacheco.de/de/blog der Abschnitt.

Hauptmenüpunkte (Die oben rechts) werden entweder in der Datei „config.toml“ festgelegt, wenn der Name in allen Sprachen gleich ist, oder auf jeder Seite im Frontmatter. Jeder Abschnitt oder jede einzelne Seite kann und wird einen Frontmatter haben, der entweder in TOML oder YAML vorliegt und normalerweise am Anfang der Datei steht. Siehe about.md.

CSS

CSS-Dateien gehören einfach in den Ordner „assets/css/extended“ und werden automatisch geladen.

Theme

Wenn ein Theme verwendet wird, befindet es sich im Ordner „themes“.

Layoutdateien und -ordner alias Verwendung von HTML

Im Layoutordner finden Sie die Ordner „_default“, „partials“ und „shortcode“.

Ich verwende den Ordner „_default“, um die von PaperMod definierte Standard-HTML-Seite zu überschreiben. Mit Hugo-Logikblöcken lässt sich steuern, welche Inhalte wie in der HTML-Datei platziert werden. Die Parameter aus der Datei „config.toml“ und dem Frontmatter können verwendet werden.

Im Ordner „partials“ überschreibe ich die Datei „extended_footer.html“ von PaperMod, die speziell für individuelle Anpassungen gedacht ist. Ich blende die Standardfußzeile (mit dem Copyright-Vermerk) mithilfe eines Parameters in der Datei „config.toml“ aus. In „extended_footer.html“ erstelle ich meine eigene Fußzeile, die dann die Standardfußzeile von PaperMod verwendet, aber ganz am Ende der Seite platziert – genau dort, wo ich sie haben möchte.

Der Ordner „shortcode“ ist sehr praktisch. Immer wenn Teile einer Seite sprachunabhängig sind, verwendet man einen Shortcode. Ich verwende beispielsweise die Datei „badges.html“, in der nur Badges angezeigt werden. Ein Shortcode-HTML kann wie folgt eingebunden werden (ohne Leerzeichen!):

{ {<badges>}}