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

We cover all of the functionality in the example project, such as sourcing content from WordPress, Shopify, and local MDX files.

Instructor: [0:00] After running yarn develop the site will appear. Note that we have a number of different pages and a number of different pieces of functionality. We have a couple of marketing pages, which is the home page, the pricing page, and the company page as well as a blog that sources its content from WordPress, the individual WordPress blog post.

[0:17] A blog that sources its content from MDX files and the individual pages for those, a swag store that sources its data from Shopify and contains functional buy buttons as well as an authenticated area but as a client-side Reach Router app, which could contain authenticated restricted content such as a dashboard.

[0:41] If we look at the code, we can see that our Gatsby SSR and Gatsby browser files contain a wrap root element. This wrap root element uses the theme UI theme provider, applies a couple of global styles, and passes in a set of MDX components.

[0:56] We also use the theme UI preset deep for our tokens. Our Gatsby Node is where all of our page creation happens. We have the blog post template for MDX and the WordPress post template for WordPress posts.

[1:09] We have a GraphQL query to get the content, and then we loop over the MDX nodes. We loop over the WordPress nodes to create each of the pages from our template file. Our MDX files are in a content folder at the root of the project. Inside of Devblog in date prefixed folders we have index.mdx files. You have titles and slugs and some content.

[1:34] In our source folder we have both of the templates, one for MDX using the MDX renderer and Gatsby plugin MDX and one for WordPress. Note that the MDX and the WordPress templates both render content slightly differently, but later in the workshop we'll actually combine these.

[1:52] The marketing pages are plain JavaScript files that use our components. This includes the index page, pricing page, as well as the company page. The blog and Devblog pages for our MDX and WordPress posts contain a query for all of the posts for the relevant product blog of Devblog.

[2:13] You can think of these as product announcement in the product blog or developer features on the engineering blog. Finally, we have the app.js file contains a Reach Router application embedded inside of our Gatsby application.

[2:27] This is a client side only app, which means that we get to do whatever we want with Reach Router, in this case we're switching between rendering the home as well as the dashboard. If you were going to use authenticated content this is where you would be authenticated restricted routes.

Course

Composable Gatsby Themes

Overview of Gatsby Site Example Project

Share this video with your friends