Autoplay
Autocomplete
Speed
Previous Lecture
Complete and Continue
Gatsby JS, Contentful & Gatsby Cloud (Gatsby JS V3 2021)
Introduction
Important: Read this before you begin this course
Introduction & project demo (6:46)
Overview of Gatsby (3:21)
Setting up Contentful
Adding data to contentful (part 1) (5:45)
Adding data to contentful (part 2) (8:10)
Setting up Gatsby
Creating the gatsby starter project (5:34)
Overview of a Gatsby project (8:36)
Building out Gatsby pages
Create pages using the File System Route API (8:47)
Querying and rendering page data (7:12)
Building the Header and Menu
Creating the Menu Items (10:01)
Creating the Menu (5:04)
Rendering the menu data in Gatsby (7:05)
Creating the Header component (7:56)
Creating the Menu component & display logic (9:31)
Finishing the Menu component (4:19)
Working with Rich Text
Rendering rich text from contentful in Gatsby (5:37)
Creating the Hero in contentful and embedding it in Rich Text (5:00)
Rendering the Hero component in Gatsby (part 1) (11:58)
Rendering the Hero component in Gatsby (part 2) (10:44)
Creating the Pricing blocks in contentful and embed in Rich Text (6:41)
Rendering the Pricing component in Gatsby (8:14)
Finish styling the Price Options (6:16)
Rendering an embedded image (8:19)
Creating a paginated blog
Create the main blog page in contentful (7:44)
Create the blog posts in contentful (3:14)
Render the blog posts in Gatsby using gatsby-node.js (part 1) (7:54)
Render the blog posts in Gatsby using gatsby-node.js (part 2) (9:01)
Implementing the Blog pages (7:58)
Creating the blog and pagination component (10:32)
Implement styling for active page
Finishing touches
Implement a contact form with formspree (6:30)
Adding SEO to our pages (2:31)
Deploy to Gatsby cloud
Set up and deploy to Gatsby cloud (3:38)
Overview of a Gatsby project
Lecture content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock