Hugo Shortcodes und Best Practices

Der statische Webseiten Generator Hugo ermöglicht schnelle und sichere Webseiten allerdings sind ein paar Fallstricke zu beachten. Ich habe meine Best Practices und nützliche Shortcodes in zwei Git Repositories zur Verfügung gestellt.

Hugo Best Practices

Das hugo-best-practices Repository beinhaltet eine Übersicht und viele Hilfen für den Umgang mit Hugo. Die Themen umfassen Verzeichnisstrukturen, Asset Optimierung und wichtige Tipps für Deployments, SEO und Performance. Alle Dokumente sind in englische Sprache erstellt damit die Community sich daran beteiligen kann.

Shortcodes

In dem hugo-shortcodes Repository gibt es eine Sammlung von nützlichen Funktionen für Hugo. Dies umfasst beispielsweise <figure> Blöcke mit automatischer Bildoptimierung.

Stackshare

Für meine Seite gibt es auch eine Übersicht der genutzten Tools auf stackshare.

 

Bildquelle: pixabay.com

WordPress zu Hugo

Etwas mehr als 1,5 Jahre ist es her, dass ich einen großen Teil meiner Webseiten zu WordPress migrierte. Jetzt sind sechs meiner Webseite mit Hugo erstellt. Dafür gibt es einige Gründe und auch ein paar Hindernisse.

Hugo

Zuerst ein kurzer Exkurs über Hugo. Hierbei handelt es sich um einen statischen Webseiten Generator welcher in der Programmiersprache Go geschrieben ist. Im Gegensatz zu WordPress liegen alle Daten und Inhalte in lokalen Dateien und nicht in einer Datenbank. Die Webseite wird vollständig aus diesen Daten generiert. Daraus ergeben sich direkt ein paar Vorteile. In der Ladezeit der Webseite fallen Datenbankabfragen und das Generieren der Inhalte raus. Statische Webseiten sind damit prinzipiell um Längen schneller als dynamisch generierte Webseiten. Außerdem sind statische Webseiten prinzipbedingt sicherer. Schadcode lässt sich nicht einfach über Sicherheitslücken in dem CMS System einschleusen. Ein großer Nachteil liegt aber darin, dass dynamische Inhalte schwieriger umzusetzen sind.

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again. (Hugo Webseite)

Die Pro Seite

Wie oben beschrieben sind die Webseiten initial meistens extrem schnell und durch optimiertes Assetmanagemet nochmal deutlich schneller. Lediglich ein Theme in meinen Tests nutze ein externen und langsames CDN um viele Javascript Dateien nachzuladen.

Durch das Generieren der Webseiten bin ich nun komplett unabhängig von dem schnelllebigen PHP und der MySQL Datenbank. Die Inhalte werden nur bei neuen Beiträgen lokal neu generiert und dann hochgeladen (bzw. in Zukunft über meinen Buildserver).

Alle Inhalte kann ich in schlanken und übersichtlichen Markdown Dateien pflegen. Die relevanten Bilder für die Beiträge liegen im selben Ordner. Jedes Bild ist mit seiner maximalen Auflösung gespeichert. Shortcodes generieren die benötigten Größen beim Bauen. Dadurch muss nur eine Datei pro Projekt vorhanden sein. Die perfekte Auflösung ist bei einem Wechsel des Themes somit auch sicher (sofern das Original groß genug war…).

Jede Webseite kann als Ganzes Projekt bei GitHub, Bitbucket oder jedem anderen Versionsverwaltungssystem versioniert werden. Es gibt somit automatisch eine Historie. Bei vielen Providern können die Markdown Dateien auch direkt auf der Webseite betrachtet werden. Theoretisch lassen sich die Inhalte auch im GitHub Editor bearbeiten. Einige Projekte nutzen dies um die Dokumentation ihrer Software einfach zu ermöglichen.

Ich muss mich nicht mehr mit ständig aktualisierten WordPress Plugins und deren Hinweisen auf neue Pro Versionen herumärgern. Daten über meine Webseite laden nun auch nicht mehr bei fremden Anbietern. Durch die fehlenden Plugins (bzw. deren native Einbindung in Hugo) ist der Footprint trotz der vielen WordPress Optimierungen deutlich kleiner. Javascript Dateien von 24 auf 1 und CSS Dateien von 15 auf 4 auf einer meiner Webseiten.

Was gegen Hugo spricht

Hugo ist meiner Meinung nach nur für Nutzer welche sich mit Dateien, Kommandozeile, Versionsverwaltungssoftware und HTML wohl fühlen. Natürlich kann eine minimale Seite mit einem Standardtheme erstellt werden aber dann ist an Anpassungen nicht zu denken.

Viele Themes bei Hugo sind leider etwas älter. Also sie wurden erstellt vor den 0.3*/0.4 Versionen. Dadurch sind Features wie Assets Bundles und Minification nicht vorhanden. Ich musste bei JEDEM Theme selber Hand anlegen. Einige Themes hatten die Verkleinerung von Bildern nicht dabei. Bei anderen Themes fehlten grundlegende SEO Funktionen. Oft waren die CSS Dateien nicht minifiziert oder es wurden mehrere Dateien eingebunden. Ein Bundling ist bei neuen Hugo Versionen Standard. Das Theme muss dies aber berücksichtigen.

Fazit

Für technisch Interessierte oder Webmaster die optimale Webseiten bauen möchten ist Hugo eine spannende Wahl. Bei PageSpeed Insights von Google Developers sind hohe Punktzahlen quasi garantiert. Mit der Hilfe von bundling und minification in den neuen Versionen gibt es diese Features ohne npm, grunt, webpack oder andere Tools jetzt geschenkt. Die Toolchain beschränkt sich somit auf Hugo und gegenbenenfalls Cotinous Deployment Software wie Jenkins oder Deploybot.

WordPress ist für einen großen Teil der Seitenbetreiber natürlich weiterhin eine gute Wahl. Allerdings sollte man sich der Schwächen bewusst sein. Eine einfache Landing Page braucht kein komplettes CMS und jeder Plugin erhöht den Overhead und die Angriffsfläche eines CMS!

Blogseiten konsolidiert

Wegen des Umzuges des Blogs auf die Neue Plattform habe ich die Chance genutzt (ur-)alte Inhalte zu konsolidieren. Sollte jemand irgendetwas vermissen, dann gibt es hier aus den alten Rubriken und Texten eine kurze Zusammenfassung.

Spiele und Programme

Einige der Spiele sind jetzt als Quellcode auf meiner GitHub Seite zu finden. Die Android Games gibt es im Google Play Store oder bei Amazon.

Spiele

Programme und Tools

Web Design

Die ehemaligen von mir erstellten und betreuten Webseiten. Als Content Management System (CMS) nutzte ich überwiegend WordPress und Drupal. Eigenentwicklungen basierten auf ASP.NET MVC oder PHP Frameworks. Das Web Design erfolgt in enger Abstimmung mit dem Kunden.

Firabica

Firabica hatte das Ziel die Benutzer ein Leben lang mit sinnvollen und zielgerichteten Trainingsplänen und hilfreichen Informationen gesundheitlich zu unterstützen. Der Schwerpunkt liegt auf Trainingsplänen die auf bewährten Systeme basieren, dabei sollen fundierte wissenschaftliche Erkenntnisse über kurzfristigen Modeerscheinungen liegen. Die Angaben des Benutzers bilden hierbei die Basis um mittels komplexer Algorithmen das passende Trainingssystem (und Trainingsplan) zu erstellen.

Features

  • Erstellung des Trainingsplan mittels intelligenter Algorithmen

Technology

  • ASP.NET MVC
  • .NET Core 2.0
  • Entity Framework Core
  • Bootstrap
  • Azure gehostet

MeinSportplan

Verwaltung einfach wie nie

Sie wollen ihre Mitglieder einfach und schnell erreichen? Sie wünschen sich weniger Stress bei der Verwaltung von Sportstunden? Sie möchten mehr Zeit für Ihre Kunden gewinnen? Sie haben Interesse daran die Auslastung der Trainer zu optimieren?

Dann ist der Sportstundenplaner MeinSportplan genau richtig für Sie.

Mit dem MeinSportplan – Sportstundenplaner erhalten Sie eine professionelle Plattform für die Verwaltung ihrer Mitglieder und Sportstunden. Ihre wichtigsten Daten (Mitglieder, Sportstätten, Sportstunden) verwalten Sie mit dieser Plattform einfach und übersichtlich.

Durch die online Planung der Sportstunden können Sie jederzeit Ihren aktuellen Sportstundenplan allen Mitgliedern anzeigen. Zudem gewinnen Sie mehr Flexibilität, indem Sie Ihre Mitglieder von überall aus erreichen können, um rechtzeitig Ankündigen oder Ausfälle bekannt zu geben. Telefonieren Sie nicht länger einzelnen Mitgliedern hinterher, sondern erreichen Sie mit einer Nachricht Ihre Kunden.

Mit dem Sportstundenplaner können Sie Events wie Vereinsfeiern, Turniere, u.ä. einfach erstellen und planen. Zugleich können Sie ohne großen Aufwand alle Vereinsmitglieder über die geplanten Veranstaltungen in Kenntnis setzen. Gewinnen Sie unkompliziert neue Mitglieder indem Sie ihren Verein vielen interessierten Menschen online präsentieren können.

Der Sportstundenplaner wurde durch den direkten Kontakt zu Vereinen und Personal Trainern auf die (aus der Praxis stammenden) Bedürfnisse angepasst und bietet Ihnen umfangreiche Funktionen, die Sie allesamt kostenlos nutzen können.

Das ist MeinSportplan!

Sie können alle ihre Mitglieder einfach und schnell erreichen.

Sie können Events wie Vereinsfeiern, Turniere, u.ä. einfach erstellen und planen.

Sie können Ihren aktuellen Sportplan allen Mitgliedern anzeigen.

Sie können unkompliziert neue Mitglieder gewinnen indem Sie ihren Verein vielen interessierten Menschen präsentieren können.

Sie können die Auslastung der Trainer optimieren.

Sie können umfangreiche Funktionen nutzen die durch den direkten Kontakt zu Trainern auf die Bedürfnisse aus der Praxis angepasst wurden.

und das alles kostenlos!

Features

  • Mandantenfähigkeit
  • Benutzerverwaltung
  • Kostenverwaltung
  • Personalisierte Portalseiten
  • An und Abmeldung durch Kunden
  • Bestandsverwaltung

Technology

  • ASP.NET MVC
  • Entity Framework 6

Wann-Reite-Ich

Wann-Reite-Ich war von 2013 bis 2016 eine professionelle Plattform für die Verwaltung der Mitglieder und Reitstunden. Der Benutzer hat weniger Stress bei der Verwaltung von Reitstunden, Anmeldungen und Abmeldungen.

Verwaltung einfach wie nie

Sie wollen ihre Mitglieder einfach und schnell erreichen? Sie wünschen sich weniger Stress bei der Verwaltung von Reitstunden? Sie möchten mehr Zeit für die Pferde und Reitstunden gewinnen? Sie haben Interesse daran die Auslastung der Reitlehrer und Pferde zu optimieren?

Dann ist der Reitstundenplaner Wann-Reite Ich genau richtig für Sie.

Mit dem Wann-Reite-Ich – Reitstundenplaner erhalten Sie eine professionelle Plattform für die Verwaltung ihrer Mitglieder und Reitstunden. Ihre wichtigsten Daten (Mitglieder, Reitlehrer, Reitstunden, Ställe, Hallenbelegung) verwalten Sie mit dieser Plattform einfach und übersichtlich. Legen Sie mit dem Reitstundenplaner für Ihre Pferde und Trainer deren maximale Belastung fest (Anzahl an Reitstunden pro Pferd/Tag), um die Auslastung der Reitlehrer und Pferde zu optimieren.

Durch die online Planung der Reitstunden können Sie jederzeit Ihren aktuellen Reitstundenplan allen Mitgliedern anzeigen. Zudem gewinnen Sie mehr Flexibilität, indem Sie Ihre Mitglieder von überall aus erreichen können, um rechtzeitig Ankündigen oder Ausfälle bekannt zu geben. Telefonieren Sie nicht länger einzelnen Mitgliedern hinterher, sondern erreichen Sie mit einer Nachricht Ihre Reitschüler.

Mit dem Reitstundenplaner können Sie Events wie Vereinsfeiern, Turniere, u.ä. einfach erstellen und planen. Zugleich können Sie ohne großen Aufwand alle Vereinsmitglieder über die geplanten Veranstaltungen in Kenntnis setzen. Gewinnen Sie unkompliziert neue Mitglieder indem Sie ihren Verein vielen interessierten Menschen online präsentieren können.

Der Reitstundenplaner wurde durch den direkten Kontakt zu Vereinen und Turnieren auf die (aus der Praxis stammenden) Bedürfnisse angepasst und bietet Ihnen umfangreiche Funktionen, die Sie allesamt kostenlos nutzen können.

Features

  • Mandantenfähigkeit
  • Benutzerverwaltung
  • Kostenverwaltung
  • Personalisierte Portalseiten
  • An und Abmeldung durch Kunden
  • Bestandsverwaltung
Technology
  • ASP.NET MVC
  • Entity Framework 6

PlanetPferd

Von 2012 bis 2016 war PlanetPferd.de ein Webportal für Pferdefreunde und Reisportbegeisterte. Das Projekte wurde vollständig von der Konzeption bis zur Markteinführung begleitet und umgesetzt.

Features

  • Vollständige Datenerfassung und Darstellung mit Drupal Kernfunktionen.

Technology

  • Drupal 7

Jobz320

320 Zeichen für einen neuen Job anstatt fünfseitigen Standardtexten. Das sind die neuen Jobz320 Jobportale.

Im Gegensatz zu den klassischen Jobportalen, die es wie Sand am Meer gibt, bietet Jobz320 einen völlig neuen Ansatz. Sowohl Stellenangebote wie auch Stellengesuche dürfen maximal 320 Zeichen umfassen. Recruiter und Bewerber müssen daher ihre Angaben auf das Wesentliche konzentrieren. Keine ausufernden Standardtexte die in jeder Bewerbung identisch sind. Natürlich ist jeder teamfähig, erwartet ein adäquates Gehalt und ist völlig flexibel im Alltag. Bei Jobz320 geht es um die wichtigen Teile eines Jobs!

Features

  • Single Page App

Technology

  • ASP.NET MVC 4.5
  • Entity Framwork 6
  • Bootstrap

KC-GT

Die Webseite des Kampfsportcenter Gütersloh wurde vollständig durch mich entwickelt und betreut. Das Design wurde auf Basis von Vorlagen des Kunden umgesetzt.

Features

  • Videointegration
  • Slider basierende Seiten
  • Optimierte Slider für Smartphones

Technology

  • PHP
  • Bootstrap

BürostuhlSportler

Die Webseite BürostuhlSportler umfasst die vollständige Realisierung der Weblösung inklusive Design und Entwicklung.

Technology

  • Drupal 7

Bärenbande

Für die Bärenbande Webseite ist der Händlerbereich erstellt worden. Dort können B2B Kunden ihre Einkäufe tätigen und zusätzliche Informationen und Angebote erhalten.

Technology

  • Drupal 6 und 7

Sonstiges

Beta4all

Beta4all.de war von 2002 bis 2006 ein erfolgreiches Portal für Spieletests und Betaversionen von Spielen. Die verschiedenen Versionen wurden alle vollständig in Eigenentwicklung erstellt, designt und mit einem kleinen Autorenteam betrieben.

Der steinige Weg zu SSL Zertifikaten

Schon seit einiger Zeit ist die Absicherung von Internetverbindungen für Google ein Rankingfaktor bei Webseiten und Blogs. Somit ergab sich für mich auch die Notwendigkeit meine Portale entsprechend mit SSL Zertifikaten auszustatten. Ein langer, steiniger und teurer Weg der mit Hilfe von Let’s Encrypt etwas entspannter ist.

SSL Zertifikat kaufen vs. Let’s Encrypt

Grundsätzlich gibt es mehrere Stufen von SSL Zertifikaten. Die einfachte Stufe ist die eigene Generierung eines Zertifikats und dessen Bereitstellung (Self-signed Zertifikate). Nachteilig bei dieser Methode ist eindeutig die große rote Fehlermeldung des Browsers, dass dies kein vertrauenswürdiges Zertifikat ist. Die Methode ist somit für alles außer Testsysteme ungeeignet.

Die nächste Stufe ist ein Domain SSL Zertifikat. Dies wird über eine autorisierte Stelle ausgegeben und beinhaltet eine Prüfung ob der Antragsteller auch der Besitzer der Domain ist. Das reicht für eine normale Webseite bereits aus. Für besseren Schutz lassen sich auch der Inhaber (Organization SSL Zertifikat) und der Zertifikatsinhaber (Extended SSL Zertifikat) validieren. Letzteres ist für alle Unternehmen relevant die eine grüne Adressleiste (Name des Unternehmens im Browser) benötigen, also beispielsweise Banken oder Versicherungen.

Die Zertifikate reichen dabei je nach Anbieter zwischen 2€ pro Monat bis zu einigen hunderte Euro pro Jahr UND Domain! Bei vielen Domains kommen dabei recht hohe Summen zustande. SSL Zertifikate können daher gebündelt werden (Multidomain SSL Zertifikate), dies spart ein paar Euro. Bei vielen Subdomains besteht ebenfalls die Möglichkeit ein Wildcard SSL Zertifikat zu erstellen, dies beinhaltet dann alle Domain in der Form *.SPech.de.

Ein Zusammenschluss von vielen Unternehmen hat das Projekt Let’s Encrypt gestartet. Das hochgesteckte Ziel ist die Bereitstellung einer Zertifizierungsstelle mit vollständig kostenlosen und sicheren Zertifikaten und deren automatisierte Generierung. Bei den Zertifikaten handelt es sich um Domain und Multidomain SSL Zertifikaten!

Die Einrichtung

Grundsätzlich ist der Ablauf für die Beschaffung eines Zertifikats sehr übersichtlich. Zur Bestellung wird ein privater Schlüssel und ein Certificate Signing Request (CSR) erstellt. Der CSR beinhaltet neben einigen formalen Informationen auch die Domainnamen. Der Request ist dann an die Zertifizierungsstelle zu schicken. Nach der Validierung kommt dann ein Zertifikat (CRT) zurück welches zusammen mit dem privaten Schlüssel für den Webserver nutzbar ist.

Bei virtuellen oder root Servern mit SSH Zugriff und eigener Administration ist der Prozess eher trivial. Let’s Encrypt stellt dazu alle notwendigen Dokumente und Skripte zur Verfügung. Bei gehosteten Webseiten ist die Hürde hier deutlich höher. Eine Anleitung für meinen Provider Hosteurope hat mir sehr geholfen. Da sich das Verfahren hier bei jedem Anbieter (1&1, Strato, GoDaddy, …) unterscheidet gehe ich hier nur auf meine gefundenen Probleme und Hürden ein.

Die Validierung: Entweder lassen sich Domains über DNS Einträge oder (HTML) Dateien validieren. Im ersten Versuch hatte ich die DNS Variante probiert. Leider dauert die Replikation dieser TXT Einträge analog zu A-Records auch 24-48 Stunden. So lange wollte ich dann doch nicht warten. Bei der HTML Variante muss für JEDE! Domain eine eigene Datei in einem Unterverzeichnis abgelegt werden. Dies dauert extrem lange. Zusätzlich hatte ich einige Subdomains die nicht öffentlich zugänglich sind (.htaccess). Für diese Seiten musste ich also die Konfigurationen ebenfalls anpassen damit SSL dort auch funktioniert.

Mixed Contend: Meine Webseiten sind über viele Jahre gewachsen und teilweise aus älteren Systemen überführt worden. Oft schleichen sich dort feste Verweise in der Form http://www.spech.de/.../bild.jpg ein oder Links sind fix mit http erstellt. Dies führt im Browser zu einer Warnung, dass die Seite aufgrund unsicher eingebundener Elemente nicht den aktuellen Sicherheitsrichtlinien entspricht. Entsprechend müssen alle Verweise angepasst werden.

Umleitung: Am Schluss mussten alle Verweise auf die http Version mittels Weiterleitung auf die https Variante eingestellt werden. Neben automatischen Weiterleitungen im Webserver muss diese Einstellung auch in den Content Management Systemen erfolgen (WordPress, Drupal, …).

Lets’Encrypt Automatisierung für HostEurope

Es gibt für HostEurope mittlerweile einen etwas weniger steinigen Weg zusammen mit einem Raspberry Pi (oder anderen Linux Systemen).

Auf dem Raspberry Pi certbot installieren für jessie anhand der Anleitung. Danach die Skripte von hosteurope-letsencrypt konfigurieren und ausführen. Zum Abschluss die passenden Daten in KIS hochladen.

Drupal zu WordPress

Seit heute präsentiert sich SPech.de in einem völlig neuen Design und einer neuen Technologie. Das langjährig genutzt Drupal ist WordPress gewichen. Warum dieser Wechsel der mich doch einige Wochen beschäftigt hat?

Drupal begleitet mich für verschiedene Projekte seit der Version 6. Viele Kunden konnte ich mit angepassten Lösungen glücklich machen und ich selber setzte es bisher für alle meine Seiten ein. Ein paar Gründen haben mich aber bewogen zu WordPress zu wechseln.

Die Codebase bei WordPress ist deutlich kleiner als bei Drupal. Anstatt einiger zehntausend Dateien liegen nun nur noch ein paar Tausend umher. Potentiell können dort auch weniger Sicherheitslücken vorhanden sein. Zusätzlich ist die Datenbank deutlich schlanker.

Die Performance

Die Performance von Drupal hat mit der Version 8 massiv abgenommen. Auf meinem Hosteurope Webspace lagen die Antwortzeiten, trotz Caching usw., bei bis zu DREI! Sekunden! Absolut inakzeptabel für jeden Besucher.

Die Usability ist bei WordPress ebenfalls schöner geworden als bei Drupal. Mit der achten Version sind einige Oberflächenoptimierungen in Drupal erschienen aber für einen einfachen Blog, out-of-the-box ist WordPress besser geeignet.

Schwere Entscheidung

Warum habe ich mich dann mit der Umstellung so schwer getan?

Drupal ist unschlagbar in seinen Anpassungen. Mit der Hilfe von Views und Feldern kann man extrem schnell sehr umfangreiche und komplexe Seitentypen abbilden. Dies ist enorm wichtig bei Webseiten mit vielen verschiedenen Dateninhalten, welche auch von verschiedenen Autoren bereitgestellt werden sollen.

Das „Freemium“ Modell von WordPress finde ich absolut grausam. Fast jeder Plugin bietet nur einen Teil der Funktionalitäten ab. Für ein oder zwei minimale Features, welche aber eigentlich den Hauptgrund des Plugins abdecken wird der Nutzer zur Kasse gebeten. Selbst für das banale Anpassen mancher Themes gibt es jährliche Premium Pakete.