Model Content in the Contentful Web App

Model Content programmatically using the contentful-migration tool 

Add Contentful as a data source for Gatsby

List data entries from Contentful in Gatsby

Programmatically create Gatsby pages from Contentful data

Render Contentful rich text in Gatsby

Use Graphql backreference to avoid circular dependencies between Content model

Deploy a Gatsby website on Netlify

Trigger Netlify Builds when content changes in Contentful

Build Content Rich Progressive Web Apps with Gatsby and Contentful

In this lesson, you will learn how to define the content blueprints for your project.

Contentful organizes content into spaces, that allows you to group all the related resources for a project together, this includes content entries, media assets, and settings for localizing content into different languages.

Each space contains 1 or more content types that define the structure of your content.

Each content type can have up to 50 fields that you define this is called [content modeling](https://www.contentful.com/developers/docs/concepts/data-model/).

https://app.egghead.io/api/v1/lessons/javascript-model-content-in-the-contentful-web-app/subtitles

Instructor: [00:00] After login to Contentful, first thing we need to do is create a space. This will hold all our content. We can pick one of the free spaces that we have, and we can name this JAMstack tutorials, because we're building a website about JAMstack tutorials.

[00:18] For our website, we need a lesson, and every lesson is assigned to an instructor. We can define the structure of that website simply by start creating content types. The first one is lesson, and for lesson, we need a title. This will be type text.

[00:46] We'll need a slug field. This will help us define human-readable URLs, and it will be autogenerated from the title automatically. We can configure it, and we tell Contentful, "Hey, this is a slug field." Now, we hit save.

[01:04] After that, we need field of type rich text. This will be the body of the lesson, so this is the content of the lesson. We said we want to assign a lesson to an instructor. We need to create a field of type reference, and we call it instructor.

[01:25] This will link to a different content type that we will define later. A lesson also should have an image, so we can pick a media field, and we can call this image. We only need one file, but we can list many files.

[01:43] For some search engine optimizations, we can actually link another content type that will define just the metadata that we want to show to Google, meaning we will put them in the header of the HTML. Let's add that field. It will be another reference, and we can call it simply SEO.

[02:03] We hit create and save. Our first content type is done. Now, we need to create the instructor content type. Our instructors will have full names. It will be short text. Also, we want to have an instructor page, so we can use again a slug field to define human-readable URLs.

[02:38] This will be called slug, and we configure it to be a slug field. Instructor has bio field, so we know something about them. Also, the instructor can have a website. We can configure this to be a URL field. Also, for Twitter, we will do the same.

[03:13] Why not linking the GitHub account also? Finally, we want to see the face of our instructor, so we can actually have an avatar for that. We save. We go back to the content type list, and we'll add our last content type. This will be called SEO.

[03:44] For SEO, we can have the first field as title. We can have also some description, and lastly, a few words. They will all be of type text. We save, we'll go back to our content type list. We need to change the lesson content type, so to make sure our editors always link instructors and not any other content type.

[04:23] For example, we can go to settings and validation, and we tell it only accept instructors. We can do the same for SEO, and we only accept SEO content types. We hit save.

Model Content in the Contentful Web App

Share this video with your friends

Course

Build Content Rich Progressive Web Apps with Gatsby and Contentful