Gatsby

Let's go over the core concepts behind Gatsby.

Learn why I built this course and how to get the most out of it.

Let's walk through the course repository.

Let's clone our first starter project.

Let's open our new project and see what's inside.

Get to know your new best friend: the `gatsby develop` command.

Gatsby makes it super simple to add pages to our site.

Let's do an assignment to practice what we've learned so far.

Here's my solution for the previous assignment.

Gatsby provides a built-in way for us to quickly link between pages.

Let's practice using Gatsby's Link tag.

The solution to the previous assignment.

Let's recap what we've learned about Gatsby basics.

Let's create a basic layout component.

Let's add our layout to the About page.

Let's create a header for our layout.

What if we need to control which parts of the layout show on different pages?

Let's make a navigation component.

The solution to the previous assignment to create a navigation bar.

Let's recap what we've learned about layouts in Gatsby.

Inline styling in Gatsby works just like you'd expect in a React application.

Let's learn the first way to use global styles in Gatsby.

Let's look at another way to add global styles in Gatsby.

Here's a quick assignment for you to practice global styling.

Here's the solution for changing fonts in our app.

Let's learn about CSS Modules.

Let's do an exercise to help solidify your knowledge of CSS modules.

The solution to the CSS modules assignment.

Let's learn about the popular concept CSS-in-JSS!

Let's install styled-components.

How do we use styled components? Let's find out.

Here's an exercise for you to help you get the hang of styled components.

The solution to the styled components assignment.

Let's review what we've learned about styling in Gatsby.

With Gatsby, you can add site metadata you can query using GraphQL.

An introduction to your new best friend: the GraphiQL Explorer.

Let's use our site metadata in a static query.

Now that we know about static queries, let's learn about page queries.

Let's solidify your knowledge of static and page queries with an assignment.

The solution to the page query assignment.

The solution to the static query assignment.

Let's review what we've learned about working with data in Gatsby.

Let's add MDX to our project!

Let's add a custom layout for our MDX pages.

We can pull our custom layout into its own file as a default layout.

Create an events page that we'll add to later.

Solution to the events page assignment.

Gatsby lets us load files in as sources that we can query.

Let's use GraphiQL to visually see the result of loading files.

We can tap into Gatsby's build process and create page slugs for our events.

We can also create pages for each of our events.

Let's create a layout for our event pages.

We'll need a query to get the data for the events.

Let's finish up the event layout.

Here's a short assignment to give you more practice with queries in markdown.

The solution to formatting the date and adding some frontmatter.

Let's build a query to get our five most recent event posts.

Let's add our query to the page and some code to display the data.

Let's review what we've learned about markdown and MDX.

Gatsby lets us import images directly into our files.

Learn about Gatsby's "escape hatch" for adding images and other assets.

Gatsby has a special way to work with images using the Sharp library.

Now that we've added Gatsby Image, we need to configure it.

Let's use GraphiQL to build a query for images.

Let's use our image query in the index page.

Add an image to the about page to solidify your understanding of images in Gatsby.

Let's walk through how to add an image to the about page.

We need to fix our list of our events.

Let's learn how to add banner images to markdown files.

We can extract our custom image as a component.

It'd be great if we could use images in Markdown using standard syntax. Let's learn how.

Let's get you some more practice with images in markdown.

The solution to the assignment to add images to two more events.

Let's review what we've learned about images in Gatsby.

I left three things that worked in development but need to be fixed in production.

Let's finish up fixing our code to work in production.

React Helmet lets us add head tags to our project.

Let's add a title and description to our site.

It's common practice to extract React Helmet into an SEO component.

Here's how to extract an SEO component for React Helmet.

Netlify is amazing -- let's deploy our site to it!

ZEIT Now is another great deployment option. Let's check it out!

Let's review what we've learned about taking Gatsby to production.

A huge THANK YOU from Sam and where to go next in your Gatsby journey.