Blog / Erfahrungen mit Hexo (1)

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…