Set up a Shopify Account

Set up a WordPress account

Setup and Run a Gatsby Site

Convert Gatsby Site to Yarn Workspace Project

Overview of Gatsby Site Example Project

Create a Marketing Gatsby Theme

Build an Advanced Gatsby Theme Shopify

Creating a Blog Theme

Use Schema Customization to Support MDX and WordPress 

Powering BlogPost with WordPress and MDX

Composable Gatsby Themes

Our starting point is a fully functioning Gatsby site that we'll break down into themes.

Instructor: [00:00] The advanced Gatsby themes workshop code project is setup into a set of branches. To start, we'll find the code URL, and we'll use that to clone the rebill. After cd-ing into the project directory, we can use ls to see our project setup.

[00:17] Note that this is a Gatsby project, so we have a number of Gatsby dash files as well as a yarn.lock indicating that we're using Yarn. This is important because we're about to use Yarn workspaces, which MPM does not have an equivalent for. You can run Yarn to install the dependencies.

[00:33] After installing the dependencies we can take a look at the scripts in the package json. Note that we have three scripts here, develop, build, and clean that are associated with Gatsby develop, Gatsby build and Gatsby clean respectively. We can use Yarn develop to start our project.

[00:48] Note that, while the project started up, we see a number of errors, including, Unknown field 'allShopifyProduct' on query, 401 Unauthorized errors for our WordPress plugin, and GraphQL query errors from the Shopify plugin.

[01:05] To fix these errors, we'll have to make two adjustments. Open up gatsby-config, find the location that has the gatsby-source-shopify plugin, and where it says Shop Name, replace it with your shop name that we got in the Shopify setup video. In my case, it's Corgi Supply, Incorporated.

[01:19] Scroll down and find the gatsby-source-WordPress plugin. You'll need the URL to your WordPress site. In this case, mine is advancedthemescourse.home.blog. Remember, this is the free domain that we chose when we were setting up our WordPress site. All the other configuration is included in process.env variables.

[01:34] After saving that, we have to create one more new file. This file will be called .env.development, and it will be in the root of our project.

.[01:42] env.development will include a number of our variables that we got from the previous setup videos for WordPress and Shopify, including the WordPress client secret, the WordPress client ID, the email and the password for our WordPress account, and the Shopify access token. Remember that this is storefront access token, and not the admin API token.

[02:03] If we save that file and run the site again, we can see that we have far fewer errors. Note that some of the 401 Unauthorized calls can be fixed, but they don't matter for us right now. Note that the Shopify calls all passed and we see times for each of them. The GraphQL query errors are now gone.

[02:20] If you open the site, you can test that the WordPress posts came in, by looking at the blog. You should have two posts, if you followed the WordPress setup guide. Note that also in the SWAG store, we'll see our Corgis, or whatever product you set up with the variance. You've now successfully set up the site.

[02:35] We'll gradually build this site into a set of themes over the course of this workshop.

Course

Composable Gatsby Themes

Setup and Run a Gatsby Site

Share this video with your friends