Build a GraphQL Query using Gatsby’s GraphiQL Explorer

Automatically Create Pages in Gatsby

Use the Gatsby Theme Workspace Starter to Begin Building a New Theme

Linking Between Pages in Gatsby

Gatsby Docs

Yarn workspaces are a great way to set up a project for theme development because they support housing multiple packages in a single parent directory and link them together.

This video will teach you:

- How to use the Gatsby theme workspace starter to quickly set up a workspace to build a new Gatsby theme.

## Further reading

- [Setting up Yarn Workspaces for Theme Development](https://www.gatsbyjs.org/blog/2019-05-22-setting-up-yarn-workspaces-for-theme-development/)
- [Building Themes](https://www.gatsbyjs.org/docs/themes/building-themes) guide.

Instructor: [0:00] Set up a Yarn Workspace to build a new Gatsby theme using the Gatsby theme workspace starter. We'll copy the link to the starter and over in our terminal, run "Gatsby new, my theme workspace," and then the link to the starter.

[0:18] Then, CD into "my theme workspace," and open it up in your code editor. We have two directories, "Gatsby theme minimal" and "example." It's packaged at JSON here in the route. The route packaged at JSON sets up the Yarn Workspace.

[0:34] Here, we have "Gatsby theme minimal" and "example." These names correspond to the names defined in each project packaged at JSON, not the name of the directory. Back over in our terminal, if we run "Yarn Workspace's info," we'll see these workspaces that we've set up.

[0:56] Back over in our code, Gatsby-theme-minimal is the most minimal possible Gatsby theme. It defines a Gatsby config and also marks Gatsby as a peer dependency.

[1:07] Example is the minimal Gatsby site that does nothing but install and use gatsby-theme-minimal. Here, we're installing gatsby-theme-minimal and using it in our Gatsby config.

[1:20] Taking a look back at yarn workspaces info, we can see that gatsby-theme-minimal is a workspace dependency of example. Run the example site by using yarn workspace example develop.

[1:35] This command says run yarn. Target the workspace of example, and run the develop script.

[1:44] The example site is running. We're ready to start developing a new theme.

Course

Gatsby Docs

Use the Gatsby Theme Workspace Starter to Begin Building a New Theme

Share this video with your friends

Further reading