Suppose you are a developer and you want to create a blogging site like DEV, Medium or a social media site like Facebook, Instagram then the most challenging part you are going to face is how are you going to code the post part where users publish the post/article. Here comes the CMS to rescue. In this blog, we will discover what a CMS is, why was it made, what is a headless CMS, examples of CMS including a simple demo on how you can use a CMS using Sanity.

What is CMS and why it was made?

In the early days of Web Development, developers faced a lot of issues in managing content which gave the rise of building CMS. CMS refers to Content Management System. It is a tool that is used to manage content which contains editing, creating, and publishing content from various authorized users. In simple words, CMS is a tool that is used to create a website without having extreme knowledge of programming, or even if you don't know programming you are good to go with CMS. Content of CMS is stored in a database. Using a CMS is very user-friendly, allows multiple users to manage the content, improves site maintenance, and much more.

How CMS is made?

CMS is made up of two applications :

1. CMA (Content Management Application)

CMA stands for Content Management Application. In simple words, CMA is the frontend of CMS. CMS gives a lot of templates that help in managing and editing the content.

2. CDA (Content Delivery Application)

CDA stands for Content Delivery Application. CDA is the backend of CMS. It helps the content to get stored in the database and also it publishes the content in the platform and helps it to reach the viewers.

Examples of CMS

WordPress

WordPress is one of the most popular CMS currently used. You can create a full working website using WordPress.

Drupal

Drupal is an open-source web CMS that is written in PHP. It acts as an open-source backend framework for CMS.

Sanity.io

Sanity is a headless CMS that is best for users for collaboration of the project. It is a very powerful platform for generating and modifying content. We will use Sanity.io to show the working of CMS later in this blog.


✏️Note: Headless CMS is a backend-only CMS where content is accessible through APIs.

Strapi

Strapi is a headless CMS that is based on node.js. It's highly customizable and self-hosted.

GraphCMS

GraphCMS is a headless CMS this is based on GraphQL API. It's highly lightweight and it provides a lot of extensions for customizing the UI (User Interface).



There are many more CMSs available the once mentioned above are some popular ones.

Using CMS through Sanity.io

In this section, we will show the simple working and setting up of CMS using Sanity.io. Sanity provides a lot of templates to demonstrate its system and workings. We will learn how to use Sanity.io CMS through following steps:

1. Open Sanity.io and click on get started.

2. There are two ways to use Sanity, you can create a new project from start and start customizing it using Sanity or you can use the templates provided by Sanity to just explore it and customize it according to your wish. I will be using templates to just show the working of Sanity. There are a lot of templates provided by Sanity. You can choose any templates of your wish. I will be using Next.js Landing Pages template. So click on the “Next.js Landing Pages” section.

3. After clicking on the “Next.js Landing Pages” section, a new page with all the next steps for the deployment of projects appears. First, you have to authenticate to use Sanity. There are three ways you can authenticate to Sanity, I will recommend you to authenticate it through GitHub as it will help you in the next step. You can revoke Sanity access anytime from GitHub. I have authenticated using Google.

4. After authentication you have to authorize Sanity to access your GitHub access. After giving the access, Sanity will create a repository in your GitHub account, and it's your choice to keep the repository public or private.

5. After the repository is created we have to give Netlify access to sanity as they will use Netlify for deploying the website.

6. After completing all the steps mentioned above, the project is ready to use. Open Sanity Studio and open the website.

7. First we will see the website we just deployed. I will be changing the section marked with a blue lining. I will be changing the background image and text.

8. Open Sanity Studio. You need to authenticate before using Sanity Studio.In simple words, Sanity Studio is a tool through which we can easily edit the content of the website and do a lot of things. Open pages and click on Frontend.

9. A sidebar appears where you can edit the different parts of the website and content as per your wish. After making changes click on publish. Wait for approx. 2 to 5 minutes to get the website updated.

10. Visit the website and you can see the changes are implemented.

Hurray 🥳, we just used the Sanity CMS to change the content of our website 🎉.


The main purpose behind this blog was to explain what a CMS is as I was also not knowing about CMS previously and this blog is my research about it as I am going to use CMS in my future projects. At last, I would like to thank you for taking the time for reading this blog. Please comment and do express your views about this blog. If you have any queries, feedback regarding this blog feels free to comment and contact me on Twitter(@HarshitAditya1). I am highly active on Twitter and I would happy to solve your queries and have a conversation with you.