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.
Strapi is a headless CMS for creating websites, mobile applications, and APIs. It is open-source software that allows for customizability through APIs like
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.
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 | bashnvm ls-remote // lists all the available versionsnvm install <version>node --version // to check if the correct version is installed
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
Once created, our project will launch in the development mode from where we can set up our root user.
Now, we can set up our Strapi service as required.
In the following steps, we will create a catalog for a bookstore.
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.
We will create another collection called category with a name and a many-to-many relationship with bookstore.
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.
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.
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.
6. Finally, we add entries in the homepage single type.
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.
Now let us jump to the URLs given below to see our data.
http://localhost:1337/api/bookstores <- displays our bookstores datahttp://localhost:1337/api/hompage <- displays our hompage datahttp://localhost:1337/api/hompage?populate=Body <- displays the entire hompage with dynamic zone
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