archive / article · 2020

Markdown vs Headless CMS

Published 2 February 2020

#tailwind-css
#markdown
#headless-cms

Using markdown files for writing blogs vs using a headless CMS… A trickier decision than I thought. But why? A headless CMS should mean that if I wanted to make additions for example to this online blog, I could just log in to my headless CMS platform, make changes then publish.

If it was really all that smooth sailing, well it could be due to the Headless CMS platform you decide on as well. Transforming CMS content to markdown can be an initial challenge, but once complete, that part is done. However, it just takes too long. In my use case I was using Sanity an amazing headless CMS platform that you host yourself and can customise it to all your desires.

Honestly, I spent way more time customising my Sanity Site, and setting up all the tagging that I wanted, which I could have spent on writing blog content. Whilst plain markdown files are not as fancy, the beauty is the simplicity. I could remote SSH into my computer to make file changes, or even make direct changes on github on the web, both of this could be achieved quite easily on the phone.

That takes me to, use the tools that are most effective for your situation. This blog is mine and mine only, therefore I should use the tools that match my lifestyle, for example, my urges to write blogs usually comes in the morning and on commutes when I am away from a computer. So I should find a way to do it on my phone, also when I do decide to write blog content on a computer, I want to be able to make changes, see those changes, and publish with quick lifecycles, any second waiting means my motivation is drifted to other activities.

Anyway, VIM + markdown is good for being a purist too. :grinning: :rocket:

Below for Example Markdown features

This is a paragraph. Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.

Headings

H1 For example

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.

H2 For example

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.

H3 For example

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.

H4 For example

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.

H5 For example

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.

H6 For example

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.

Emphasis

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Strikethrough uses two tildes. ~~Scratch this.~~

Blockquotes

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let’s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Horizontal separator

This is a horizontal separator:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.

List types

Ordered list

List item 1
List item 2
1. Nested list item A
2. Nested list item B
List item 3

Unordered list

List item
List item
- Nested list item
- Nested list item
  - Double nested list item
  - Double nested list item
List item

Mixed list

First ordered list item
Another item
- Unordered sub-list.
Actual numbers don’t matter, just that it’s a number
1. Ordered sub-list
And another item.

Links

Inline-style link

Inline-style link with title

Reference-style link

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself.

URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or http://www.example.com and sometimes example.com (but not on Github, for example).

Some text to show that the reference links can follow later.

Images

Images included in _posts folder are lazy loaded.

Inline-style:

Reference-style:

Table

Tables	Are	Cool
col 3 is	right-aligned	1600
col 2 is	centered	12
zebra stripes	are neat	1

Markdown	Less	Pretty
Still	`renders`	nicely
1	2	3

Syntax highlight

var s = 'JavaScript syntax highlighting';
alert(s);

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.

s = "Python syntax highlighting"
print s