Course Overview

[00:00:00]
>> Let's talk a little bit about what we're going to do today. Will kinda run through the the table of contents for this course. So the first thing we're gonna cover is the initial site setup. We're gonna go from mostly empty folder, I'm not gonna walk you through, like setting up a gitignore.

[00:00:15]
So, we'll clone all of that. But we'll set up what's the bare minimum Gatsby site. We're going to get through pages and linking, how do pages work in Gatsby, how do you link between them? We're gonna look at how GraphQL works in Gatsby. It is a little bit different than you may have expected in if you've used GraphQL and other systems.

[00:00:35]
GraphQL, and Gatsby is sort of its own thing. So, we'll look at how that works, and what's different about it. We're also gonna look at SEO and metadata. How do you add Title Tags? How do you add those Meta Tags? Those things that give you social sharing images, all that stuff, we're gonna dig into it.

[00:00:48]
We will look at shared layouts. How do you add some Markup like a header that persists between pages, common styles, all those things? We're gonna look at global styling. So how to add CSS that affects everything, as well as scoped styling. How do you write some CSS that only affects the given component that you're working on?

[00:01:09]
We're gonna look at writing with MDX. So, if you wanna use MDX, we'll talk about what that is. And you want to use that for writing your blog. We're gonna show you how to configure it, how to get it up and running, how to write some pages. We're gonna look at image optimization.

[00:01:21]
This is one of the core features of Gatsby, one of the things that Gatsby is probably most known for. We're gonna look at how to do it. We're also going to look at third-party data. How can we pull in data from a headless CMS Mess. We'll use a headless CMS Mess today.

[00:01:35]
But you'll use the same flow for pulling in from an API, or from your own data sources, custom files, like a YAML file, or a JSON file. We'll show you how to do that. We'll look at generating pages from that custom data, whatever we pull in. We'll have Gatsby build some pages for us.

[00:01:52]
And then we're gonna look at deployment. How do we take this site that we've built and get it up on the Internet, and we'll do that all today. It's gonna be great. So next, let's talk about the resources for today. We're gonna be working off of two repos.

[00:02:07]
What we'll be working on, is we're gonna have a walk through in code snippets. And that is gonna live at frontendmasters.learnwithjason.dev/intro-to-gatsby. This is a site that I lifted wholesale off of Brian Holt. He has a really great way of presenting courses. If you've never watched one of his courses on Frontend Masters, I highly recommend you do it.

[00:02:26]
But it's a lesson it's gonna kinda step through each thing we're gonna cover today with code snippets. The diffs of what the code looked like before and what it'll look like once you're done. So as you're following along, if you feel like you're lost, you can always jump to the right page that we're on in this workshop and get caught up.

[00:02:45]
I also have the source code up on GitHub. There is a repo at jlengstorf, that's my GitHub username, /frontend-masters-intro-to-gatsby-project. That is where we're actually gonna be working. So, the main branch is the one that will clone that's the starter for the project. And then there is a progress branch, I think I called it test progress.

[00:03:06]
Cuz I'm gonna actually commit to a real progress branches as we go today. But if you wanna see the code at any given point, you can jump into that. And the commit messages will match up roughly with the steps in the site. So that you can jump to where we are and see where things are.