Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

The JAMstack, short for “JavaScript, APIs, and Markup,” has been making waves in the world of web development. 

Building JAMstack applications removes the hassle of building out a backend from scratch, freeing you to focus on what really matters: your content.

In this course, you’ll learn how to build and deploy your own static Gatsby site that pulls external data from Contentful and then deploys to the web with Netlify. After the course, you’ll have all the knowledge you need to build a blog, marketing site, or portfolio with Gatsby. Just add content.


Check out these [**community notes for this course on Github**](https://github.com/eggheadio-projects/build-content-rich-progressive-web-apps-with-gatsby-and-contentful-notes).

Aleksander Ageev

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/).

javascript

Model Content in the Contentful Web App

build-content-rich-progressive-web-apps-with-gatsby-and-contentful-resources-sketchnote

Sketch Notes

build-content-rich-progressive-web-apps-with-gatsby-and-contentful-resources-package

Download All

build-content-rich-progressive-web-apps-with-gatsby-and-contentful-resources-transcript

Enhanced Transcript

In this lesson, you will learn how to model content programmatically using the contentful-migration tool.

Content modeling is hard and nobody can get it right the first time. You have to model your content at a time where you have the least (real) experience, at the start of your project. Your choices will haunt you for the rest of your product lifecycle in the case of the incumbents - with Contentful migration tool you could potentially start anywhere with your content model, then refine it as you learn what you truly need.

## Prerequisite

You need to have the `contentful-cli` installed

```
npm install -g contentful-cli
```
and then login 

```
contentful login
```
 and follow the steps to get you setup

Model Content programmatically using the contentful-migration tool 

In this lesson, you will learn how to set up your Gatsby project to use Contentful as a data source using the `gatsby-source-contentful` plugin.

Add Contentful as a data source for Gatsby

In this lesson, you will learn how to get a list of entries from Contentful and render it in a Gatsby website

List data entries from Contentful in Gatsby

In this lesson, you will learn how to create pages dynamically in Gatsby based on data coming from Contentful

Programmatically create Gatsby pages from Contentful data

In this lesson, you will learn how to render Contentful Rich text in your Gatsby website as well as customizing styling for every node types like Heading and embedded assets.

## What is Contentful rich text?

Rich text is a new JSON format for handling complex content structures in a strongly typed manner. It is represented by the rich text field in Contentful.

## Rendering The rich text

Contentful offers many tools to help you work with our [Rich Text](https://www.contentful.com/developers/docs/concepts/rich-text/) feature. This guide is meant to help put the pieces together and provide resources for learning more. It focuses majorly on Contentful’s [SDK](https://github.com/contentful/contentful.js) , [rich-text-html-renderer](https://github.com/contentful/rich-text/tree/master/packages/rich-text-html-renderer) , and [rich-text-react-renderer](https://github.com/contentful/rich-text/tree/master/packages/rich-text-react-renderer) to render your Rich Text fields with HTML.




Render Contentful rich text in Gatsby

In this lesson, you will learn how to use the Graphql backreferences created by Gatsby to get more data from a parent content type.

In this example, we have a lesson that references an instructor but the instructor content type does not have any data about the lessons that are assigned to it. Usually, you would create a reference back in the instructor content type to the lesson but this can cause a circular reference that's hard to maintain. 
Fortunately in the Gatsby data layer, GraphQL, we can query the parent node to get its data from its child. That's called backreference. 

Use Graphql backreference to avoid circular dependencies between Content model

In this lesson, you will learn how to push your website code to Github and Build and deploy it using Netlify

Deploy a Gatsby website on Netlify

Netlify will automatically build your Gatsby website whenever you push new code to your repository but what about content changes in Contentful. In this lesson, you will learn how to use Contentful webhook feature to trigger a Netlify build whenever you publish or delete new content on Contentful

Build Content Rich Progressive Web Apps with Gatsby and Contentful

Khaled Garbaya

What you'll learn:

Prerequisites:

Credits

Course Content