CMS.js – Der JavaScript Site Generator

Diese dateibasierten Systeme (Seitengeneratoren) erzeugen, aus nach bestimmten Kriterien aufgebauten Dateien, eine Website. Wenn Änderungen an der Website vorgenommen werden, werden die Inhalte der Dateien geändert.

Ein sehr bekannter Seitengenerator ist das auf der Programmiersprache Ruby basierende Jekyll. Jekyll wird beim Online-Dienst GitHub seit längerer Zeit erfolgreich für die Erstellung von Websites genutzt. Der inhaltliche Schwerpunkt bei Github liegt dabei auf der Dokumentation von Softwareprojekten.

CMS.js

Ein neues „Helferlein“ ist CMS.js. Es erzeugt ebenfalls eine Website mit HTML, CSS und JavaScript aus einfachen Inhalten. Bei CMS.js ist aber kein auf dem Server installiertes PHP, Node.js, Ruby, Perl, etc erforderlich. Die Website wird im Browser des Betrachters mittels JavaScript erzeugt (gerendert, generiert).

Da Texte mit HTML Befehlen schwer schreibbar sind, erwartet CMS.js Inhalte in der vereinfachten Auszeichnungssprache Markdown. Markdown lässt sich nach einiger Zeit recht gut und flüssig schreiben. Einen Eindruck von Markdown erhältst du beispielsweise im Online Markdown Editor dillinger.io.

Die Dateien mit den Inhalten werden in Verzeichnissen mit den Namen pages oder posts gespeichert. Das pages und posts Prinzip kennst du vermutlich aus WordPress. Eine Page hat einen Link im Menü und ist etwas eher Zeitloses, beispielsweise eine About Seite. Ein Post ist dagegen ein Artikel, der mit einem Datum verknüpft und auf der Startseite in umgekehrt chronologischer Folge angezeigt wird (die neuesten Artikel oben).

Ein Inhalt in CMS.js besteht immer aus dem Kopf und dem eigentlichen Text. Im Kopf werden Parameter für das Layout übergeben (default für pages und post für posts) und die Überschrift (title). Bei einer Page ist der title die Bezeichnung des Menüeintrages. Die Parameter werden oben und untern durch — begrenzt.

---
layout: post
title: Mein erster Blogpost
---

Und hier ist mein erster Blogpost!
... weiterer Text ... 

Installation

Die Installation auf deinem Webspace ist denkbar einfach und besteht aus dem Herunterladen und Entpacken des wenigen Quellcodes. Entweder du lädst das Dateipakets auf deinen lokalen Rechner und dann per FTP auf den Webspace oder du führst auf der Kommandozeile den Befehl

git clone https://github.com/cdmedia/cms.js.git

aus. Danach musst du die Datei js/config.js entsprechend deinen Wünschen anpassen. Die Bedeutung der Parameter sind dabei gut dokumentiert.

CMS.js - js/config.js
CMS.js – js/config.js

Du kannst existierende GitHub Dateien oder deine auf dem Server gespeicherten Texte anzeigen lassen. In meinem Fall wähle ich Server aus.

    // Mode 'Github' for Github Pages, 'Server' for Self Hosted.
    mode: 'Server',

Die Verzeichnisstruktur ist sehr übersichtlich.

CMS.js - Verzeichnisstrukturen
CMS.js – Verzeichnisstrukturen

Pro Inhalt schreibst du eine neue Datei mit der Endung .md (markdown), beispielsweise about.md.
Ein Blogeintrag muss ein Datum im Dateinamen haben, damit CMS.js eine Sortierung vornehmen kann (2016-01-01_example-post.md).

Wenn die Website im Browser aufgerufen wird, wird auch die JavaScript und die CSS Datei geladen und erzeugt lokal innerhalb deines Browsers die Website.

CMS.js - Website
CMS.js – Website

Editieren

Im Gegensatz zu klassischen Content Management Systemen gibt es keine Möglichkeit über ein Administrationsinterface im Browser einen Text zu editieren. Dadurch ergeben sich natürlich Unterschiede im Workflow.

Ein grosser Vorteil bei dieser Vorgehensweise ist beispielsweise, dass die Texte unabhängig vom Layout abgespeichert und mit einem Versionskontrollsystem verwaltet werden können. Das bedeutet, dass beliebig viele Autoren an einem Text arbeiten können, wenn Sie über entsprechende Rechte im Versionskontrollsystem verfügen. Das Content Management findet dabei unabhängig von der Website in einer Art Content Pool statt!
Das Versionskontrollsystem wird dabei zu einem Teil des Content Management Systems.

Ein Editor kann völlig unabhängig vom Rest der Systeme eingesetzt werden. Das kann ein Editor wie Atom oder TextWrangler (auf dem Desktop), oder aber auch dillinger.io (im Browser) oder nano (auf der Konsole) sein.

Fazit

CMS.js ist ein Beispiel für einen verteilten Umgang bei der Erstellung und Auslieferung von Inhalten. Die eigentliche Website wird erst innerhalb des Browsers beim Besucher erzeugt.

Links


tl;dr: CMS.js ist ein minimalistischer Website Generator

Autor: Hagen Graf

consultant, author, trainer, solution finder, web architect, developer, open source lover, visionary, orator, the good old webmaster. Able to simplify!

Kommentar verfassen