Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Gatsby Themes are the next iteration of web development. They take all the good things about Gatsby and make them even more reusable and extendable. Themes are composable chunks of fully functional websites-- not just visual aspects.

Because they’re composable, you can have multiple themes on a single site. This lets you pick the right eCommerce theme, with whatever backing engine you want. You can then install whatever blog theme you want-- Wordpress, Contentful, etc. and you can customize them both. It's up to you!

For a written version of this course, check out the [Gatsby docs](https://www.gatsbyjs.org/tutorial/building-a-theme/).

Learn how to structure folders and configure Yarn workspaces to make the development of Gatsby themes easy.

In this lesson, we'll create two workspaces: `gatsby-theme-events` and `site`.

We will see how each workspace can be run separately as well as one depending on the other. In this case, `gatsby-theme-events` will be a dependency in our `site` project

For a written version of this course, check out the [Gatsby docs](https://www.gatsbyjs.org/tutorial/building-a-theme/).




Set up Yarn Workspaces for Gatsby Theme Development

Learn how to load data from MDX (or any data source) and ensure the necessary folders exist.

To do this, we'll need to add the data in a folder in the project and install two plugins: `gatsby-source-filesystem` and `gatsby-transformer-yaml`

In `gatsby-config.js`, both of those plugins will be defined in the plugin array and the data will be exposed through out our application through GraphQL.

For a written version of this course, check out the [Gatsby docs](https://www.gatsbyjs.org/tutorial/building-a-theme/).

Add Static Data to a Gatsby Theme

Learn how to architect the React components in your Gatsby theme to maximize reusability and extendability while minimizing maintenance and hassle.

The first step is to make sure the `data` directory exists so because `gatsby-source-filesystem` will throw an error if it doesn't. 

This lesson will cover that step.

For a written version of this course, check out the [Gatsby docs](https://www.gatsbyjs.org/tutorial/building-a-theme/).

Create a Data Directory in Gatsby using the onPreBootstrap lifecycle

In [Create Data Driven Pages in Gatsby with createPages](https://egghead.io/lessons/gatsby-create-data-driven-pages-in-gatsby-with-createpages), we made sure the `data` folder existed. 

To actually create pages, we'll need to:
 - define the event type
 - define resolvers for custom fields
 - query for events

Once we do this, we'll be ready to finally display the data in a page which is covered in: [Display Data in React Provided in Gatsby with GraphQL](https://egghead.io/lessons/gatsby-display-data-in-react-provided-in-gatsby-with-graphql)

For a written version of this course, check out the [Gatsby docs](https://www.gatsbyjs.org/tutorial/building-a-theme/).

Set up to Create Data Driven Pages in Gatsby

To create pages in Gatsby, there are 4 steps needed before actually doing the thing:
 - ensure `data` directory exists
 - define the event type
 - define resolvers for custom fields
 - query for events

Now that these are done (see [lesson 03](https://egghead.io/lessons/gatsby-create-a-data-directory-in-gatsby-using-the-onprebootstrap-lifecycle) and [lesson 04](https://egghead.io/lessons/gatsby-create-a-data-directory-in-gatsby-using-the-onprebootstrap-lifecycle). Lets create the `allEvent` query and loop through the result with `createPages`.

For a written version of this course, check out the [Gatsby docs](https://www.gatsbyjs.org/tutorial/building-a-theme/).

Create Data Driven Pages in Gatsby with GraphQL and createPages

Now that the event list data is available to us and the subsequent pages created, we need to create a template in Gatsby to render this list too.

In this lesson we'll use `useStaticQuery` provided to us from Gatsby and query for the data available. Then a `EventList` component will be created for that data to be passed into and displayed properly.

A `Layout` Component will also be created so there is a consistent look throughout our application.

For a written version of this course, check out the [Gatsby docs](https://www.gatsbyjs.org/tutorial/building-a-theme/).

Display Sorted Data with useStaticQuery in Gatsby

Similar to `EventList`, we'll need to create a template React component for each individual Event page.

To do this, we'll need to add a page query, to access GraphQL variables, to query for individual events by id. Once that data is available, it can be passed into an `Event` component that will display the data for us.

For a written version of this course, check out the [Gatsby docs](https://www.gatsbyjs.org/tutorial/building-a-theme/).

Display and Query Data by id with Gatsby context and useStaticQuery

The `Event` Page is looking pretty good. But we can do better.

The date currently comes from a query that gets the start and end date as props and dumps that data out in a `<p>` tag. 

In this lesson, we'll add some custom logic to display the date of an Event how you would expect it.

For a written version of this course, check out the [Gatsby docs](https://www.gatsbyjs.org/tutorial/building-a-theme/).

react

Style and Format Dates in React

Gatsby themes accept options. Learn how to read these options and generate pages from the correct data at the appropriate locations.

In this lesson, we'll:
 - turn the `gatsby-config` into a function
 - pass in options as arguments to that function
 - update `gatsby-node` to reference the options passed in

For a written version of this course, check out the [Gatsby docs](https://www.gatsbyjs.org/tutorial/building-a-theme/).

In a consuming package, you can configure the `options` object however you need to within the plugins array.

Configure a Gatsby Theme to Take Options

Allow people using your theme to apply their own design to the theme by defining design tokens with theme-ui. 

For a written version of this course, check out the [Gatsby docs](https://www.gatsbyjs.org/tutorial/building-a-theme/).

Make Gatsby Themes extendable with gatsby-theme-ui

Now that styles are set in `theme-ui`, we need to actually use them in our application. 

First, we'll override the default `theme-ui` config by shadowing the `theme` object in `gatsby-theme-ui/index.js` and start using the theme throughout.

For a written version of this course, check out the [Gatsby docs](https://www.gatsbyjs.org/tutorial/building-a-theme/).

Use and Override a Theme in Gatsby with Component Shadowing

Make your Gatsby theme available for use by anyone in the community by publishing it as an npm package.

For a written version of this course, check out the [Gatsby docs](https://www.gatsbyjs.org/tutorial/building-a-theme/).

Publish a Gatsby Theme to npm

Install and configure your Gatsby theme to create a fully functional website from just a few lines of configuration and a folder full of MDX files.

For a written version of this course, check out the [Gatsby docs](https://www.gatsbyjs.org/tutorial/building-a-theme/).

Consume a Theme in a Gatsby Application

Take full advantage of the power of Gatsby themes using component shadowing, which allows you to selectively extend — or even replace! — specific components in your Gatsby themes.

For a written version of this course, check out the [Gatsby docs](https://www.gatsbyjs.org/tutorial/building-a-theme/).

Gatsby Theme Authoring

Jason Lengstorf

Free Community Resource

Free Community Resource

Course Content