A short list of screencasts to cover essentials of [Gatsby](https://www.gatsbyjs.org/) to get started and have enough knowledge to become dangerous. 

The content comes from multiple instructors that have each covered different essentials, this cherry picks some of the most important concepts.

Videos in this collection cover these topics:
- installing plugins
- creating pages
- navigating between pages
- adding optimized images
- theming your styles
- deploying your site

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

Overview of Gatsby Site Example Project

Learn how to extend a Gatsby site with an official or community authored plugin. Plugins are an important building block in the Gatsby ecosystem that allow you to leverage repeated Gatsby functionality across multiple Gatsby sites.

Plugins hook into the Gatsby lifecycle as sites build and allow you to source data from external APIs or CMSs, transform data, optimize images, and much more.

Learn more:

- Find more plugins in the [Gatsby plugin library](https://www.gatsbyjs.org/plugins/)
- [Official docs on plugins](https://www.gatsbyjs.org/docs/plugins/)

Install and use a plugin in a Gatsby site

Why does Gatsby use GraphQL? This is part 1 of a 4-part series that shows how to create pages in Gatsby, how data becomes hard to manage over time, and how GraphQL helps limit the complexity of data management.

Let's create a page using React component templates and no data at all.

Create a Gatsby Page Without Any Data

For local navigation on Gatsby sites, the `Link` component provides a built-in solution for improving the performance and user experience on your site. The video will teach you:

- When the `Link` component should be used
- How to use Gatsby’s `Link` component

Why and How to Use Gatsby’s Link Component

Learn how to install and setup gatsby-image plugins to source local images from the filesystem so you can query them with GraphQL, and then use them in your site.

- [Using gatsby-image with your site](https://www.gatsbyjs.org/tutorial/gatsby-image-tutorial/) 
- [gatsby-image documentation](https://www.gatsbyjs.org/packages/gatsby-image)

Install gatsby-image and source local images from the filesystem

Learn how to use image from the filesystem at a relative path with the gatsby-image plugin.

- [Written recipe for this video](https://www.gatsbyjs.org/docs/recipes/#optimizing-and-querying-local-images-with-gatsby-image)
- [Gatsby documentation](https://www.gatsbyjs.org/docs/using-gatsby-image/)

Use gatsby-image with an image from a relative path

Theme UI has built-in [color mode support](https://theme-ui.com/color-modes/) that makes it straightforward to add a dark mode to your Gatsby project. You can use the `useColorMode` hook to retrieve the active color palette and set it to a predefined dark color palette.

Add Dark Mode to a Gatsby Site with Theme UI

In this lesson, you will learn how to push your website code to Github and Build and deploy it using Netlify

Up and Running with Gatsby

Instructor

Course Content