Create headless CMS with Strapi

A content management system (CMS) is software that helps those without technical skills create, manage, and store content. It allows someone with no technical skills to build a website. A very popular example of a CMS is WordPress. It allows users to create websites with drag-drop functionalities.

A headless CMS is a subset of the CMS in which the front and back ends are separated. This allows for easier management as developers and content creators can manage the service independently. It allows hosting and delivery for a limitless number of devices from the cloud. This creates an agile workflow system with continuous updates and a well-managed project. Many software provide headless CMS options, but we will discuss Strapi in this Answer.

CMS vs headless CMS
CMS vs headless CMS

Strapi is a headless CMS for creating websites, mobile applications, and APIs. It is open-source software that allows for customizability through APIs like RESTfulRESTful API is an interface that two computer systems use to exchange information securely over the internet., GraphQLGraphQL enables declarative data fetching where a client can specify exactly what data it needs from an API., and more. Moreover, it allows hosting on the cloud or deploying on-premises. To learn more, we can visit its official website.

Setting up

Now that we have an understanding of what a headless CMS is, we can now shift our focus to creating one with the use of Strapi. We will follow the steps to set up our first Strapi headless CMS.

  1. Before starting with Strapi, we need to ensure we have Node.js installed. Also, Strapi requires Node.js >=14.19.1 <=18.x.x; therefore, we must also cater to that. For Linux, we can run the following commands; for others, we can head to the official Node.js website.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
nvm ls-remote // lists all the available versions
nvm install <version>
node --version // to check if the correct version is installed
  1. We will open our terminal and enter the command given below. Here, my-project is the name given to our headless CMS and quickstart allows for the project to select default configurations.

npx create-strapi-app my-project --quickstart
  1. Once created, our project will launch in the development mode from where we can set up our root user.

Root user setup
Root user setup
  1. Now, we can set up our Strapi service as required.

Example implementation

In the following steps, we will create a catalog for a bookstore.

  1. First, we will build using the "content-type builder" and create a collection. In our collection, we will create three fields called name, description, and release date, respectively.

Bookstore collection with its data items
Bookstore collection with its data items
  1. We will create another collection called category with a name and a many-to-many relationship with bookstore.

Category collection with its data items
Category collection with its data items
  1. Now let us create a gallery component with the fields title and pictures. We will also create a text-block with the fields called title and content.

Gallery component
1 of 2
  1. To tie it together, we will now create a single type named homepage. This will have a title and body field. The body field will have two components to create our homepage.

Homepage single type
Homepage single type
  1. Now we can enter content in our created date fields. We will navigate to the content manager and create new entries for bookstores and categories.

Bookstore entries
1 of 2

6. Finally, we add entries in the homepage single type.

Homepage entry
Homepage entry
  1. We are all done. However, we need to set the privacy role types for our entities. For that, we head to settings, then roles inside users and permissions, and change the actions to our needs.

  2. Now let us jump to the URLs given below to see our data.

http://localhost:1337/api/bookstores <- displays our bookstores data
http://localhost:1337/api/hompage <- displays our hompage data
http://localhost:1337/api/hompage?populate=Body <- displays the entire hompage with dynamic zone
Example URLs for our webpage

Conclusion

Strapi proves an easy and efficient path for non-technical users to create websites. This makes it very popular and causes more users to be able to dive into the web development process. Overall, Strapi is an excellent tool for everyone who wants to create a website, regardless of their skill level and requirements.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved