Mein neuer Jardin Intérieur - Teil 2 Technik

So einfach wie Stift und Papier mit Markdown

In diesem Teil geht es um die technische Umsetzung meines kleinen Jardin Intérieur auf Cronhill.de mit einfach aufgebauten Markdown-Dateien.

Im ersten Teil habe ich versucht zu erklären, wie man einen Mind Garden beziehungsweise Jardin Intérieur auffassen kann. Welche Metaphern stehen zum besseren Verständnis zur Verfügung? Was bringt ein Jardin Intérieur mir persönlich, wobei kann mir dieser helfen?

Essentiell aus technischer Sicht waren ein paar Grundvoraussetzungen:

- keine Ordnerstrukturen
- keine verwaisten unverlinkten Elemente
- alle Elemente sind verknüpft

Anne-Laure Le Cunff nennt folgende Prinzipien für die Aussaat von zukünftigen Ideen im Jardin Intérieur:

- Sammeln
- Verbinden
- Erstellen

Wenn Du Dir ein vollständiges Bild über meine Gedanken zum Jardin Intérieur machen möchtest, lies vielleicht zuerst mein erstes Essay darüber: Mein neuer Jardin Intérieur auf Cronhill.de.

Mein neuer Jardin Intérieur - Teil 2 Technik - Rose Rambling Rector bei uns im Garten
Rose Rambling Rector bei uns im Garten
Die Technik

So einfach wie Stift und Papier

Ich entwickele seit 1998, nunmehr 23 Jahre, Websites. Angefangen habe ich an meiner ersten Arbeitsstelle als Webdesigner und -entwickler mit Microsoft Frontpage (sic!), dann habe ich weitergemacht mit Macromedias Dreamweaver, einschließlich der später hinzugekommenen Möglichkeit Templates zu verwenden. Unser Unternehmen hat sich dann eine Imperia Lizenz gekauft, daneben habe ich noch mit den Versionen 1 - 5 von Drupal gearbeitet, später viel mit Wordpress, als es noch ein Blog und Content Management Tool war, bevor es sich zu einer eierlegenden Wollmilchsau entwickelte. Seit vielen Jahren arbeite ich jetzt für meine Kunden mit MODX, das in meinem Augen über einfachste und unkomplizierteste Template-Engine verfügt, die schnellste Umsetzung von HTML 5-Mockups in Templates ermöglicht. Auf diese Weise sammelte ich über die Zeit eine Menge CMS-Erfahrung.

Cronhill.de läuft ebenfalls mit MODX. Dabei sind die Templates durch meine hohen Anforderungen mittlerweile ziemlich kompliziert geworden. Es gibt die Möglichkeit bestimmte Blöcke zu wiederholen, ich kann mit Marginalien arbeiten, Zusatzinformationen einbinden, es gibt ein Template für Code, eines für Inhalte mit vielen Bildern. Das ist mittlerweile ziemlich komplex. 

Das alles wollte ich jetzt nicht.

Es sollte einfacher sein. Ich wollte keine aufwändigen Eingabetemplates sondern ein simples Format, in dem ich einfach schreiben kann. Wer wie ich die Kollegen und die Entwickler-Trends ein wenig beobachtet, stellt zwei oder drei unterschiedliche Trends fest: 

  • es gibt einen Trend zu einfachen und linearen animations- und Schnickschnack-freien Websites, die über vollsemantischen, eleganten und schnell zu ladenen HTML 5- Quellcode verfügen
  • Wordpress wird immer mehr von Menschen genutzt, die die Template-Technologie von Wordpress nicht mehr verstehen. Wordpress selbst enthält nun alle technischen Finessen, um eine Seite ohne Kenntnisse selbst zu gestalten - mit teilweise krassen Folgen für die verbrauchte Datenmenge
  • es gibt immer mehr und immer fähigere Tools im Web, die Enduser komplett unabhängig von eigenen technischen Fähigkeiten machen

Wordpress-Templates zu entwickeln macht mir keine Freude mehr. Eine MODX-basierte Lösung kam auch nicht in Frage, da wie in vielen anderen CMS die Eingabe-Möglichkeiten für Inhalte immer irgendwie auf ein Formularfenster beschränkt sind. Das gefiel mir nicht.

Markdown

Aus vielfältigen Wikis, die ich miteditiere und weil gerade statische Website Generatoren wie 11ty und andere sehr en Vogue sind, habe ich mich dafür entschieden, ein CMS zu suchen, in dem ich Markdown-Dateien als Basis für die Website nutzen kann.

Was ist Markdown?

Markdown ist eine vereinfachte Auszeichnungssprache für Text-Dokumente, die 2004 vom amerikanischen Blogger und UI-Entwickler John Gruber und dem Programmierer, Autor und Aktivisten Aaron Swartz entwickelt wurden. Ziel war es, dass auch der noch noch nicht in XHTML umgewandelte Code gut lesbar sein sollte. Eine Konvertierungssoftware wandelt die Syntax vor der Veröffentlichung im Web in XHTML beziehungsweise HTML 5 um. 

Für die Textauszeichnung werden überwiegend Satzzeichen eingesetzt. Hier nur ein oder zwei Beispiele, wie einfach die Textauszeichnung ist:

<em> = Emphasis / Betonung wird einfach mit zwei *Sternchen* (Asteriks) ausgezeichnet.

<strong> = starke Betonung wird mit 4 **Sternchen** ausgezeichnet. 

Überschriften erhalten je nach Ebene einfach ein vorgestelltes Doppelkreuz/Raute/Hash. 

# Überschrift 1
## Überschrift 2
### Überschrift 3

Weitere Formatierungsmöglichkeiten findet Ihr auf der Website des Projektes daringfireball.net. Es gibt ein sehr gutes Cheatsheet auf Github.

Der große Vorteil von Markdown ist, dass der Schreibfluss nur minimal unterbrochen wird, eine hohe Lesbarkeit erhalten bleibt. Da ich alle meine Texte mit dem iA Writer und schon lange nicht mehr mit Word schreibe, waren mir die meisten Markdown-Auszeichnungen schon bekannt.

Selbstverständlich könnt Ihr in den Markdown-Dateien auch ganz normales HTML 5 verwenden, dies ist zum Beispiel sinnvoll, wenn Ihr externe Links besonders auszeichnen wollt (zum Beispiel mit dem Attribut target).

Pico CMS

Das richtige CMS finden

Ich habe eine ganze Weile gesucht, bis ich ein CMS gefunden habe, das es mir erlaubt nur mit Markdown-Dateien zu arbeiten. Dieses CMS ist Pico 2.1. Es ist erstaunlich schnell installiert und ebenso schnell konfiguriert. Eben so einfach wie Stift und Papier.

Neben der Darstellung von Inhalten mit Markdown setzt Pico CMS Konfiguration der Meta-Daten mit YAML. YAML ist ebenfalls eine vereinfachte Ausgangssprache, das rekursive Akronym bedeutete zunächst "Yet Another Markup Language", dies wurde später in "YAML Ain’t Markup Language" geändert.

Ein typischer Header könnte so aussehen:

---
Title: Welcome
Description: This description will go in the meta description tag
Author: Joe Bloggs
Date: 2001-04-25
Robots: noindex,nofollow
Template: index
---

YAML Header

Mirco Lang von den Tutonauten hat eine gute Anleitung zur Installation von Pico CMS geschrieben, die ich hier einfach verlinke (es braucht keine redundanten Inhalte im Netz). Aber auch die englische Anleitung von Pico CMS ist sehr gut verständlich und umsetzbar.

Ich habe mich dazu entschieden, das Basis-Layout von Cronhill.de fortzuführen, was den Header der Seite betrifft. Der Jardin integriert sich jetzt so in die anderen Menüpunkte, eine horizontale Navigation zwischen den Seiten soll so weiterhin möglich sein.

Die Inhaltsdarstellung führt -  wie ich finde - auf angenehme Art und Weise zu den Anfängen des WWW zurück: Einfach zu lesende lineare Textdarstellung ohne Spielereien. Natürlich lege ich hohen Wert auf Lesbarkeit, so dass die Zeilen in ihrer Länge natürlich begrenzt sind, und ich alle Textauszeichnungen formatiert habe, die ich klassischerweise in meinen Texten verwende. Externe Links sind grundsätzlich mit einem Symbol gekennzeichnet.

Screenshot Notepad++
Screenshot Notepad++
Einfache Bearbeitung

File Transfer und Bearbeitung mit Notepad++

Um bei meinem einfachen Bearbeitungsprinzipien zu bleiben: ich wollte auf keinen Fall eine komplizierte und umständliche Bearbeitungs- und Veröffentlichungsmethode. Lokal schreiben, dann das FTP-Programm öffnen, mit dem Server verbinden, dann hochladen.

Auf keinen Fall!

Ich wurde dann von einem guten Freund darauf aufmerksam gemacht, dass notepad++ über die Möglichkeit verfügt, selbst per FTP Daten auf Server zu übertragen. Und so habe ich es jetzt auch gemacht.

Dazu müsst Ihr in den Notepad++-Erweiterungen die FTP-Erweiterung zunächst aktivieren und anschließend in dem in der rechten Spalte erscheinenden Fenster Eure Verbindung mit Euren FTP-Daten einrichten. Wenn Ihr dort den direkten Pfad zu Euren Dateien angebt, dann sieht das Fenster bei Verbindungsaufbau aus wie meines. (siehe oben)

Mit einem Doppelklick auf eine Datei wird diese geöffnet und Ihr könnt sie direkt im Editor bearbeiten. Sobald Ihr die Datei speichert wird sie sofort hochgeladen und aktualisiert.

Neue Dateien legt Ihr mit einem Rechtsklick in die weiße Fläche an. Da es hier dann keine Vorlage gibt, müsst Ihr den YAML Header aus einer anderen Datei kopieren, einfügen und bearbeiten.

[Ergänzung vom 4. Juli 2021]

Notepad++ sei ein wenig in die Jahre gekommen. Eine schönere, aktuellere Variante wäre Visual Studio Code mit der SFTP/FTP Erweiterung, schrieb mit @lennybacon auf Twitter. Vor allem ist FTP nicht sicher, Passwort und Username werden im Klartext übertragen. Vielen Dank. Ich werde es mir auf jeden Fall anschauen.

Besonderheiten

Letzte Aktualisierung / Tags

Ihr könnt im Header Eurer Markdown-Datei auch eigene Felder anlegen. So habe ich es mit dem Wert "changed" gemacht. Hier kann ich ein Datum für die letzte Änderung angeben. 

Es gibt eine eigene Seite, in der alle Seiten nach dem Datum der letzten Änderung sortiert angezeigt werden.

Der Template-Code dafür ist:

    {% for page in pages("", depth=3)|sort_by([ 'meta', 'Changed' ])|reverse if not page.hidden %}
  • {{ page.meta.Changed|date("Y/m/d") }} {{ page.title }}
  • {% endfor %}

Anzeigen einer Liste aller Artikel chronologisch sortiert
Alternative

Tiddly Wiki

Anne-Laure Le Cunff hat für Ness Labs eine Alternative aufgezeigt, die auf TiddlyWiki basiert. Tiddlywiki nennt sich selbst ein nicht lineares Notizbuch zur Erfassung, Organisation und Teilen von komplexen Informationen. Es kann zum Schreiben von To-Do-Listen ebenso verwendet werden wie dazu, ein Essay oder eine Geschichte zu schreiben.

Das Besondere an TiddlyWiki: Alle Informationen werden in einer einzigen Datei angezeigt. Dabei werden Inhalte mit Javascript angezeigt beziehungsweise verborgen. Der Vorteil ist meiner Meinung nach auch der Nachteil der Methode. Es müssen für den Aufruf von großen TiddlyWikis auch viele Daten heruntergeladen werden, die unter Umständen überhaupt nicht gelesen werden. Das erscheint mir wenig effektiv.

Schön wiederum finde ich, dass es auch technischen Laien mit der Anleitung von TiddlyWiki beziehungsweise von Nesslabs möglich ist, sich eine solche Seite einzurichten.

Hier geht es zur Seite von TiddlyWiki und dies ist die Anleitung von Nesslabs. Hier werden noch ein paar andere technische Methoden aufgezeigt.

Wollt Ihr Euch weiter in diese Thematik vertiefen empfehle ich Euch auch diese Übersicht über andere Mind Garden Projekte auf der Seite von Ness Labs.

Änderungen

2021.06.28 - Link auf Markdown-Cheatsheet bei Github eingefügt

tl, dr;

Wie kann ich mit Pico CMS und einfachen Markdown-Dateien einen kleinen Mind Garden, einen Jardin Intérieur bauen.

Kommentare (0)


Schreibe einen Kommentar




Mit dem Absenden des Kommentars stimme ich zu, dass der genannte Name, die genannte E-Mail-Adresse von cronhill.de im Zusammenhang mit dem von mir verfassten Kommentar gespeichert wird. Die E-Mail-Adresse wird nicht veröffentlicht oder an Dritte weitergegeben.