Automating Site Operations with Recipes

Because Gatsby recipes are a relatively new feature, introduced late in the Gatsby 2.0 release cycle, you may need to upgrade to the latest version of Gatsby to access recipe features:

$ npm install -g gatsby-cli@latest
$ npm install gatsby@latest

Then, run the following command in the root of an existing Gatsby project to access the list of available recipes:

$ gatsby recipes

You’ll see output in your terminal that looks like the following and allows you to select from a variety of available recipes:

Select a recipe to run
>>Add a custom ESLint config
  Add Jest
  Add Gatsby Image
  Add Gatsby Theme Blog
  Add Gatsby Theme Blog Core
  Add Gatsby Theme Notes
  Add persistent layout component with gatsby-plugin-layout
  Add Theme UI
  Add Chakra UI
  Add Emotion
  Add support for MDX Pages
  Add support for MDX Pages with images
  Add Styled Components
  Add Tailwind
  Add Sass
  Add TypeScript
  Add Cypress testing
  Add animated page transition support

When you select one of these recipes and hit the Return key, your Gatsby site will automatically be equipped with the features it provides, set up on your behalf by Gatsby. Recipes are written using Markdown and MDX, which we explore further in the next section. This means that recipes are not only easy to write, but also familiar to Gatsby developers across your team who have experience with MDX. As an example, here is the recipe to set up Styled Components, which is one of the options in the preceding list:

# Setup Styled Components

the component age.
Use the best bits of ES6 and CSS to style your apps without stress

---

Install necessary NPM packages

<NPMPackage name="gatsby-plugin-styled-components" />
<NPMPackage name="styled-components" />
<NPMPackage name="babel-plugin-styled-components" />

---

Install the Styled Components plugin in gatsby-config.js

<GatsbyPlugin name="gatsby-plugin-styled-components" />

---

Sweet, now it's ready to go.

Let's also write out an example page you can use to play
with Styled Components.

<File
  path="src/pages/styled-components-example.js"
34541b87c4194ba2290eedbe8a0b1fe0/raw/ >>>
dba4d3ffecb5f2a3a36e0e017387185a9835c685/styled-components-example.js"
/>

---

Read more about Styled Components on the official docs site:

If there isn’t a recipe in this list that suits your needs, you can author your own or use one contributed to the ecosystem by the Gatsby community. To run a local Gatsby recipe located on your machine, execute the following command:

$ gatsby recipes ./my-local-recipe.mdx

To run a remote recipe, such as one contributed by the community, you’d execute a command.

Now that we’ve introduced the concept of recipes, let’s dig into those strange JSX elements you may have noticed in the Styled Components example, like <NPMPackage> and <File>. In the next section, we’ll explore MDX, a means of adding JSX components directly into your Markdown files (and a technology that can be leveraged for much more than Gatsby recipes!).