
Set up the essential tooling for this course by installing node from nodejs.org to get npm, the package manager, and using Visual Studio Code as your code editor.
Create a new Gatsby project with the Gatsby CLI, run gatsby new, install dependencies, and start the app to view localhost:8000, after installing the required node and npm versions.
Install the required dependencies for the Gatsby site: gatsby-plugin-google-fonts, styled-components, and gatsby-source-wordpress, then start the app and verify it runs on localhost:8000.
Create a GraphQL query for the home page hero image and text using WordPress and ACF, then fetch data with a useStaticQuery hook for a full-width image.
Create a GraphQL query in Gatsby to fetch the author and code text from a WordPress page, using the headless CMS workflow and a code query component.
Create dynamic Gatsby pages by querying WordPress page links with GraphQL and building a page template using the Route API.
Build a dynamic page query in Gatsby using WordPress as a headless CMS, fetching title, content, status, and featured image for pages and their children with a variable ID.
Build a Gatsby site with React and WordPress as a headless CMS by creating an archive template with GraphQL query for categories and applying archive styles using layout and breadcrumb.
Create category archive pages in a Gatsby blog by wiring gatsby-node to map WordPress categories to archive templates, paginate posts per page, and exclude uncategorized.
Create a static hero image for the blog page and implement a breadcrumb to navigate posts, using the archive header image and a wrapper component.
Create a page query for a post with GraphQL to fetch id, title, content, author name, formatted date, and categories with slug, then inspect the console for data readiness.
Gatsby with WordPress as a headless use React and the static site generator Gatsby to build a front end for a WordPress site
Create a REAL WORLD CLIENT Front End with Gatsby.js and WordPress as a Headless CMS!!
This course will NOT teach you how to build a WordPress site. The actual WordPress backend is pre built and I will not show how to build that. The sole purpose of this course is to teach Gatsby and how you can use Gatsby to create a Front End from a WordPress CMS. The purpose is NOT to show how the complete site is built with WordPress.
Are you a developer that like “code along” style learning? Do you want to learn Gatsby.js fundamentals in a real world project oriented course? Do you like quick learning and straight down to the point? Then this is the course for you!
In this course we’re building a real world website in Gatsby.js
My teaching style and belief is that you learn more by creating many smaller projects than one overwhelming 25 + hours course that tries to show you everything and don’t focus on the fundamentals that much. So this is a shorter, project oriented, course where You’ll learn how to create a real world client site from scratch with Gatsby.js. Gatsy uses GraphQL by default so this is an awesome way to start with some GraphQL.
What this course is!
This is an intermediate course. I assume that you know some Javascript and React
This is a quite fast paced project oriented course to learn the fundamentals of Gatsby.js
This is a course were you will learn GraphQL basics.
This is a “code along” style of course.
This is a course were you will learn how to connect an existing WordPress site to Gatsby.js and use it as a Headless CMS.
This is a course were you will use React. It will not teach basics of React but it should be good for an intermediate React developer.
This is a course that uses a lot of ES6 Syntax.
What this course IS NOT!
This course is not a beginner React course
This course will not deeply explain React syntax.
This course will not teach GraphQL in detail. (We will use it though and should be a great overview/start to learn GraphQL)
This course will not teach WordPress and how the actual WordPress backend is built. We’re not building anything in WordPress. The course is focused to learn Gatsby.js and how to connect an existing WordPress site to Gatsby.
My main goal with this course is to mix fun with teaching. There’s many tutorials and courses out there that are great but too complex and focus on a lot at the same time. Hope you enjoy it too!
Please make sure to download the STARTER FILES from the resources!