Intermediate Gatsby with Gatsby Themes Course Overview
This course has been updated! We now recommend you take the Intermediate Gatsby, v2 course.
Transcript from the "Course Overview" Lesson
>> Jason Lengstorf: Part 1, we're going to create a custom Gatsby theme. It's gonna be a documentation theme, and that's going to use MDX. If you've watched the the other workshop that I did on Gatsby it for front end masters we use MDX. But if you haven't used MDX before, don't worry, we're gonna cover all of it here.
[00:00:17] We're gonna define some custom data type. So we're gonna define an actual docs page, generic type that uses MDX. We'll use Theme UI which is a wonderful library from Jackson Black that allows us to kind of set up colors and font sizes and things in a way that's composable and easy to share.
[00:01:12] So that was a great way to procrastinate. We're also gonna customize the theme. So we're going to install the the docs theme on to this hongfei site and then we'll customize the theme using options so that it looks like the hongfei site. We'll use component shadowing to extend Theme UIs so we'll be able to override colors, fonts, things like that.
[00:01:31] Then we're going to build a site from scratch. We'll build a fan site for Negroni which are my current favorite cocktail. And we'll use that docs theme, but we're not gonna use it for docs. We're gonna use it for recipes, which means that we're gonna have to make some modifications to it.
[00:01:45] So we'll extend Theme UI again. But then we're going to do some fun stuff. We're gonna get into Cloudinary to manage images so that our image pipeline is nice and fast. We're just gonna upload things to Cloudinary, let Cloudinary do the work so that our buildings pipeline doesn't slow down.
[00:01:59] We're also gonna use component shadowing to customize components, because we don't necessarily want any reference to docs. We want to update that to reference recipes, so we'll be making those switches as well. And then we'll just install a second theme to see how that composes together. So we'll install an events theme that I built before.
[00:02:17] And we'll just plug that in and see how it works. And then finally, we're gonna set up a dynamic app that uses client side GraphQL with Apollo, we will configure client only routes and Gatsby, so this will be a linkable search results. So we're gonna use the Rick and Morty API to look up characters.
[00:02:35] And whenever you search for something you want to be able to send a link to that search results said to someone and have them click on it and see the same search results. So we're gonna build that will set up redirects and nullify so that this works locally and when you deploy it, and then we'll use react hooks to set up a search form.
[00:02:54] And the results page, as I mentioned, will be linkable. So, with all of that being said, let's get started. You are welcome to code along. I have a tendency to go a little bit fast. So also feel free to just sit back and absorb it. And all of this is gonna be online and you'll be able to revisit it check out two different points.
[00:03:17] But yeah, if you want to if you want to clone the repo, it's at jlang storf/gatsby-intermediate. And we'll be starting from the start branch.