Gatsby JS & Prismic: Build RAPID Gatsby sites [Gatsby.js v4]

Gatsby JS & Prismic. Use Prismic headless CMS data in Gatsby to generate Gatsby.js static sites & deploy to Gatsby cloud

4.70 (109 reviews)
Udemy
platform
English
language
Web Development
category
instructor
Gatsby JS & Prismic: Build RAPID Gatsby sites [Gatsby.js v4]
606
students
3 hours
content
Mar 2024
last update
$59.99
regular price

What you will learn

Increase your value and improve your knowledge as a front-end / React JS developer

Learn Gatsby

Create a static, server-compiled, content-driven website using Gatsby JS (with React JS & GraphQL)

Learn how to use GraphQL and GraphiQL in Gatsby to query data stored in Prismic CMS

Deploy your Gatsby JS static website and rebuild whenever our Prismic content changes using Netlify

Use Netlify forms from within Gatsby to capture user's email address and personal details

Description

Do you want to improve your React JS skills and increase your value as a front-end developer?

- "Gatsby lets you build blazing fast sites with your data, whatever the source. Liberate your sites from legacy CMSs and fly into the future."

In this course we'll be building a Gatsby site from a Prismic CMS data source!

Level-up your React skillset by learning Gatsby.js with a Prismic CMS backend! Gatsby JS uses React JS and GraphQL to generate and build static pages from a given dataset. This course will look at setting up Prismic as a headless CMS while using GatsbyJS to generate a blazing-fast server-rendered React website from Prismic data, such as pages, menus, media, (and more!) using GraphQL to query that data.

We'll be creating a landing page website in this course, looking at initial setup and development of Gatsby JS and Prismic locally, creating React components in Gatsby based on Prismic data, and querying Prismic data with GraphQL to automatically generate our static pages.

No landing page is complete without a contact form so we'll be creating a dynamic contact page in Gatsby where we can update our form fields within Prismic and use formspree to capture our user's email address and various other details.

We'll look at how we can query Prismic data with GraphQL using the GraphiQL browser tool. Once we're familiar and comfortable developing with GatsbyJS and Prismic, we'll progress onto setting up and deploying a live website using Gatsby cloud that re-builds our static web pages every time we update content in our Prismic backend.

It's recommended you have rudimentary knowledge of React. We'll be covering everything else from Gatsby.js, Prismic, GraphQL, and styled-components!

Speed past the competition with Gatsby!

Gatsby.js builds the fastest possible website. Instead of waiting to generate pages when requested, Gatsby pre-builds pages and lifts them into a global cloud of servers (we'll be using Gatsby cloud for this) - ready to be delivered instantly to your users wherever they are.

Some advantages of using Gatsby include:

  • No waiting for API responses

  • No waiting to render components based on requested data

  • No loading spinners!

  • No waiting for a server to compile a page to serve to the browser - these pages are already pre-compiled with Gatsby and ready to serve instantly to your users!

We certainly cover a lot in this Gatsby course!

Content

Introduction

Introduction - overview of the Gatsby JS + Prismic course
Gatsby overview and project setup
Prismic setup and overview
Querying Prismic data in Gatsby using GraphiQL & GraphQL
Overview of GraphQL

Creating our pages data with Prismic & rendering with Gatsby

Generating pages from Prismic data in Gatsby
Page queries in Gatsby
Rendering Prismic HTML content correctly in Gatsby

Layout & navigation

Page layout and adding navigation to Prismic
Styling in Gatsby with React Styled Components
Querying the navigation menu data from Gatsby
Styling the header with styled components
Adding the branding to the header in Gatsby

Building the homepage in Gatsby & Prismic

Slice zones in prismic + creating the homepage
Rendering the hero custom slice in Gatsby / React
Adding background image to hero + styling in Gatsby with React styled components
Add call to action grid custom slice in Prismic
Rendering + styling call to action grid in Gatsby using React styled components
Finishing the styling of the call to action grid
Add the price list custom slice in Prismic
Rendering and styling the price list in Gatsby
Finishing the styling of the price list in Gatsby

Adding contact page in Gatsby & Prismic

Adding the contact page data to prismic
Rendering the contact page in Gatsby
Refactoring RichText component to render Gatsby Link components
Rendering new RichText with internal Gatsby links on the contact page

Adding custom slices to pages

Saving custom slices to the slice library
Adding more content to the pages & updating styles

Deploy Gatsby site to production / live site

Deploy Gatsby site using Netlify
Testing out Netlify forms
Auto-rebuild our Gatsby site any time Prismic data changes (Netlify hooks)

Bonus / resources / github link

Github link
BONUS

Reviews

Kamal
December 26, 2021
This course has not been updated. I tried to fix it because I wanted to learn, but I gave up after a few hours. Now I am learning with Prismic official documentation. Shame I can not get my money back.
Tom
October 9, 2021
I was still very new to React and didn't know how closely related Gatsby and React were to one another and I still found this class easy to follow. You can do some really great things with Gatsby and Prismic I'm really happy to have taken this course.
Brian
February 27, 2021
I think this course needs to be updated. The instructions didn't work for me, possibly because of an out-dated plugin. (https://prismic.io/docs/technologies/prismic-gatsby-source-graphql-plugin) My rating is low because of this; if it was up-to-date, I would give it a good rating.
Cole
February 23, 2021
Outdated. This course heavily relies on an old plugin (gatsby-source-prismic-graphql) that doesn't work with the latest version of gatsby. It does cover some useful information in regards to site building in prismic that is still applicable though. The presenter is also very easy to understand.
Bryan
January 31, 2021
Great for getting up and running Gatsby / Prismic quickly if you already have some experience with React. Moves very quickly, I had video at .75 speed. Not necessarily a bad thing if you want to get up and running asap.
Jesse
November 22, 2020
This was a great introduction to Gatsby, Prismic, and Netlify. Following Tom's process was very smooth. This course assumes some knowledge of Gatsby already, as he doesn't go into too many details, but the course was so easy to get through and I feel like I understood the material that was covered. It's definitely inspired me to checkout his other courses, so if you want to learn this stack of technologies, I would highly recommend this course!
Marketa
July 10, 2020
It is a very good course on how to integrate Prismic with GatsbyJS and query data with Graphql. Well explained and informative. Exactly what I expected, a nice introduction to be able to dive into this topic and continue building my project.
Juanma
July 8, 2020
Nice tutorial/course to get principles of Gastby and Prismic. I had problems with deploy on Netlify but it wasnt a course bug.
Michael
May 23, 2020
I feel like I'm chasing the instructor's commands, rather than learning concepts. "Click here", "go here"... "type this"... The author is not providing enough overview and explanation of how Prismic works as a system... the best way to organize/structure content, etc. It would be nice if the author would provide a Prismic primer set of videos that go through the whole Prismic application before starting to develop with it. Bring us in. Show us around. Explain what things do. Then, later, get to how it ties in with Gatsby. That criticism aside, the course is a nice introduction to how Prismic can be integrated with Gatsby, which I anticipate will be a very popular combination in the future.
Gabriel
May 13, 2020
The content is clear and focused. The main focus of this course is on the Prismic and its integration in Gatsby. If You are new to Prismic and You consider to find and use a headless CMS in Gatsby, check out this course. The integration does use the Prismic's GraphQL API (not the REST API). The course is not about Gatsby. You can follow without Gatsby knowledge, but You will not learn the essentials of Gatsby. For example images are not optimized through gatsby-image in this course (gatsby-image is not mentioned at all). This is all right however as the main focus is on Prismic and not on Gatsby. Check out a different course, if You want to learn Gatsby. A good one is Tom's another course "Gatsby JS & Firebase: HYBRID Gatsby realtime + static sites".
Dick
May 2, 2020
Instructor clearly knows what he's doing and if you follow very closely you can replicate his results, but he explains absolutely nothing and doesn't actually teach a single thing - this is more or less just a walkthrough.
Luke
April 28, 2020
Good course! Quite short but delivers exactly what it said it would, no fluff. Maybe showing an example on how this could be used to build different sites/themes would be good. Sometimes hard (for me) to keep up as they talk very fast.
中原賢一
April 12, 2020
Thank you for amazing course. Prismic is not famous in Japan but I grab how to use it. To the people who have interested in this course: This course requires fundamental of react. If you are not familiar with that, I recommend to study react first. I wil build my own blog by Gatsby with Prismic.
Leon
April 3, 2020
It's been honestly super helpful and as someone who just started to learn some code I was able to create the website I wanted with Gatsby and Prismic.
Kahil
March 28, 2020
Great little course, would hope there's a followup coming that dives deeper into some of the nitty-gritty of this stack.

Coupons

DateDiscountStatus
2/20/202050% OFF
expired
8/24/202050% OFF
expired
9/23/202050% OFF
expired
9/29/202050% OFF
expired
10/21/202050% OFF
expired

Charts

Price

Gatsby JS & Prismic: Build RAPID Gatsby sites [Gatsby.js v4] - Price chart

Rating

Gatsby JS & Prismic: Build RAPID Gatsby sites [Gatsby.js v4] - Ratings chart

Enrollment distribution

Gatsby JS & Prismic: Build RAPID Gatsby sites [Gatsby.js v4] - Distribution chart

Related Topics

2682224
udemy ID
12/1/2019
course created date
2/20/2020
course indexed date
Bot
course submited by