DEV Community

Cover image for Headless CMS for beginners
Joel Olawanle
Joel Olawanle

Posted on • Edited on

Headless CMS for beginners

For many, this might be your first time coming across the term “Headless CMS” and you will be forced to ask yourself - what makes a CMS headless? and what is CMS?

image

I once asked myself these questions, so it’s totally normal to ask but in this article, you will understand

  • What headless CMS is all about
  • What it does
  • What differentiates it from the traditional content management systems
  • Finally, list some Headless CMSes you can get started with in your next project.

For us to perfectly understand what the term “Headless CMS” means, we have to start by first explaining what CMS or Traditional CMS is all about.

CMS

image

CMS stands for Content Management System. We can refer to it as “Traditional CMS”. Traditional CMSes have been around since the early days of web development. It is a tool that helps you build a website without needing to write all the code(s) from scratch or even know how to code at all. CMS gives everyone the privilege to build beautiful websites easily as long as you can read and operate a computer.

This has helped many people create awesome websites such as blogs, e-commerce, personal, and even organization websites without struggling to build their own system for creating web pages, storing images, and other functions. In other words, CMS helps you handle both the frontend and backend aspects of your websites.

As a developer, you will sometimes find yourself at the mercy of these platforms in terms of what you can build because with a traditional CMS, your frontend, backend, and database all live together as one tangled-up unit on your server (it puts everything in one big bucket such as your content, images, HTML, CSS). Some popular examples are WordPress, Wix, Drupal, Joomla, and lots more.

Headless CMS

image

Headless CMS gives you the privilege of taking charge of your website. It handles the backend while you handle the frontend meaning your frontend and your CMS are no longer permanently bound up together and would now make use of an API (Application Programming Interface) to talk to each other.

In simpler terms, a headless CMS is a back-end only content management system (CMS) that gives you as a developer the advantage of building the frontend website using whatever technology you like to customize it to your taste. This simply means you will need to manage both the frontend and the backend.

This gives developers the privilege of making use of their favorite frameworks (vue.js, react, angular) and JamStacks static sites generators (Nuxt.js, gatsby, Next.js, Gridsome) to build and then allows them to deploy such websites/ web apps to platforms like netlify, vercel, and lots more.

Headless CMS also allows developers to build native mobile apps (iOS, Android, Windows Phone) meaning it is not limited to websites alone since headless CMS delivers your content through an API to where you need it. This makes it a powerful option for mobile and web developers.

Understanding the term “headless CMS” alone will give you a proper understanding of what it is all about. According to storyblock, the term “headless” comes from the concept of chopping the “head” (the front end, i.e. the website) off the “body” (the back end, i.e. the content repository).

A headless CMS remains with an interface to add content and a RESTful API (JSON, XML) to deliver content wherever you need it. Due to this approach, a headless CMS does not care about how and where your content gets displayed. A headless CMS has only one focus: storing and delivering structured content.

Headless CMS is something everyone needs to know about now as the world of headless CMS development has gained quite a bit of momentum in the last few years.

At this point, You might start asking yourself - Do I need a headless CMS? The truth is that no one is in the right position to help you answer this question except yourself. The very simple answer is - making use of a headless CMS depends completely on your requirements.

image

Some Popular Headless CMSes

After going through what Headless CMS is all about, you might want to try it out or even want to know some of these platforms.

And lots more you can find here.

Summary

There are two major benefits of making use of a Headless CMS.

  • It allows Flexibility by serving content through an API to websites, mobile apps, or even billboards.
  • It encourages Creativity by Providing frontend developers the creative freedom to decide what frontend web framework to use for displaying content thereby taking out the limitation of dealing with ugly templates or bulky plugins offering limited features.

In my next article, I will do a little comparison on the top 5, explaining their services and also drop links on how to get started with them.

Top comments (4)

Collapse
 
ashishk1331 profile image
Ashish Khare😎

A great lift off for headless CMS, yet I need to navigate on my own from here to search all pieces of this puzzle. I thought it was a very complex system for websites that senior people use, instead it is just Google Drive where you can access stored data via simple api calls. Thanks writing this post.

Collapse
 
olawanle_joel profile image
Joel Olawanle

Wao, I love the bold part😁. I recently started working with Headless CMS and it's been awesome.

I would definitely write more and share my experience.

Collapse
 
ashishk1331 profile image
Ashish Khare😎 • Edited

Sure, go on and let there be no reason stop you. Keep up the good work.

Thread Thread
 
olawanle_joel profile image
Joel Olawanle

Thanks a lot!