Synapsenschredder

Code, Work, Income.

Couscous: schnelles erstellen von statischen Webseiten

Couscous: schnelles erstellen von statischen Webseiten

Nein, ich werde heute kein Rezept vorstellen. ;) Aber es kam kürzlich bei mir der Bedarf auf, eine kleine statische Webseite zu gestalten, auf der nicht sehr viel Dynamik stattfinden sollte. Vielmehr handelt es sich um eine reine Informationsseite, auf der sich die Inhalte - wenn überhaupt - eher im Monatstakt ändern würden.

Wordpress - Nein danke

Der erste Gedanke ist ja meistens: Wordpress installieren, passende Plugins und ein schönes Theme aussuchen, die paar Seiten schreiben und gut ist. Da hatte ich aber aus diversen Gründen keine Lust zu:

  • ich brauche irgendwo einen Server mit entsprechender Software (Webserver, PHP, MySQL)
  • Wordpress bringt für eine einfache statische Seite einfach zuviele Funktionen mit
  • man muss noch einige passende Plugins wie z.B. einen Cache installieren
  • typische Blog-Funktionen wie Kommentare, Backlinks etc. werden in diesem Fall nicht benötigt.

Alternative: Static Site Generator

Das brachte mich dann irgendwann zum Thema Static Site Generators, zu gut deutsch "Statische Webseiten Generatoren". Diese funktionieren mehr oder weniger nach dem gleichen Prinzip: über eine Konfiguration definiert man ein Template, über Markdown-Dateien (die mit der Endung ".md") schreibt man die Inhalte und ein manuell oder auch automatisch ausgelöster Prozess macht daraus dann eine fertige HTML-Seite. Die man, so wie sie ist, irgendwo hochladen kann.

Einer der bekanntesten Vertreter dieser Art ist Jekyll, der in Ruby geschrieben wurde. Es gibt aber noch unzählige weitere Generatoren in den verschiedensten Programmiersprachen, wie man anhand der Übersicht auf StaticGen sehr gut sehen kann. Dort findet man sicherlich einen für sich passenden Generator.

Vorteile gegenüber Blogs oder einem CMS

Für sehr einfache Seiten sprechen viele Vorteile für einen Static Site Generator:

  • beste Performance, da es kein Backend gibt, aus dem Daten gezogen werden müssten.
  • wenige technische Ansprüche. Man benötigt keinen voll ausgestatteten Webserver, keine Datenbanken, keine Skriptsprachen wie PHP oder Ruby etc.
  • zuverlässige Auslieferung, da es wegen dem vorherigen Punkt kaum technische Schnittstellen gibt, die ausfallen können.
  • sehr hohe Sicherheit, da es keine Datenbank oder ähnliches dahinter gibt, in die man sich einhacken könnte.
  • einfache Versionskontrolle, da man nur mit statischen Dateien arbeitet.

Zwei Nachteile sollte aber nicht verschwiegen werden:

  • man benötigt zumindestens grundlegende Programmierkenntnisse, da auf dem lokalen Rechner die Programmiersprache installiert sein muss, unter dem der Static Site Generator läuft.
  • wenn kurzfristig doch mal dringend was geändert werden muss, kann man sich nicht mal eben irgendwo einloggen und die Änderungen vornehmen. Dafür muss man lokal die Änderung vornehmen und die Seite durch den Generator aktualisieren.

Couscous

Ich habe mich dann für den PHP-basierten Generator Couscous entschieden. Der hat einen sehr interessanten Ansatz, der das Thema "Versionierung" gleich geschickt integriert. Voraussetzung ist, dass man PHP und das Versionskontrollsystem GIT auf seinem Rechner installiert hat.

Zunächst legt man auf GitHub ein Repository für seine Webseite an. Dies ist über die Oberfläche schnell gemacht. Danach erstellt man auf seinem Rechner ein Verzeichnis, in dem alle Dateien liegen sollen und führt innerhalb dieses Verzeichnisses einfach mal folgende Befehle aus:

echo "# Die neue Webseite" >> README.md  
git init  
git add README.md  
git commit -m "first commit"  
git remote add origin https://github.com/[GitHub-Accountname]/[Repository-Name].git  
git push -u origin master  

Damit hat man den ersten Commit erledigt und lokales Arbeitsverzeichnis und das GitHub Repository "kennen sich". Die README.md ist jetzt eigentlich nicht wichtig, aber der Inhalt dieser Datei (sofern was drin ist) wird immer standardmäßig auf der GitHub Oberfläche angezeigt.

Als Vorbereitung für später muss man nun auf GitHub dann noch einen speziell benannten Branch anlegen. Und zwar geht man dafür auf die Seite des Repositories und klickt auf die Select-Box "Branch: master". In dem Eingabefeld gibt man dann "gh-pages" ein und klickt auf die aufpoppende Option "Create branch: gh-pages". Dadurch ist es möglich, die GitHub Pages zu nutzen, ein Dienst von GitHub, der primär dazu da ist, Dokumentationen und ähnliches dort zu publizieren.

Nun lokal Couscous installieren, vorausgesetzt man hat Composer installiert oder lokal liegen:

php composer.phar require couscous/couscous  

oder

composer require couscous/couscous  

Dann hat man schon mal Couscous an sich installiert. Nun gilt es noch ein Template auszusuchen, was man für den Anfang einfach auf der Couscous Template-Übersicht machen kann. Das gewünschte Template runterladen und innerhalb des Projektverzeichnisses in einen Ordner namens "website" entpacken. Die Templates sind alles Pakete mit fertigen CSS-Dateien und einer "default.twig" Datei. Das eigentliche Template für die Template-Engine Twig geschrieben und mit entsprechenden Kenntnissen kann man es auch sehr einfach anpassen.

Dann lädt man sich am besten die Beispiel Konfigurationsdatei runter und speichert sie unter dem Namen "couscous.yml" ab.

Die Verzeichnisstruktur sieht dann bis zu diesem Punkt so aus:

  • /vendor
  • /website
  • composer.json
  • composer.lock
  • couscous.yml
  • README.md

Erstellen der Inhalte

Nun erstellt man die ersten Inhalte. Sinnigerweise beginnt man natürlich mit der Startseite. Die Datei dafür muss aber "index.md" und nicht "index.html" oder "index.php" heißen! Denn Couscous generiert später aus allen ".md" Dateien die entsprechenden HTML-Dateien. Eine einfache index.md mit einer Überschrift und einem Absatz sieht dann so aus:

# Hallo Welt!

Lorem Ipsum hastenichtgesehen!

Die "index.md" dem GIT Repository hinzufügen und am besten auch pushen.

Generieren der Seite

Jetzt kommen wir zum "magischen" Teil von Couscous, dem generieren der Webseite. Dafür geht man am besten über die Konsole in das Projektverzeichnis und führt folgenden Befehl aus:

vendor/couscous/couscous/bin/couscous deploy  

Couscous verlangt dann i.d.R. zweimal den Login für GitHub. Einmal für das eigentliche Repository, also den "master" Branch, und dann für die GitHub Pages, den "gh-pages" Branch. Es nimmt sich dann jede .md Datei und die Templates und generiert daraus ein fertig geschnürtes Paket, dass automatisch in dem "gh-pages" Branch gepusht bzw. hochgeladen wird. Wenn alles geklappt hat, dann kann man unter folgender URL die fertige Seite aufrufen:

[GitHub-Accountname].github.io/[Repository-Name}/index.html

Et voilà! Die erste Version der statischen Webseite ist fertig! Das ist natürlich noch nicht alles, schließlich will man die Seite evtl. unter einer eigenständigen Domain führen und nicht als GitHub Subdomain. Aber das ist ein Thema für einen separaten Artikel.

Für welche Seite ich Couscous nun konkret brauche, wird demnächst noch einmal Thema sein hier.