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!

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

• Warlock of Blackswamp (Mobile) - Google Play Store
• AirTaxi (Mobile) - Google Play Store
• AirTaxi 2 - Download
• WoWReborn - Download
• AirTaxi - Download - Ship Addon - Horror Addon

Programme und Tools

• TerraPiPy - GitHub
• FitPi - GitHub
• LearnLife - Download
• Prognoseverfahren - Download
• Superformel Simulator
• MTG Analyser - PDF
• Archivist 2 - GitHub
• Marvin’s Arena - GitHub

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.

Grafana Dashboards sind eine grafisch ansprechende Alternative zu meinem Körpermaße Dashboard FitPi. In diesem Artikel geht es um die Einrichtung eines exemplarischen Dashboards zur Darstellung von Körpermaßen (Gewicht, …) auf dem Raspberry Pi. Die Daten kommen aus einer MariaDB/MySQL Datenbank und werden über ein einfaches Tool eingetragen.

LAMP/LEMP Stack installieren und konfigurieren

Adminer ist ein PHP Tool zur Administration von Datenbanken. Das Tool wird die Eingabemöglichkeit für die Erfassung des Gewichtes, Größe, usw. sein. Damit das Tool funktioniert ist ein Webserver mit PHP notwendig, sowie die Datenbank.

Der klassische LAMP Stack besteht auf (Linux), Apache, MySQL und PHP. Allerdings nutze ich für dieses System den LEMP Stack. Dieser ersetzt den Apache durch Nginx. Nginx hat in diesem Fall den Vorteil, dass sich damit sehr einfach ein Reverse Proxy für Grafana einrichten lässt der auch performanter als der Apache ist. Grafana besitzt einen integrierten Webserver aber auf diesem Weg kann der Zugriff zentral über Nginx konfiguriert werden. Die Entscheidung für MySQL oder MariaDB ist eher eine Entscheidung zwischen dem Unternehmen Oracle oder der Open Source Community.

Die Installation erfolgt mit einigen einfachen Kommandos (Einfach leider nur auf stretch – Jessie hat leider nur PHP 5 und benötigt deutlich mehr Schritte). Die Datenbank fragt zwischenzeitlich nach dem root Passwort für den Administrator Zugang! Danach wird der Zugang für den Benutzer aber auf localhost beschränkt.

$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt-get install nginx php-fpm php-mysql php-cli php-cgi php-common php-curl php-gd php-mcrypt php-json php-tidy php-sqlite3 php-opcache php-intl php-zip php-xml php-mbstring php-iconv php-pear mcrypt
$ sudo apt-get install mysql-server mysql-client
$ sudo mysql_secure_installation

Nginx muss noch konfiguriert werden um PHP Dateien anzuzeigen.

$ sudo nano /etc/nginx/sites-available/default

Ersetzen von index index.html index.htm index.nginx-debian.html; durch index index.php index.html index.htm index.nginx-debian.html;

Entfernen der Kommentare vor dem PHP Bereich.

location ~ \.php$ {
    include snippets/fastcgi-php.conf;
    fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
}

Nach einem Neustart ist der Webserver fertig.

$ sudo nginx -t
$ sudo systemctl reload nginx

Adminer lässt sich direkt von der Webseite runterladen (vorher nach der aktuellen Version schauen!) und im Webserver Verzeichnis ablegen. Admin Skripte sollten NIEMALS auf einem produktiven System aus dem Internet erreichbar sein! Für den lokalen Raspberry Pi in diesem Artikel reicht dies aber aus.

$ cd /var/www/html
$ sudo wget https://github.com/vrana/adminer/releases/download/v4.6.2/adminer-4.6.2-mysql.php

Das Skript sollte nun erreichbar sein unter dem Namen des Raspberry Pi oder dessen IP-Adresse und dem Skriptnamen: http://RASPBERRY_PI_NAME_ODER_IP/adminer-4.6.2-mysql.php

Grafana installieren

Leider gibt es kein Paket in der aktuellen Raspberry Pi Paketverwaltung. Glücklicherweise existiert ein Git Projekt welches diese Paket zur Verfügung stellt. Das Ergebnis ist auch für die Paketverwaltung nutzbar, es muss lediglich eine neue Quelle hinzugefügt werden (für stretch auf Raspberry Pi 2 und 3).

$ echo "deb https://dl.bintray.com/fg2it/deb stretch main" | sudo tee -a /etc/apt/sources.list.d/grafana.list
$ sudo apt-get update
$ sudo apt-get install grafana
$ sudo /bin/systemctl daemon-reload
$ sudo /bin/systemctl enable grafana-server
$ sudo /bin/systemctl start grafana-server

Grafana ist nun erreichbar unter der Adresse (Port 3000): http://RASPBERRY_PI_NAME_ODER_IP:3000/

Der Default Login ist admin:admin und sollte direkt geändert werden.

Datenbank erstellen und Daten eintragen

Über die Adminer Oberfläche (SQL Kommando) kann die Datenbank (hier: life) erstellt werden inklusive eines Grafana Benutzers zum lesen der Daten. Dort erfolgt das Anlegen einer Tabelle für Körpermaße (measurement). Die Daten lassen sich per SQL Kommando INSERT erfassen oder über die Dateneingabe in Adminer. Das Anlegen der View (v_measurement) ermöglicht, dass Hinzufügen von berechneten Feldern. In diesem Beispiel sind es der berechnete Body-Mass-Index und die Grenzen zum Übergewicht bzw. Untergewicht. Der Bereich dazwischen ist das Normalgewicht.

CREATE DATABASE `life`;
CREATE USER 'grafana'@'localhost' IDENTIFIED BY 'grafana';
GRANT SELECT ON life.* TO 'grafana'@'localhost';
FLUSH PRIVILEGES;
USE `life`;
CREATE TABLE `measurement` (
    `date` date NOT NULL,
    `height` int NOT NULL,
    `weight` double NOT NULL
);
CREATE VIEW `v_measurement` AS select `measurement`.`date` AS `date`,`measurement`.`height` AS `height`,`measurement`.`weight` AS `weight`,((`measurement`.`weight` * 1.0) / (((`measurement`.`height` * 0.01) * `measurement`.`height`) * 0.01)) AS `bmi`,25 AS `bmioverweight`,18.5 AS `bmiunderweight` from `measurement`;
INSERT INTO `measurement` (`date`, `height`, `weight`) VALUES ('20170101', '180', '85');
INSERT INTO `measurement` (`date`, `height`, `weight`) VALUES ('20180505', '180', '91');
INSERT INTO `measurement` (`date`, `height`, `weight`) VALUES ('20180520', '180', '86');

ACHTUNG: Sollte der root Zugriff auf localhost beschränkt sein (bei MariaDB), so muss die Datenbank und ein schreibende User zuerst über den MySQL Client angelegt werden!

$ sudo mysql -u root -p

CREATE USER 'pi'@'%' IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON *.* TO 'pi'@'%' WITH GRANT OPTION; -- Besser wäre hier die Tabelle anstelle von *.* Außerdem ermöglicht GRANT OPTION denn Vollzugriff auf alle Berechtigungen!
FLUSH PRIVILEGES;

Grafana einrichten

Der letzte Schritte ist das Einbinden der Datenbank in Grafana, das Erstellen eines Dashboards und das Hinzufügen eines Panels für die Daten.

Die Datenquelle wird über den geführten Assistenten „Add data source“ durchgeführt.

Name: life
Type: MySQL
Host: localhost:3306
Database Name: life
User: grafana
Password: grafana

Jetzt kann über „New Dashboard“ ein neues Dashboard erstellt werden. Zum Anzeigen von Werten nutzt Grafana Panels. Hier bietet sich das „Graph“ Panel an. Mit einem Klick auf den kleinen Pfeil neben dem Titel erscheint ein Menü zum bearbeiten. Als Datenquelle wird life gewählt. Das Query ist wie folgt. (ACHTUNG: Wenn _$_timeFilter aktiv ist muss oben rechts der Zeitraum entsprechend groß gewählt werden um alle Werte zu erfassen. Zum testen kann der WHERE Teil vorerst entfallen). Bei Problemen hilft „Generated SQL“, der Wert kann in Adminer zum prüfen kopiert werden.

SELECT
    `date` as time_sec,
    `weight` as Gewicht
FROM `v_measurement`
WHERE $__timeFilter(`date`)
ORDER BY `date` ASC;

Zum Schluss noch einen Namen beim Speichern angeben und das Dashboard ist fertig!

Weitere Daten und Möglichkeiten

Weitere Ideen für Datenquellen (Kopfschmerzen, Krafttraining, Sport, …) finden sich auch in meiner Serie Hacking Sebastian – Teil 1 – Daten (Quantified Self).

Für produktive Nginx Server gibt es eine Sammlung von empfohlenen Konfigurationen.

Polar Flow Laufuhr Daten ermitteln: polar-flow-export.

Als Vorbereitung für eine Reihe über DevOps Prozesse und Tools habe ich mich mit den unterschiedlichen DevOps Modellen auseinandergesetzt. Daraus ist eine Zusammenfassung der Hauptkategorien und Unterkategorien entstanden. Als Quelle dienten diverse Hersteller und Webseiten. Die Tabelle enthält die gängigsten Modelle.

Quellen:

• 1 http://milindtech.com/course/automation/devops/
• 2 https://en.wikipedia.org/wiki/DevOps_toolchain
• 3 https://www.blazemeter.com/blog/ultimate-devops-tools-ecosystem-tutorial-part-1

Bildnachweis: Wikipedia – DevOps – toolchain