My new Jardin Intérieur - Part 2 Technology

As easy as pen and paper with Markdown

This part is about the technical implementation of my small Jardin Intérieur on Cronhill.de with simply constructed Markdown files.

In the first part, I tried to explain how one can understand a Mind Garden or Jardin Intérieur. What metaphors are available for a better understanding? What is the benefit of a Jardin Intérieur for me personally, how can it help me?

Essential from a technical point of view were a few basic requirements:

- no folder structures
- no orphaned unlinked elements
- all elements are linked

Anne-Laure Le Cunff mentions the following principles for sowing future ideas in the Jardin Intérieur:

- Sammeln
- Verbinden
- Erstellen

See link in footnotes.

If you want to get a full picture of my thoughts on the Jardin Intérieur, perhaps read my first essay on it first: My new Jardin Intérieur on Cronhill.de.

My new Jardin Intérieur - Part 2 Technology - Rose Rambling Rector in our garden
Rose Rambling Rector in our garden
The technology

As simple as pen and paper

I have been developing websites since 1998, 23 years now. I started at my first job as a web designer and developer with Microsoft Frontpage (sic!), then I continued with Macromedia's Dreamweaver, including the possibility to use templates, which was added later. Our company then bought an Imperia licence, and I also worked with versions 1 - 5 of Drupal, and later a lot with Wordpress, when it was still a blog and content management tool, before it developed into an egg-sucking jack-in-the-box. For many years now, I have been working for my clients with MODX, which in my eyes has the simplest and most straightforward template engine that enables the fastest conversion of HTML 5 mockups into templates. In this way, I have gained a lot of CMS experience over time.

Cronhill.de also runs with MODX. In the meantime, the templates have become quite complicated due to my high requirements. There is the possibility to repeat certain blocks, I can work with marginalia, integrate additional information, there is a template for code, one for content with many pictures. It has become quite complex. 

I didn't want all that for now.

It should be simpler. I didn't want complex input templates, but a simple format in which I could write easily. If you observe colleagues and developer trends a little like I do, you will notice two or three different trends: 

  • there is a trend towards simple and linear animation- and bells and whistles-free websites that have fully semantic, elegant and fast-loading HTML 5 source code
  • Wordpress is being used more and more by people who don't understand the template technology of Wordpress. Wordpress itself now contains all the technical finesse needed to design a site yourself without any knowledge - with sometimes glaring consequences for the amount of data consumed
  • There are more and more tools on the web that make end users completely independent of their own technical skills.

I no longer enjoy developing Wordpress templates. A MODX-based solution was also out of the question because, as in many other CMSs, the input options for content are always somehow limited to a form window. I didn't like that.

Markdown

Because of the many wikis I co-edit and because static website generators like 11ty and others are very much in vogue, I decided to look for a CMS where I could use Markdown files as the basis for the website.

What is Markdown?

Markdown is a simplified markup language for text documents developed in 2004 by American blogger and UI developer John Gruber and programmer, author and activist Aaron Swartz. The aim was to make code that had not yet been converted to XHTML easily readable. Conversion software converts the syntax into XHTML or HTML 5 before publication on the web. 

Punctuation marks are mainly used for text mark-up. Here are just one or two examples of how simple text mark-up is:

<em> = Emphasis is simply marked with two *asterisks* (asteriks).

<strong> = strong emphasis is marked with 4 **asterisks**. 

Headings are simply given a presented double cross/hash depending on the level. 

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

You can find more formatting options on the website of the daringfireball.net project. There is a very good cheatsheet on Cheatsheet auf Github.

The big advantage of Markdown is that the flow of writing is only minimally interrupted, a high readability is maintained. Since I write all my texts with iA Writer and have not used Word for a long time, I was already familiar with most of the Markdown markup.

Of course, you can also use normal HTML 5 in the Markdown files; this makes sense, for example, if you want to mark up external links (for example, with the attribute target).

Pico CMS

Find the right CMS

I searched for quite a while until I found a CMS that allows me to work only with Markdown files. This CMS is Pico 2.1, which is amazingly quick to install and just as quick to configure. Just as simple as pen and paper.

In addition to displaying content with Markdown, Pico CMS uses YAML to configure meta data. YAML is also a simplified source language, the recursive acronym initially meant "Yet Another Markup Language", this was later changed to "YAML Ain't Markup Language".

A typical header might look like this:

---
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 from Tutonauten has written a good tutorial on installing Pico CMS, which I simply link here (there is no need for redundant content on the net). But the English instructions from Pico CMSare also very easy to understand and implement.

I decided to continue the basic layout of Cronhill.de as far as the header of the page is concerned. The Jardin is now integrated into the other menu items, so horizontal navigation between the pages should still be possible.

The content presentation leads back to the beginnings of the WWW in a pleasant way: easy-to-read linear text presentation without gimmicks. Of course, I attach great importance to readability, so the lines are naturally limited in length and I have formatted all the text mark-ups that I classically use in my texts. External links are always marked with a symbol.

Screenshot Notepad++
Screenshot Notepad++
Simple editing

File transfer and editing with Notepad++

To stick to my simple editing principles, I definitely did not want a complicated and cumbersome editing and publishing method. Write locally, then open the FTP programme, connect to the server, then upload.

No way!

A good friend then pointed out to me that notepad++ has the option of transferring data to the server itself via FTP. And so I have now done it.

To do this, you first have to activate the FTP extension in the Notepad++ extensions and then set up your connection with your FTP data in the window that appears in the right-hand column. If you enter the direct path to your files there, the window will look like mine when the connection is established. (see above)

Double-click on a file to open it and edit it directly in the editor. As soon as you save the file, it is immediately uploaded and updated.

You can create new files by right-clicking in the white area. Since there is no template here, you have to copy the YAML header from another file, paste it and edit it.

[ADDENDUM OF 4 JULY 2021]

Notepad++ is a bit outdated. A nicer, more up-to-date version would be Visual Studio Code with the SFTP/FTP extension, wrote @lennybacon on Twitter. Thank you very much. I will definitely have a look at it.

Special features

Last updated / Tags

You can also create your own fields in the header of your Markdown file. This is what I did with the value "changed". Here I can enter a date for the last change. 

There is a separate page where all pages are displayed sorted by the date of the last change.

The template code for this is:

    {% 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 %}
 
Display a list of all articles sorted chronologically
Alternative

Tiddly Wiki

Anne-Laure Le Cunff has demonstrated an alternative for Ness Labs based on TiddlyWiki. Tiddlywiki calls itself a non-linear notebook for capturing, organising and sharing complex information. It can be used to write to-do lists as well as to write an essay or a story.

What's special about TiddlyWiki: All information is displayed in a single file. Content is displayed or hidden using Javascript. In my opinion, the advantage is also the disadvantage of the method. A lot of data has to be downloaded to call up large TiddlyWikis, which may not be read at all. That does not seem very effective to me.

On the other hand, I find it nice that it is also possible for technical laymen to set up such a page with the instructions from TiddlyWiki or Nesslabs.

This is the TiddlyWiki and this is the die Anleitung von Nesslabs. Here are some other technical methods.

If you want to delve further into this topic, I also recommend this overview of other andere Mind Garden Projekte on the Ness Labs site.

Änderungen

2021.06.28 - Added link to Markdown cheatsheet at Github

 

tl, dr;

How can I build a small Mind Garden, a Jardin Intérieur with Pico CMS and simple Markdown files.

Comments (0)


Write a comment




By sending this comment, I agree that the name and e-mail address will be stored by cronhill.de in connection with the comment I have written. The e-mail address will not be published or passed on to third parties.