Web Development


Gatsby JS: Build PWA Blog With GraphQL And React + WordPress

Create Gatsby JS Progressive Web App With GraphQL And React + WordPress & Add Jam Stack To Your Skills

3.40 (213 reviews)


4 hours


Apr 2020

Last Update
Regular Price

Exclusive  Offer
Unlimited access to 30 000 Premium SkillShare courses

What you will learn

How To Create Amazingly FAST Websites With Gatsby JS

How To Use Gatsby Starters

How To Use Global CSS & Module CSS in Gatsby JS

How To Use GraphQL

How To Use Layouts In Gatsby

How To Use Markdown Remark As A Source Of Data

How To Use WordPress To Source Data

How To SEO Optimize Your Website

How To Do A Lighthouse Website Audit And Improve Score

How To Deploy Your Website With Netlify

Howe To Do Continuous Deployment With GitHub + Netlify

How To Use Webhooks With Netlify, WordPress And GitHub


Gatsby JS is a free and open source framework based on React that helps developers build blazing fast static site generator which can create websites and apps.

But what does this even mean?

Well... it combines together the best parts of React, Webpack, React-router, GraphQL, and other front-end tools in to one and creates an amazing tool enjoyable for developers!

With Gatsby JS you can use modern web tech without the headache. Everything will be setup and will be waiting for you to start building.

One of the best things about Gatsby is that you can bring your own data from headless CMS, APIs, Databases or the file system.

There is no limit there.

You can source data even from WordPress

And this makes it very easy for clients to interact with the website that you have built for them and add new content.

They just need to update their posts on WordPress and that's it...

Also with Gatsby you will NOT build a website with last decade’s tech.

The future of the web is mobile, JavaScript and APIs—the JAMstack.

Every website is a web app and every web app is a website.

With Gatsby It is very easy to make your project a Static Progressive Web App (PWA)

You get code and data splitting out-of-the-box.

Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.

Gatsby.js builds the fastest possible website.

Instead of waiting to generate pages when requested, pre-build pages and lift them into a global cloud of servers — ready to be delivered instantly to your users wherever they are.

So if you are wondering what you will learn in this course here is the list below

In this course you will learn the following:

  • The Essentials Of Gatsby JS & How To Install It and Create First Project

  • How To Use Gatsby Starters To Create Your Project

  • How to Create Pages In Gatsby And How to Link Them Correctly

  • How To Separate Elements Into Components And How To Use Them

  • How To Create Page Layouts Which Can Be Used As Templates

  • How To Use GraphQL

  • How To Add Sourcing Plugins

  • How To Use Markdown Remark For Creating You Pages/Posts

  • How To Create A Blog Using Gatsby & Markdown Remark (JAM Stack)

  • How To Use WordPresss As Headless CMS

  • How To Add Metatags And Improve SEO Of Website

  • How To Create SEO Component And Use It In Layouts

  • How To Deploy Your Project To Netlify And Github

  • How To Make Continuous Deployment With Netlify Webhooks

  • How To Audit Your Website With The Lighthouse (Industry Standard by Google)

  • How To Create Lighthouse Perfect Score

  • How To Convert Your Website To A Progressive Web App (PWA)

  • How To Create WordPress Webhooks To Redeploy Your Project On Netlify When You Create/Update/Delete A Post

You would also be able to ask questions inside the course if you get stuck somewhere.

I will be there to help you out whenever you need.

Now, I want my students to always feel comfortable when they make a purchase, that is why I have uploaded multiple free videos for you to view at any time.

Also I offer you a 30 day money back guarantee, no questions asked!
So you have nothing to risk and everything to gain from this course!

It’s time to take action. This offer won’t last forever


Gatsby JS: Build PWA Blog With GraphQL And React + WordPress
Gatsby JS: Build PWA Blog With GraphQL And React + WordPress
Gatsby JS: Build PWA Blog With GraphQL And React + WordPress
Gatsby JS: Build PWA Blog With GraphQL And React + WordPress


Environment Settings And First Steps

Gatsby Environment Setup And First Project

Setting VSCode To AutoSave

Introduction To Gatsby JS

Gatsby Starters

Creating Pages in Gatsby


Gatsby Components

Advanced Concepts & CSS Styles

CSS Global Styles And Module CSS

React-Bootsrap Components

Add Posts to our Homepage

Some Changes to Components

Fixing NavLinks And Footer When Multiple Posts

Adding About Us Page & Contact Us Page

Using Layouts in Gatsby

GraphQL & Markdown Remark Plugin As Source

GraphQL Introduction

Adding Source Plugins

Markdown Transformer Remark Plugin

GraphQL in Component

Mapping GraphQL Posts And Rendering

Creating Slugs For Our Posts

Saving Slugs In Nodes

Iteration Through Our Query

Template Creation And Resolving

Rendering Articles

Fixing ReadMore Links And Logo Homepage

WordPress Headless CMS & Gatsby

WordPress Source

WordPress Blog Posts Listings

WordPress Single Post Rendering

SEO Optimizations

SEO and Metatags

Installing React Helmet

Site Metadata (SEO)

Building SEO Component

SEO Component Finish

SEO in Layouts

Deploying Project & Optimizing Lighthouse Score

Deploy with Netlify & GitHub

Lighthouse Audit

Github-Netlify Webhook Settings

Optimize Accessibility Score

Optimize Accessibility Score V2

Perfect Score And FIX of Excerpts

Progressive Web App (PWA) & WordPress Webhooks

(PWA) Progressive Web App Configuration

WordPress Webhooks




Marta8 October 2020

Rangel will guide you throughout the whole development process, leaving the room for self searching or code experiments, show you deployment and optimization.

Charles8 September 2020

Does not offer a thorough depth of knowledge and instruction during the process of making the project, only a follow-along that you parrot. In the graphQL section and markdown remark section there was zero explanation as to why we were using various tools or the bigger picture of what they were doing and how.

Emil16 May 2020

Ok if you want to get a quick overview of how Gatsby works. Basic info without getting into much details.

Lorena18 March 2020

Right to the point! The instructor has approached some subjects that are extremely important when building a professional blog such as SEO and optimization.

Jean4 March 2020

Very good structured material! Well explanation! Valuable information! I start the course with little basic knowledge of React and medium knowledge of WordPress, learn a lot about the key info to turn a WordPress site into JAMStack site.

Fabio7 December 2019

Rangel is very practical and direct. It's a quick course that covers most things you need to know to get started with Gatsby, GraphQL and Wordpress.

Fame1 December 2019

Half way through. Content so far has been great, each section building on the previous which has been to follow along. Where I got stuck, there were already answers from previous students so all round, a good experience so far.

Robert9 November 2019

I really enjoyed this course and even if you are n00b like me when it comes to react, graphql, etc it helped me a lot. Highly recommended :)

Dave5 November 2019

I'm a somewhat experienced React coder, but I hadn't looked at Gatsby. This is an excellent course and Gatsby is a great tool for someone to get up-and-running on development of React-based web apps.

Eugene30 October 2019

I didn't want to learn how to style components based on the Bootstrap stylesheet. I was expecting the core Gatsby features review. So far, everything is about layouts, stylings, etc.

João5 October 2019

Very good course, the author demonstrate how to set up and create an application from scratch using gatsby and wordpress, but I was expect a little bit more for example how to work with widgets using gatsby and wordpress. Thanks for share his knoledge. Great Job.

Joshua30 September 2019

Mostly, the course is very good. If you don't understand anything, just follow the teacher's guide. But I think it would be even better that more explanations for each step in Section 4: GraphQL & Markdown Remark Plugin As source.

Daniel15 September 2019

I really learned a lot from this course and went ahead to customize and add more features on my blog I created following this tutorial.

Slavoljub14 September 2019

Great Course ... if you are intermedia developer in couple hours you can learn a lot about gatsby... saves you weeks and if you are new you everything is explained well ... in short time you can start building your own apps

Sanjay19 August 2019

The course is beginner friendly. It goes very clearly into the details so that we can get a clear understanding. gatsby for only beginner.


6/23/2019100% OFFExpired
9/3/2019100% OFFExpired


Udemy ID


Course created date


Course Indexed date
Course Submitted by