Development

손승열(Son Seungyeol)

Introducing Headless CMS

Let's see what the Headless CMS is and how it works.

손승열(Son Seungyeol)
Introducing Headless CMS

What is the Headless CMS?

First of all, Let's talk about what does the headless CMS exactly mean.
In the headless CMS, Headless represents tearing down the "head"(frontend) from the "body"(backend contents). CMS stands for Content Management System which literally means the system that manages contents.

Traditional CMS

Connection between frontend codes and contents en

In traditional CMS, It is so tight that the connection between the system that serves contents and the contents that contained by the system, it's not that easy displaying the same contents to other services such as other website or apps. Namely, the transplant of the contents was difficult.

Headless CMS

The headless CMS could be divided into few major parts. Let me explain with my Gatsby blog and DatoCMS which is the headless CMS used in my blog.

  • The frontend codes(Gatsby)

  • The contents posted on the blog(DatoCMS)

  • CMS to frontend communication method(GraphQL)

You can select the frontend framework whatever you want because the frontend codes just need to draw how to show the contents on the website. Since the contents which are posted on the blog are managed by external CMS, the contents and the frontend codes are completely separated.


How does the Headless CMS work?

Post 1 Image

Then, how do we get the contents from the CMS when we deploy the blog? Generally, as you may thought, it can be done with RESTful API or GraphQL. Posting the new content procedure progresses through the following steps.

  1. Writing new contents on the CMS

  2. Deploying the blog(npm run deploy, etc.)

  3. Getting contents from CMS while generate static web page

  4. Complete deploying static web page blog(Gatsby, Jekyll, etc.)


Convenience hidden behind a spooky word

We are not getting scared by the word "Headless" anymore unless we saw it in real life!🤣 After all, the headless CMS is a great tool for people who wants to manage something like blogs flexibly and conveniently. If you are planning to manage new blogs, make fascinating blogs with the headless CMS!

headless-cms-img2

Made with React, Gatsby and DatoCMS by @smastrom

Contribute or star on GitHub

© 2022-2023 손승열 for 🅒🅞🅝🅣🅔🅝🅣🅢

Have a nice day, everyone! 😊