Blog / Neuste Artikel

Nachdem ich nun Tage mit der Erstellung der Webseite und dieses Blogs mit dem Generator-Framework Hexo verbracht habe, möchte ich diese Erfahrungen nun teilen. Das Schöne an dieser Übung bisher war, dass ich wieder viel über ein neues System gelernt habe, das Unschöne, dass es eigentlich zu lange gedauert hat diese ca. 10 Seiten zu erstellen.

Dieser Artikel ist der erste in einer Reihe über Hexo, bzw. der Erzeugung statischer Webseiten mit Generatoren.

Warum statisch?

Bei all den leistungsfähigen Web Frameworks und Web Content Management-Systemen, sei die Frage zu Beginn gestattet, warum denn unbedingt statische Web-Seiten generieren? Das klingt ziemlich 90er Jahre mäßig… Trotzdem ist es - insb. wenn man sich mit mit diesen “ich-kann-alles”-Web Frameworks auseinandergesetzt hat für viele Anwendungsbereiche zweckmäßig: die Webseiten können praktisch überall deployed werden, brauchen minimale Ressourcen (und erzeugen damit minimale Kosten) und sind maximal robust in der Bereitstellung. Wer möchte kann seine statischen Seiten auf Github hosten lassen - für umsonst. Wenn man dann noch an den Aufwand für Konfiguration eines dynamischen Web-Frameworks sowie die Pflege (Sicherheits-Patches, Updates) denkt, sollte die Entscheidung leicht fallen - jedenfalls sofern man sich nicht vor dem Texteditor und spitzen Klammern fürchtet.

Sicher (bevor ich jetzt mit einen Shitstorm von Web Framework/Web Content Management-Evangelisten überzogen werde) ist das ein bisschen Äpfel mit Birnen verglichen. Die Stärken und Einsatzgebiete solcher Systeme liegen woanders. Für jedes Problem den richtigen Hammer! Nur damit wir das mal klargestellt haben…

Installation

1. Voraussetzung für die Nutzung von Hexo ist Node.js. Je nach gewünschter Plattform kann man das per Package Manager machen, oder man lädt sich den entsprechenden Installer herunter. Das weitere Vorgehen zur Installation entnehmen Sie bitte den entsprechendene Beschreibungen.

   Als weitere Voraussetzung für die Installation von Hexo wird git genannt. Meinen Erfahrungen nach ist das nur für das Deployment der Webseiten nötig, nicht jedoch für die initiale Installation und Verwendung. Es kann aber nicht schaden, eine Version von git bereits jetzt zu installieren (sofern noch nicht vorhanden).

2. Hexo selbst wird per npm installiert. Die Installationsanleitung empfiehlt die globale Installation (was jedoch nicht zwingend nötig ist, trotzdem im Folgenden vorausgesetzt wird):

   npm install hexo -g

3. Danach kann man einen ersten Blog erstellen:

   hexo init <Verzeichnis>
cd <Verzeichnis>
npm install

   Und per

   hexo server

   startet man einen (Entwicklungs-)Webserver (standardmäßig auf Port 4000). Wenn Sie das gemacht haben, können Sie Ihren ersten Blog unter http://localhost:4000/ anschauen.

Gerade der eingebaute Webserver macht beim Erstellen von Webseiten viel Freude, da Änderungen an den Quellen sofort erkannt und neu generiert werden.

Konfiguration

Die wichtigste Datei für den Anfang ist die _config.yml, in die man zunächst seine “Stammdaten” (Name, EMail, Beschreibung, …) eintragen sollte. Danach ist es ganz nett im umfangreichen Verzeichnis vorhandener Blog Themes zu stöbern und eines davon für den eigenen Blog zu wählen.

git clone <Url des Theme Repositories> themes/<Name des Themes>

Das Theme wählt man dann durch Ändern des Eintrags theme in der _config.yml. Sofern der Hexo-Server noch läuft reicht ein Reload der Webseite und man sieht das neue Layout.

Generieren der Webseiten

Bis nun werden die Seiten ja per Hexo-Webserver dynamisch nach Änderungen generiert. Unser Ziel ist es aber, statische Webseiten zu erzeugen. Dazu reicht ein

hexo generate

Die Webseiten werden im Verzeichnis public generiert. Dieses kann man nun auf den Webserver seiner Wahl legen. Entweder manuell (per Dateikopie, FTP-Upload, etc.) oder Sie lassen sich dabei von Hexo unterstützen: im Abschnitt deploy der _config.yml lassen sich verschiedene Deployment Targets und -Verfahren eintragen. Zum Beispiel:

deploy:
       type: git
       repo:
          public: https://ihr.web.server.mit.git/public

Weitere Optionen und Parameter sind in der Dokumentation angeführt. Danach lassen sich die Seiten mittels

hexo deploy

auf die konfigurierten Targets veröffentlichen.

Inhalt und Layout

Eigentlich handelt es sich bei Hexo ja um einen Generator, der insb. für Blogs gedacht ist, d.h. Seiten, die immer gleich aufgebaut sind. Neben Blog-(Artikel)-Seiten verfügt diese Webseite noch über weitere Inhalte, die sich strukturell und im Layout stark unterscheiden. Diese Seiten lassen sich nur schwer mit Markdown beschreiben, da die Inhalte sehr umfangreich mit Layout (und Javascript) durchsetzt sind.

Darauf werde ich im nächsten Artikel eingehen…

Endlich ist sie - in Version 1.0 - fertig: die neue Webseite für meine Internet-Präsenz. Trotz aller Website-Baukästen, -Vorlagen und -Kochbücher habe ich den Informatiker-Weg gewählt: man sucht erstmal tagelang nach einer geeigneten Generator-Software, die man dann wochenlang konfiguriert und erweitert.

In diesem Fall ist meine Wahl auf Hexo gefallen, ein Generator-Framework für statische Webseiten, das unter Node.js läuft. Bis auf den Endpunkt für das Kontaktformular werden alle Seiten - und auch dieser Blog - mittels Markdown erstellt und dann per Hexo-Generator in statische HTML-Seiten “kompiliert”.

Warum nicht ein Wordpress, Joomla, Typo3, etc.? Komplexität! Bzw. in diesem Fall: fehlende Komplexität! Die HTML-Seiten können auf einen beliebigen Web-Server gestellt werden, ohne Backend-Logik (wie erwähnt, bis auf den Endpunkt für das Kontaktformular), mit minimalem Ressourcenverbrauch; weniger ist manchmal mehr.

Natürlich funktioniert so ein Ansatz nicht ohne Schmerzen: mal fehlt eine Abhängigkeit, mal klappt das mit der gewählten Templating-Sprache nicht optimal. Über diese Erfahrungen werde ich in einem der nächsten Artikel genauer berichten.

Das Layout basiert im Übrigen auf Bootstrap mit einigen jQuery-Extensions. Damit wollte ich gewährleisten, dass die Webseite ein Responsive Design aufweist und auf allen Browsern, Plattformen und Display-Größen gut aussieht. Sollte das bei Ihnen nicht der Fall sein, schreiben Sie mir bitte.

Die unvermeidlichen Social-Sharing-Buttons sind mit der c’t Shariff-Bibliothek realisiert. Damit wird verhindert, dass die Anbieter gleich beim Laden der Seite über diesen Umstand benachrichtigt werden. Erst beim Klicken eines Buttons wird der entsprechende Anbieter darauf aufmerksam gemacht, dass man auf dieser Seite unterwegs ist und sie empfehlen/teilen möchte. Im Hinblick auf den Datenschutz ein gewaltiger Vorteil.

Der erste Artikel ist immer der schwierigste. Man soll ja nicht gleich “mit der Türe ins Haus fallen”. Insofern möchte ich diese Gelegenheit nutzen, um mich und mein Angebot etwas genauer vorzustellen.

Meinen bisherigen Lebenslauf will ich nicht nochmal runterschreiben. Wer daran interessiert ist, kann hier nachschauen. Im Folgenden finden sich jedoch noch ein paar Zusatzinformationen.

Nach über 15 Jahren als Angesteller in der Software-Branche gehe ich nun neue Herausforderungen als Selbstständiger an. Als Software-Entwickler und -Consultant war ich in dieser Zeit mit verschiedenen Programmiersprachen, Plattformen und Applikationen beschäftigt, jedoch immer im Bereich Informationsmanagement, Content Management oder konkreter: als Entwickler und später Entwicklungsleiter eines Redaktionssystems. Das prägt natürlich: sowohl die Ausrichtung von Interessen als auch die Projekterfahrung.

Weniger bekannt dürfte sein, dass ich mich in allen Jahren meiner Berufstätigkeit ebenso reichlich intensiv mit der technischen Infrastruktur meiner Arbeitgeber beschäftigt habe. Von der Einrichtung der Arbeitsplatzrechner, über den Aufbau des Netzwerks bis zum Betrieb der Server war alles mit dabei. Später kamen die Themen Virtualisierung und Cloud-Deployment von Anwendungen mit hinzu. Und es waren viele Plattformen mit dabei: über Solaris, Linux, Windows hin zu den mobilen Systemen unter Android und iOS. Ich hoffe, diese Liste wird sich auch künftigt erweitern.

Was ich in all den Jahren sehr zu schätzen gelernt habe, sind die spannenden Entwicklungen im Open Source-Bereich. Sowohl bei den Betriebssystemen/Plattformen, als auch bei Anwendungen und im Entwicklungsbereich. Als interessierter Informatiker macht man “jede Menge Zeit platt”, um neue Entwicklungen und Paradigmen verstehen und anwenden zu lernen. Exemplarisch sei dabei die rasante Entwicklungs im Javascript-Umfeld genannt: vom Paria der Programmiersprachen hin zu einer effizienten Front- und Backend-Sprache mit Myriaden von neuen Bibliotheken und einer riesigen Community:

January Headline: JavaScript programming language of 2014!

JavaScript has won the award because it appeared to be the biggest mover of 2014. JavaScript won 1.70% in one year time …

Na gut, es waren nur 1,7% Steigerung, aber die sind echt interessant!

Natürlich findet man diese rasanten Entwicklungen nicht nur im Bereich der Programmiersprachen bzw. -Paradigmen. Genauso fesselnd sind Neuerungen beim Thema Paketierung und Deployment (z.B. Container-Technologien wie Docker) sowie IaaS und PaaS-Umgebungen. Gerade die großen Technologieunternehmen investieren hier unheimliche Summen für z.B. die Google App Engine, Microsoft Azure und Amazon AWS. Die Programmiersprachen-, Open Source- und Cloud-Thematik wird mich ziemlich sicher noch des öfteren hier in diesem Blog beschäftigen.

P.S.: Das Banner auf der Startseite und oben auf dieser Seite ist aus Design-Gründen reichlich farblos. So farblos, dass ich hier auf alle Fälle noch den Link auf das Orginal mit einfügen möchte. Es zeigt das Panorama des Jökulsárlón, einen Gletschersee in Island, den ich 2011 besucht habe.