Let's create headless blog using Garchi CMS

When creating a full-stack app, having a robust backend could be challenging. As a developer, what if there are easy solutions for the backend side of things so that we can focus more on the core logic? Or how about having a system where you can start with minimum resources and scale up without any problem? Or what if you could have to write a minimal backend so that you can focus more on platform-specific app UI? Thanks to Headless CMS which helps us to answer almost all the previous questions.

In this article, I would like to introduce to you one such powerful headless CMS that we have built in-house, Garchi CMS.

I want to show you how we can put up our backend for our blog and use Garchi APIs to render the content on the website made with any tech stack (Vue, Next, Svelte, Angular, React, etc.). The good thing about Garchi APIs is they are simple to use REST APIs so they can fit with any front-end tech stack. 

Right, to begin with, we will need to sign up for Garchi CMS. There is a free tier where you get 1k API requests per month for free but you can always upgrade to a paid plan based on your usage.

Once the sign-up is completed (along with email verification for email password sign-up), we should see a dashboard as below.

The CMS is a multivendor headless CMS focused on e-commerce applications. However, it is flexible enough to be used for similar applications like blogging, music app, e-learning platform, event booking, and much more.

By default, we sign up as an owner/admin and then we can add sellers who could be considered as our team members. The only difference is, only the admin can manage API keys and other primary settings.

Perfect, now next we need to replicate our admin account as a Seller account. This will allow the admin to have the seller role power of creating categories and items. Each category could be considered a primary category. I will touch on this later and I will also explain why I am using the word primary category.

So let's replicate our admin account by going to Settings -> Replicate as seller account.

As soon as you hit the button, you should see a message in green text. This contains your password. Make sure to note this down as you will need it to log in to your seller account. The good thing is that to add a blog article (item) and the primary category, we can have it added through the admin account by selecting the correct seller (member) from the drop-down. So let's add the category first by going to Seller -> Manage Categories.

Select the seller from the dropdown and add the Category named blog.

We can create multiple categories and have them attached to our article.

Let's head over to Seller -> Manage Items -> Select Seller from the dropdown.

Click on Add New Item and let's add an article. We could also leverage Chat GPT as Garchi CMS uses Chat GPT API to create content for the item. We can do so by clicking on Show prompt input under Item Detailed Description

You will see most of the fields are more suited for an e-commerce product which is fine. We can leave them blank and whatever is mandatory like the price we will put 0 there.

Next, click on Save Draft and you should see the draft of our article in the table list.

Now we will add extra data to the blog by clicking on "Add extra details". Here, we add the key-value pairs, and whatever key we use will be referred to in the front-end code as it is. The downside here is that as these are custom values, we need to make sure that we add them with consistency. For example, when we add another article on web development, we need to make sure the key and value are the same as for that specific category. We cannot have different keys like "published-date" instead of "published_date".

If we have different writers/authors we can add their details in the extra details by creating keys like author and so on. Don't forget to hit the Save button on every key, type, or value you add/change.

Our article is almost ready. To have it accessible over API hit the Set as published text and the red dot next to the article should turn green.

We can also set the feature image by clicking on the image icon (second from the left) under the actions column for that article.

We can add up to 4 images by clicking on any of the 4 tiles. Note that the first tile is a primary image while the other three are secondary images. Once we add the image, we need to click Save.

That's all for now, if you would like to see how we would complete this blog website using Nuxt 3 then definitely check out our new course here.