I’m excited to announce Gatsby Recipes, a new tool to automate common site building tasks.

Recipes are run from the CLI and automate common tasks like creating pages and layouts, installing and setting up plugins, adding a blog to a site, setting up TypeScript, and many more.

Gatsby ships with a number of default recipes and it’s easy to create your own for use on your sites. Recipes allow you to install NPM packages, add Gatsby plugins, generate pages and other code. Recipes are written using Markdown and React components.

To kickstart the new era of Gatsby Recipes, we’ve created 11 official recipes with more on the way! These include recipes for adding TypeScript, Theme UI, Sass, Cypress, and setting up useful techniques like animated page transitions, and persistent layout components.

Watch me add Theme UI to a Gatsby site in under 45 seconds

Gatsby has 1000s of plugins and themes and is an incredibly flexible tool for creating for the web. With this comes the problem of discovering how to accomplish a specific task. It’s a challenge when users enter the Gatsby ecosystem, they have to translate “I want to do x” to how “x” is done in Gatsby. Last year, Marcy Sutton led our effort to add dozens of “recipes” to help people with this on gatsbyjs.org. But we think these will work even better if you can run them directly on the CLI. Gatsby Recipes teach users how to accomplish desired tasks in Gatsby while also enabling them to automate the process.

So now, instead of Googling how to add Styled Components support to Gatsby, you simply run gatsby recipes styled-components and an interactive workflow walks you through the steps.

Similarly if you want to add a blog, you can now run gatsby recipes gatsby-theme-blog and immediately start blogging.

We want there to be 10s of thousands of recipes you can search, run, and remix per your needs.

Human-friendly automation

Recipes are written in MDX—a combination of Markdown and React components—readable by both humans and machines. (Other “infrastructure as code” automations, like AWS CloudFormation, use kinda-sorta legible YAML templates that favor the machines). We picked MDX to make Gatsby Recipes instructions and explanations easily readable for humans while using React components syntax to declare to Gatsby Recipes the desired state of the world. This means Gatsby Recipes read like actual little recipes. Writing and using them could be…dare we say it…fun.

We take a lot of inspiration from literate programming tools like Eve and HyperCard.

To try out Recipes, update to the latest version of the Gatsby by running:

npm install -g gatsby-cli@latest

npm install gatsby@latest