1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Model Content in the Contentful Web App

    Khaled GarbayaKhaled Garbaya
    javascriptJavaScript

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.