Development
Web Development
Gatsby.js
Gatsby JS: Build PWA Blog With GraphQL And React + WordPress
4.5 (162 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
8,309 students enrolled

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
4.5 (162 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
8,309 students enrolled
Created by Rangel Stoilov
Last updated 4/2020
English
English [Auto]
Preview this course
Gatsby JS: Build PWA Blog With GraphQL And React + WordPress
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 4 hours on-demand video
  • 2 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll 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
Course content
Expand all 43 lectures 03:50:03
+ – Environment Settings And First Steps
2 lectures 07:00

In this lecture we will setup our environment and we will install gatsby on our machine. We will also create our first gatsby project

Gatsby Environment Setup And First Project
Preview 05:37

Here you will learn how to make VS Code auto-save your files in order to create a seamless development work-flow.

Setting VSCode To AutoSave
Preview 01:23
+ – Introduction To Gatsby JS
4 lectures 23:11

In this lecture we will learn about how we can use Gatsby starters for our projects so we can build upon already provided projects by the community.

Gatsby Starters
04:10

In this lecture we are going to learn how we can create pages in Gatsby.

Creating Pages in Gatsby
06:06

In this lecture we are going to learn how we can use navigation links in Gatsby and how we can use a function to navigate the user as well as the Link component.

Navigation
07:42

In this lecture we are going to learn how to create a react components in our Gatsby JS project.

Gatsby Components
Preview 05:13
+ – Advanced Concepts & CSS Styles
7 lectures 53:36

In this lecture we are going to learn about how we can use global CSS and module CSS in our components.

CSS Global Styles And Module CSS
06:40

In this lecture we are going to learn about react components and how we can use them in our project.

React-Bootsrap Components
11:32

In this lecture we are going to learn how we can create blog post to our posts.

Add Posts to our Homepage
04:59

In this lecture we are going to do some changes to our gatsbyjs components

Some Changes to Components
09:52

In this lecture we are going fix some issues on our blog

Fixing NavLinks And Footer When Multiple Posts
03:41

In this lecture we are going to add an about us page and a contact us page

Adding About Us Page & Contact Us Page
07:50

In this lecture we are going to learn how we can use layouts for our gatsby js projects

Using Layouts in Gatsby
09:02
+ – GraphQL & Markdown Remark Plugin As Source
11 lectures 57:06

In this lecture we are going to introduce how we can use GraphQL

GraphQL Introduction
04:53

In this lecture we are going to learn how to install Gatsby plugins

Adding Source Plugins
06:13

In this lecture we are going to talk about markdown remark in Gatsby JS

Markdown Transformer Remark Plugin
07:48

In this lecture we are going to learn how to use GraphQL in our gatsby components

GraphQL in Component
05:19

In this lecture we are going to map our posts that we receive from GraphQL and we are going to render them

Mapping GraphQL Posts And Rendering
04:37

In this lecture we are going to create slugs for our blog posts

Creating Slugs For Our Posts
07:33

In this lecture we are going to learn how to save our slugs in our graphql node

Saving Slugs In Nodes
03:07

In this lecture we are going to iterate through our graphql query and print the results

Iteration Through Our Query
03:12

In this lecture we are going to create our BlogpostLayout template and we are going to resolve it in our gatsby-node.js file

Template Creation And Resolving
05:00

In this lecture we are going to render our articles using the layout that we have created and the markdown files

Rendering Articles
06:59

In this lecture we are going to fix our Read More links in our gatsby js blog

Fixing ReadMore Links And Logo Homepage
02:25
+ – WordPress Headless CMS & Gatsby
4 lectures 15:23
Wordpress Sourse: IMPORTANT UPDATE!
00:21

In this lecture we are going to learn how we can use wordpress plugin in gatsby

WordPress Source
Preview 05:05

In this lecture we are going to list our blog post on our home page

WordPress Blog Posts Listings
04:33

In this lecture we are going to render each and every post to a separate page

WordPress Single Post Rendering
05:24
+ – SEO Optimizations
6 lectures 37:22

In this lecture we are going to learn about metatags and how they affect SEO

SEO and Metatags
02:29

In this lecture we are going to learn how to install react helmet so we can add metatags

Installing React Helmet
07:04

In this lecture we are going to learn about siteMetadata that we can add to our gatsby-config.js file and how we can use it

Site Metadata (SEO)
03:11

In this lecture we are going to create and SEO component that we are going to use later on in our layouts

Building SEO Component
08:37

In this lecture we are going to finish our SEO component

SEO Component Finish
05:16

In this lecture we are going to add our SEO component in our layouts

SEO in Layouts
10:45
+ – Deploying Project & Optimizing Lighthouse Score
6 lectures 26:06

In this lecture we are going to learn how we can deploy our project with Netlify and GitHub

Deploy with Netlify & GitHub
07:20

In this lecture we are going to audit our website with the industry standard Lighthouse auditing tool from Google

Lighthouse Audit
Preview 03:16

In this lecture we are going to create a webhook that will tricker a Netlify rebuild when we push a new version of our app to GitHub

Github-Netlify Webhook Settings
02:07

In this lecture we are going to optimize our accessibility score that was low in the audit

Optimize Accessibility Score
03:08

In this lecture we are going to continue improving our score so we can make it perfect

Optimize Accessibility Score V2
06:59

In this lecture we are going to check our perfect score and we are going to fix the excerpts for our posts that are not showing

Perfect Score And FIX of Excerpts
Preview 03:16
+ – Progressive Web App (PWA) & WordPress Webhooks
2 lectures 09:52

In this lecture we are going to make our website a progressive web application (PWA)

(PWA) Progressive Web App Configuration
05:50

In this lecture we are going to create a webhook so whenever we create/edit or delete a post on our WordPress website, our application will be rebuilt automatically from Netlify

WordPress Webhooks
04:02
Requirements
  • Knowledge in ReactJS
  • Knowledge in JavasScript ES6
Description

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

Who this course is for:
  • Beginner React JS Developers Who Want To Create FAST, SEO Optimized, Static Websites With Gatsby JS
Featured review
Slavoljub Popovic
Slavoljub Popovic ( 101 courses, 70 reviews )
9 months ago
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