What is CMS?
If you want anything other than WordPress, Medium, Blogspot, Ghost, etc. Or any other blogging platform, or you just want to know more. You will get to know a term called CMS – Content Management System.
What a CMS does is just provide a structural way to manage your content. Imagine you have tens of thousands of blog posts, how should you store and manage them in a great order? That way you can edit them, and revisit them sometime in the future effectively.
Management features such as:
- Authors – Administrate how many authors you have, review their writings, etc.
- Content – Put posts into categories, add tagging system, able to place theme in systematic order.
- Plugins – WordPress has a lot of plugins from improving your SEO to adding subscription section, etc.
These features are almost a must if you want to have a long-lasting blog or a website. But if you’re just making a simple few pages website, you really don’t need it.
What is a Traditional CMS?
- Your posts are stored as Markdown
Tradition CMS store your every blog post into a separate file, usually have a file extension named .md or .mdx, it is a shorthand for Markdown files. So you can write something like:
## Happy New Year
**Hello** mum.
The above input would be translated by the CMS: “Heading 2 for using ##, and ** for making it bold” then output it as HTML for you. So you don’t need to write code like this: “<h2>Happy New Year</h2><p><b>Hello</b> mum</p>”, and be able to just focus on writing the content.
- Markdown to published URL
Your Markdown files are usually located inside a folder named blog or posts, depends on how you want it. The way you put your Markdown files usually reflects in the published URL as well. If you put your files inside root/posts/hello-mum.md, the published URL will look like example.com/posts/hello-mum. But it depends on how you set it up or which CMS you’re using.
If you want a new post, you just create a new .md file. If you named it peter-parker.md, the URL will end with posts/peter-parker.
- Schema for your Markdown
Schema is a collection of variables that you define for your CMS, an example Markdown file can look something like this:
---
title: 'Hello Mum'
date: 2023-11-10
tags: ['Parenting', 'Mum', 'Family']
summary: 'Say hi to your mum instead of hello world'
image:
src: /images/mumSmiling.jpg
alt: myMum
authors: ['default']
---
<img src="/images/omelet.jpg" alt="omelet"/>
or
## Breakfast
I usually make omelet for her....... (continue on your article)
The fields such as title, date, tags, summary, image src & alt, authors are predefined. You just need to change their values for each field accordingly. However, if you are a developer, you can easily edit the fields as you wish.
As you can see, you can even insert HTML code inside your Markdown too, how convenient is that?
What is a Headless CMS?
- It uses database to separates your webpage and blog posts.
Headless CMS works similarly like traditional one, you can write in Markdown too. But it doesn’t store your blog post into Markdown on your website. Instead, it separates your content from your website, let me explain.
Headless CMS means the content is separated from your front-end. Your blog posts are stored on a back-end server elsewhere.
When you build your website in a traditional CMS, we usually call that static site generation. It means you place everything including articles you wrote, the design of your website and the CMS system inside the same folder. Then, you generate it when it’s ready, so it output a folder contains everything – that’s what the visitors get to see.
But a headless CMS would not contain blog posts or authors information inside your website design folder originally.
Instead, the content is stored on a cloud server inside a database. When you build your website, your website has a logic to query (talk to the database on the cloud) to retrieve all your posts that are stored on the cloud server. So when you publish your website, it automatically gets those data from the cloud, integrate it as part of your website, then it output a full website with your blog posts.
Downside of headless CMS
- Cost
Traditional CMSs are usually free, you just need to pay for your website hosting cost. If you’re using GitHub, it’s basically free. On the other hand, headless CMS usually charges a monthly fee plus extra cost per seat (author), meaning you pay for how big your team is.
- Bandwidth limits (Cost)
If your website has a lot of content and assets (images) it can use up a lot of bandwidth of your headless CMS server. Their service also has bandwidth limits for each plan you choose. But with traditional CMS, you only need to care about the hosting cost and website bandwidth. And if you are using Cloudflare Pages, it offers unlimited bandwidth, for free.
- Require more effort to build
Static site generator (traditional CMS) is easier to implement than headless CMS. It is because for traditional CMS you only need to care for schema and writing Markdowns, and it will likely work for across many traditional CMS. But headless CMS requires a bit of API fetch logic, and to learn a specific query method for each headless CMS provider.
When to use which?
- Traditional CMS
e.g. Hugo, 11ty, Jekyll, Gatsby etc.
Small team or just you.
- Headless CMS
e.g. Sanity, WordPress, Strapi, Drupal, Payload, Prismic etc.
Big team or for future scalability.
It does not mean you shouldn’t use a headless CMS if you have a small team, it is just a general guideline.
Also, if you don’t want to manage and write your blog post locally, you should consider using a headless CMS as well.
If you only care about writing or not a developer
Just use WordPress. Don’t even bother with any other CMS.
It provides scalability when you need it, and most importantly, you don’t need to tinker around the code.
This is coming from my research and experience.
Good luck.
