Introduction & Setup
  • Important: Before you begin this course
  • Introduction
  • Overview of the project / website we'll be building
  • Setup WordPress with Local by Flywheel
  • Gatsby setup
Rendering pages and querying data with GraphiQL & GraphQL
  • Common issues / errors and how to resolve them
  • Querying Wordpress data with the GraphiQL browser tool
  • Querying Wordpress data with GraphQL from within Gatsby
  • IMPORTANT! Code required for the following lecture.
  • Generating Gatsby pages dynamically from Wordpress pages & posts
  • IMPORTANT! Fixing "TypeError: Cannot read property 'page' of undefined"
  • Fixing the 404 not-found on root URL
  • Recap of gatsby-node.js
Creating the Menu
  • Removing Wordpress frontend + create Wordpress menu
  • Recap gatsby-config.js + querying Wordpress menus with GraphiQL
  • Creating the Menu component in Gatsby
  • Refactoring the menus GraphQL query
  • Styling the Menu with React styled-components
  • Retrieving and rendering the Wordpress site title and tagline
Wordpress custom "Portfolio" post type
  • Registering custom "portfolio" post type in Wordpress
  • Adding example Portfolio items
Querying & rending custom portfolio post types in Gatsby
  • Query custom "portfolio" post type with GraphQL
  • Auto-generate portfolio pages in Gatsby
  • Fixing styling of portfolio items and portfolio pages
  • Create custom page template in Wordpress to render portfolio items
  • Retrieve and render the site logo and favicon
Advanced custom fields
  • Set ACF and add some example data to a Portfolio post
  • Query ACF from within Gatsby and render ACF data
UI updates and fixes
  • Course update message
  • UI fixes and cleanup (part 1)
  • UI fixes and cleanup (part 2)
Create a blog with pagination
  • Blog demo
  • Creating blog post data and building the graphql query
  • Calculating the number of pages
  • Creating and rendering the blog list & pagination
  • Add "Blog" to the main menu & improve pagination styling
  • Creating and linking to blog post pages
Migrating local WordPress site to a live Digital Ocean server
  • Creating a server on Digital Ocean & setting up subdomain
  • WordPress setup
  • Finishing WordPress migration
Deploying a Gatsby site on Netlify
  • Initial setup with Netlify
  • Automatically rebuild Gatsby site whenever WordPress content changes
Bonus + Github repo
  • Github repo + useful links
  • BONUS! Additional Gatsby courses, & DigitalOcean