Gatsby JS: Build PWA Blog with GraphQL, React and WordPress

Video description

Create a Gatsby.js Progressive Web App with GraphQL, React, and WordPress and add JAMstack to your skills

About This Video

The author demonstrates how to set up and create an application from scratch using Gatsby and WordPress.
Gatsby.js builds the fastest possible website.

In Detail

Gatsby JS is a free and open source framework based on React that helps developers build blazingly fast, static site generators which can …

Gatsby JS: Build PWA Blog with GraphQL, React and WordPress

Video description

Create a Gatsby.js Progressive Web App with GraphQL, React, and WordPress and add JAMstack to your skills

About This Video

The author demonstrates how to set up and create an application from scratch using Gatsby and WordPress.
Gatsby.js builds the fastest possible website.

In Detail

Gatsby JS is a free and open source framework based on React that helps developers build blazingly fast, static site generators which can create websites and apps. But what does this mean? Well, it combines the best parts of React, Webpack, React-router, GraphQL, and other front-end tools and creates one amazing tool that developers can enjoy using! With Gatsby.js, you can use modern web tech without the headaches. Everything will be set up, waiting for you to start building.

One of the best things about Gatsby is that you can bring in your own data from headless CMS, APIs, databases, or file systems. There is no limit. You can even source data from WordPress and this makes it very easy for clients to interact with the website you've 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.

Publisher resources

Download Example Code

Chapter 1 : Environment Settings and First Steps

Introduction 00:01:48

Gatsby Environment Setup and First Project 00:05:37

Setting VSCode To AutoSave 00:01:23

Chapter 2 : Introduction to Gatsby JS

Gatsby Starters 00:04:11

Creating Pages in Gatsby 00:06:06

Navigation 00:07:42

Gatsby Components 00:05:14

Chapter 3 : Advanced Concepts & CSS Styles

CSS Global Styles and Module CSS 00:06:41

React-Bootstrap Components 00:11:32

Add Posts to our Homepage 00:04:59

Some Changes to Components 00:09:52

Fixing NavLinks And Footer When Multiple Posts 00:03:42

Adding About Us Page & Contact Us Page 00:07:51

Using Layouts in Gatsby 00:09:02

Chapter 4 : GraphQL & Markdown Remark Plugin as Source

GraphQL Introduction 00:04:54

Adding Source Plugins 00:06:13

Markdown Transformer Remark Plugin 00:07:48

GraphQL in Component 00:05:19

Mapping GraphQL Posts and Rendering 00:04:37

Creating Slugs for Our Posts 00:07:33

Saving Slugs in Nodes 00:03:07

Iteration Through Our Query 00:03:12

Template Creation and Resolving 00:05:00

Rendering Articles 00:07:00

Fixing ReadMore Links and Logo Homepage 00:02:26

Chapter 5 : WordPress Headless CMS & Gatsby

WordPress Source 00:05:05

WordPress Blog Posts Listings 00:04:33

WordPress Single Post Rendering 00:05:25

Chapter 6 : SEO Optimizations

SEO and Metatags 00:02:29

Installing React Helmet 00:07:04

Site Metadata (SEO) 00:03:12

Building SEO Component 00:08:37

SEO Component Finish 00:05:16

SEO in Layouts 00:10:45

Chapter 7 : Deploying Project & Optimizing Lighthouse Score

Deploy with Netlify & GitHub 00:07:20

Lighthouse Audit 00:03:17

Github-Netlify Webhook Settings 00:02:07

Optimize Accessibility Score 00:03:09

Optimize Accessibility Score V2 00:07:00

Perfect Score and FIX of Excerpts 00:03:17

Chapter 8 : Progressive Web App (PWA) & WordPress Webhooks

(PWA) Progressive Web App Configuration 00:05:51

WordPress Webhooks 00:04:03

Start your Free Trial

Self paced

Go to the Course
We have partnered with providers to bring you collection of courses, When you buy through links on our site, we may earn an affiliate commission from provider.