Gatsby Js: Build Gatsby Static Sites With React & Wordpress

The Gatsby & WordPress stack - Learn Gatsby and generate super-fast Gatsby static sites with a WordPress backend.

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 to query data stored in Wordpress

Set up Wordpress as a backend to build content, then render the content as pages with React JS & GraphQL

Deploy your Gatsby JS static website and rebuild whenever content changes using Netlify

Requirements

Have a basic understanding of React JS

Description

** MAJOR COURSE UPDATES **Brand new section on how to create a blog with pagination within GatsbyMigrate local WordPress site to live server hosted on DigitalOcean (with $50 FREE credit for new customers!)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."Level-up your React skillset by learning Gatsby.js with a Wordpress 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 Wordpress as a headless CMS while using GatsbyJS to generate a blazing-fast server-rendered React website from Wordpress data, such as posts, pages, menus, media, advanced custom fields, (and more!) using GraphQL to query that data.That's right, we can actually query Wordpress data using GraphQL!We'll be creating a portfolio website in this course, looking at initial setup and development of Gatsby JS and Wordpress locally, creating Wordpress template files and mapping them to React components, and querying Wordpress data with GraphQL to automatically generate our static pages. We'll look at how we can query Wordpress data with GraphQL using the GraphiQL browser tool. We'll get our hands into a little bit of Wordpress code as well, but not too much - the main focus here is Gatsby. Once we're familiar and comfortable developing with GatsbyJS and Wordpress, we'll progress onto setting up and deploying a live website using Netlify that re-builds our static web pages every time we update content in our Wordpress backend.It's recommended you have rudimentary knowledge of React. We'll be covering everything else from Gatsby.js, Wordpress, GraphQL, and styled-components!Speed past the competition!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 Netlify for this) - ready to be delivered instantly to your users wherever they are. No waiting for API responsesNo waiting to render components based on requested dataNo loading spinners!No waiting for a server to compile a page to serve to the browser - these pages are already pre-compiled and ready to serve instantly to your users!What other students are saying about this Gatsby & WordPress course:5/5 stars - "Tom is a really nice guy with a good voice. His course is to the point and his response to the Q&A is awesome. I really like the fact that this course is not that long and shows you the endless possibilities that you can do with both Gatsby and the Wordpress API. For me this is a really good starting point in transforming a couple of websites without a CMS into a website with CMS" - Edwin Boon5/5 stars - "Tom's course is concise, clear, and gives you a good example of how to leverage your knowledge of React into fluency working with Gatsby." - Rob Thorne5/5 stars - "Straight to the point, no pep talkings, Tom delivers the course as a sharing-experience between two colleagues. From his experience, without pretensions of teaching but showing what he finds to be helpful, he drives the lectures smoothly intertwining react, graphQL and wordpress with gatsby in a minimalistic way that can be approachable by anybody. Don't expect complicated ract patterns as that's not the point; I really appreciate that from Tom, keeping the focus on the whole architecture, not react/wordpress/graphQL specific. Just be aware we are not talking about the old web patterns, so make sure you have a sound understanding of react, wordpress and REST APIs; and by his exposition, gatsby explanations will naturally fall in place almost unnoticeable; you will be using it already." - Tony Guerrero5/5 stars - "I had no idea this was possible! I usually use React but have never used WordPress before, but I found this was really well articulated. Brilliant course - thank you!" - Carol Emma

Overview

Section 1: Introduction & Setup

Lecture 1 Important: Before you begin this course

Lecture 2 Introduction

Lecture 3 Overview of the project / website we'll be building

Lecture 4 Setup WordPress with Local by Flywheel

Lecture 5 Gatsby setup

Section 2: Rendering pages and querying data with GraphiQL & GraphQL

Lecture 6 Common issues / errors and how to resolve them

Lecture 7 Querying Wordpress data with the GraphiQL browser tool

Lecture 8 Querying Wordpress data with GraphQL from within Gatsby

Lecture 9 IMPORTANT! Code required for the following lecture.

Lecture 10 Generating Gatsby pages dynamically from Wordpress pages & posts

Lecture 11 IMPORTANT! Fixing "TypeError: Cannot read property 'page' of undefined"

Lecture 12 Fixing the 404 not-found on root URL

Lecture 13 Recap of gatsby-node.js

Section 3: Creating the Menu

Lecture 14 Removing Wordpress frontend + create Wordpress menu

Lecture 15 Recap gatsby-config.js + querying Wordpress menus with GraphiQL

Lecture 16 Creating the Menu component in Gatsby

Lecture 17 Refactoring the menus GraphQL query

Lecture 18 Styling the Menu with React styled-components

Lecture 19 Retrieving and rendering the Wordpress site title and tagline

Section 4: Wordpress custom "Portfolio" post type

Lecture 20 Registering custom "portfolio" post type in Wordpress

Lecture 21 Adding example Portfolio items

Section 5: Querying & rending custom portfolio post types in Gatsby

Lecture 22 Query custom "portfolio" post type with GraphQL

Lecture 23 Auto-generate portfolio pages in Gatsby

Lecture 24 Fixing styling of portfolio items and portfolio pages

Lecture 25 Create custom page template in Wordpress to render portfolio items

Section 6: Advanced custom fields

Lecture 26 Set ACF and add some example data to a Portfolio post

Lecture 27 Query ACF from within Gatsby and render ACF data

Section 7: UI updates and fixes

Lecture 28 Course update message

Lecture 29 UI fixes and cleanup (part 1)

Lecture 30 UI fixes and cleanup (part 2)

Section 8: Create a blog with pagination

Lecture 31 Blog demo

Lecture 32 Creating blog post data and building the graphql query

Lecture 33 Calculating the number of pages

Lecture 34 Creating and rendering the blog list & pagination

Lecture 35 Add "Blog" to the main menu & improve pagination styling

Lecture 36 Creating and linking to blog post pages

Section 9: Migrating local WordPress site to a live Digital Ocean server

Lecture 37 Creating a server on Digital Ocean & setting up subdomain

Lecture 38 WordPress setup

Lecture 39 Finishing WordPress migration

Section 10: Deploying a Gatsby site on Netlify

Lecture 40 Initial setup with Netlify

Lecture 41 Automatically rebuild Gatsby site whenever WordPress content changes

Section 11: Resources

Lecture 42 Github repo + useful links

Lecture 43 BONUS!

React JS developers who want to learn a better approach to creating static, content-driven websites with Wordpress, React JS, and GraphQL, using Gatsby JS