Model Content in the Contentful Web App

Khaled Garbaya
InstructorKhaled Garbaya
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

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.

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.

egghead
egghead
~ 27 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today