Udemy

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

Enroll Now
  • 626 Students
  • Updated 11/2025
4.4
(112 Ratings)
CTgoodjobs selects quality courses to enhance professionals' competitiveness. By purchasing courses through links on our site, we may receive an affiliate commission.

Course Information

Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
2 Hour(s) 45 Minute(s)
Language
English
Taught by
Tom Phillips, WebDevEducation (Tom Phillips)
Rating
4.4
(112 Ratings)

Course Overview

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

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!

Course Content

  • 7 section(s)
  • 26 lecture(s)
  • Section 1 Introduction & Setup
  • Section 2 Page generation and rich text
  • Section 3 Navigation
  • Section 4 Prismic slices
  • Section 5 Contact page and form
  • Section 6 Finishing touches
  • Section 7 Deploy Gatsby site to production / live site

What You’ll 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

Reviews

  • B
    Bryan Robertson
    4.5

    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.

  • J
    Jesse Brewer
    5.0

    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!

  • 葉子 岩崎
    4.0

    Sometimes I really need to view the whole of the codes when I get stuck, but it's hard. Except for this, so far, this lecture is well organised and easy to follow. Thrilled to get to know new technology to apply my project. Thank you.

  • N
    Nigel O'Neill
    4.5

    Well presented with every step shown and explanations of every step provided. Suitable for a beginner to follow and gain an understanding of how Prismic and Gatsby work together.

Start FollowingSee all

We use cookies to enhance your experience on our website. Please read and confirm your agreement to our Privacy Policy and Terms and Conditions before continue to browse our website.

Read and Agreed