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:
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.
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.
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).
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:
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.
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.
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.
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.
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.
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.
2021.06.28 - Added link to Markdown cheatsheet at Github
How can I build a small Mind Garden, a Jardin Intérieur with Pico CMS and simple Markdown files.