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

1. Introduction

This video is an introduction to topics covered in the course.

2. Gatsby Environment Setup and First Project

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

3. Setting VSCode To AutoSave

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

1. Gatsby Starters

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.

2. Creating Pages in Gatsby

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

3. Navigation

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.

4. Gatsby Components

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

1. CSS Global Styles and Module CSS

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

2. React-Bootstrap Components

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

3. Add Posts to our Homepage

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

4. Some Changes to Components

In this lecture we are going to do some changes to our Gatsby js components.

5. Fixing NavLinks And Footer When Multiple Posts

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

6. Adding About Us Page & Contact Us Page

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

7. Using Layouts in Gatsby

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

1. GraphQL Introduction

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

2. Adding Source Plugins

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

3. Markdown Transformer Remark Plugin

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

4. GraphQL in Component

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

5. Mapping GraphQL Posts and Rendering

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

6. Creating Slugs for Our Posts

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

7. Saving Slugs in Nodes

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

8. Iteration Through Our Query

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

9. Template Creation and Resolving

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

10. Rendering Articles

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

11. Fixing ReadMore Links and Logo Homepage

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

1. WordPress Source

In this lecture we are going to learn how we can use WordPress plugin in Gatsby.

2. WordPress Blog Posts Listings

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

3. WordPress Single Post Rendering

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

1. SEO and Metatags

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

2. Installing React Helmet

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

3. Site Metadata (SEO)

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.

4. Building SEO Component

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

5. SEO Component Finish

In this lecture we are going to finish our SEO component.

6. SEO in Layouts

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

1. Deploy with Netlify & GitHub

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

2. Lighthouse Audit

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

3. Github-Netlify Webhook Settings

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.

4. Optimize Accessibility Score

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

5. Optimize Accessibility Score V2

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

6. Perfect Score and FIX of Excerpts

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.

1. (PWA) Progressive Web App Configuration

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

2. WordPress Webhooks

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.