Alt Text

Welcome to part-14 of the series.

As told in the earlier post, this series is based on the learning from this awesome udemy course by John Smilga

In this part we will start my creating a new Content Model, for blog in our site. So, head over to the Contentful dashboard and click on Add content type in Content model.

ContentfulContentful

In the pop-up window give a Name and Description and click on Create.

Create content typeCreate content type

In the next screen, after you click on Add field you will get below pop-up. Click on Text in this window.

Add new fieldAdd new field

In the next window give a Name and then click on Create and configure

titletitle

In the next window first click on Validations tab. After that click on the checkbox Required field and then Save button.

RequiredRequired

We will follow exactly same process to create a slug field.

slugslug

Next, we will add a Date and time field.

DateDate

Give this field a Name and click on Create and configure. You need to follow the same process as title filed to make it required field.

publishedpublished

Next, we will create a description field. It will be Text field, but a Long text, full-text search. As usual create it a required field.

descriptiondescription

Also, create an author filed. But don’t make it required by clicking on Create.

authorauthor

After this click on Save at the top right corner to save this Content Model.

post content modelpost content model

Next, let’s add some data into the Content Model. First goto the Content tab and then click on Add entry. After that click on post.

postpost

Now, for the post i am taking real blogs from medium. We will put it in the description field, but it takes mark down file. So, we can convert the medium post to markdown by this awesome npm package.

ContentContent

I have added four original blogs till now from medium.com. Will add more later as i am also planning to visit Hampi soon.

Hippy Hampi blogsHippy Hampi blogs

One thing which i forgot to add in the Content model is an image field. So, i will head over to the Content model — post and add an Media field.

Media fieldMedia field

Give it a name image and then click on Create and configure to make it a required field.

NameName

Next, save it by clicking on Save button.

SaveSave

I have also added the required image in all posts. After that too get access to these new post, we need to restart the server. So, go ahead and stop gatsby develop from terminal and re-run it.

Also, refresh the graphql in browser and write the below query to display all posts.

Our queryOur query

This completes part-14 of the series.

This post is also available on DEV.