Building Blog with Nuxt 2 and Contentrain Headless CMS
Tags: nuxt, blog, cms, javascript
Published: 2022-06-13 06:00:52

When I first heard about [Contentrain](https://contentrain.io/) I was a bit sceptical. At this time I already had experiences with several Content Management Systems like Storyblok, Contentful, and Contentstack, so wasn't particularly sure how Contentrain will differ from them. Basically, what will make me wanna use Contentrain instead of these already known solutions. 

I thought it will be just another tool that offers exactly same functionality.

![Thorin-Bilbo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4fa92pud8rs3zt9k53m.png)

My experience with Contentrain was really, really good. It was so great that I decided to write an article about it 🚀

## Contentrain Dashboard

The first step when you create a new account in Contentrain will be this nice looking dashboard with a short tutorial on what you can do with Contentrain

![Contentrain Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5uouhiogesxlcebeoywo.png)

The first step we will do, we will create a new project. Projects are like a main entitites in Contentrain.

![Contentrain Projects](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibgiknizpb9w5li1bii5.png)

We will click `Start new project` button and choose both `GitHub` and `Nuxt.js`. It will allow us to connect our GitHub account that will be used to create repository and publish changes to it. Second step, we have selected a Nuxt.js blog template.

![Contentrain Create Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w19ptbt09wevlnrone7l.png)

GitHub will ask you for permissions. Make sure to authorize Contentrain.

![GitHub Permissions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4qyv283r78y6rf9p2wji.png)

## Configuration

The first step would be to configure GitHub and the storage.

![Contentrain configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/euyjaib43jvh6cyyq8ow.png)

When you click GitHub settings it will ask you for authorizing access to all repositories. Make sure to click Install & Authorize. This will allow us to move to the second step.

![Github Permissions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yqt5r6gxkm2mqjgj98w.png)

The second step here is to define roles. We will skip it for now as the current roles will suit us well.

![Contentrain Roles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vu36evv5onzagj7xikxg.png)

The third and final step is to create content. In here you can add new content in JSON format that will be then used in your application.

![Contentrain content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zw6z7wy1aletgco1ev36.png)

## Contentrain Project Dashboard

After we have successfuly created a new project it can be accessed in our dashboard.

![Contenrain Project Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yy1un06kzbik7oz3y2i8.png)

From here, you can easily modify content to meet your needs best.

![Modifying content in Contenrain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgse9k31qpym1h672gen.png)

## Code

Contentrain generated a new repository for us with a Nuxt Blog template.

![Nuxt template repo from Contentrain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxfw3uwghd2wwam0jsvh.png)

We can then deploy this blog template to our favourite hosting provider. In my case, it will be Vercel.

![Vercel configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogzdi8t5y82w99b0pwzh.png)

As a result, we will have the following application hosted on the Vercel cloud.

![Nuxt Contentrain on Vercel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfqotpga6qmrym2rkde1.png)

## Changing content

It is not only about displaying content. We can also modify it in Contentrain.

Lets modify the value of the Hero component.

![Contenrain modify content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmdyil64froayoexoakc.png)

After this change, what will happen is it will automatically push a new value to our code repository (updated JSON file).

Thanks to the fact, that I have connected my repository to Vercel, all pushed code to the master branch will automatically trigger a redeploy.

We can observe the new content in our deployed application.

![Nuxt Contentrain on Vercel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/erwltq2lqlkdor4d1ou1.png)

## Summary

Well done! You have just created a simple Nuxt 2 Blog with Contentrain. Thanks to the hosting on Vercel, changes can be applied to the production website in a blink of an eye! Keep in mind that this is just the beginning of what Contentrain has to offer. Make sure to take it for a spin and start building!