Automate site-building tasks with Gatsby Recipes
In the last tutorial we saw how easy it was to set up a blog with the help of gatsby theme. Ok, now you have your blog set up ready, what's next? I want to see how my visitors are interacting? what content do they spend the most time reading on? How many blogs do they read on average? These all questions can be answered when we have some form of analytics trackers added on our blog.
Another new plugin? How many more? I understand that adding a new plugin and customizing them according to our needs is tiring work, so what do we do? Gatsby Recipes to the rescue.
What is Gatsby Recipes?
Gatsby Recipes is a new tool recently introduced by Gatsby 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.
It can do so many complex tasks and you have to develop recipes 1 time and then you can use it any time to do the same tasks.
It is now possible to create 1 Recipe to develop a simple website and then you can use it to create many more by running 1 command. To understand how to create a recipe I'll show you how to create a Gatsby Recipes to install google analytics in the Gatsby Site.
Setting up
To Run the Gatsby Recipes you need to have Gatsby-CLI and updated to the latest version as Recipes is a new rapidly developing feature.
npm install -g gatsby-cli@latest
To confirm that it's installed, run gatsby --help in your terminal. The output should show the Recipes command.
You can also try gatsby recipes to check out currently available Recipes to install on your site.
Developing Recipes
Recipes are simple MDX files with which we can easily write what tasks to perform with the help of Recipes API.
Our Recipes for Google Analytics would look something like this.
# Add `gatsby-plugin-google-analytics` to Gatsby Project
More info about the plugin can be found here: 👉 [gatsby-plugin-google-analytics](/packages/gatsby-plugin-google-analytics/)
<!-- use three dashes to separate steps of the recipe -->
---
Install `gatsby-plugin-google-analytics`
<NPMPackage name="gatsby-plugin-google-analytics" />
---
Add the Google Analytics plugin to gatsby-config.js
<GatsbyPlugin
name="gatsby-plugin-google-analytics"
options={{
trackingId: "YOUR GOOGLE ANALYTICS TRACKING ID",
head: false,
anonymize: true,
respectDNT: true,
exclude: ["/preview/**", "/do-not-track/me/too/"],
pageTransitionDelay: 0,
optimizeId: "YOUR GOOGLE OPTIMIZE TRACKING ID",
experimentId: "YOUR GOOGLE EXPERIMENT ID",
variationId: "YOUR GOOGLE OPTIMIZE VARIATION ID",
defer: false,
sampleRate: 5,
siteSpeedSampleRate: 10,
cookieDomain: "example.com",
}}
/>
---
All done: 🍻
Head over to `gatsby-config.js` to complete the setup by amending or removing the plugin options. You will need a Google Analytics `trackingId`
You can read more about how to use the plugin here: 👉 [How to use](/packages/gatsby-plugin-google-analytics/#how-to-use)
How to run recipes
To run a local recipe, make sure to start the path to the recipe with a period like:
gatsby recipes ./my-gatsby-recipe.mdx
To run a remote recipe, copy the path to the recipe and run it e.g.
gatsby recipes https://example.com/gatbsy-recipe.mdx
When you run the recipe you will see something like this:
Then just follow the steps and it will guide you step by step.
And check gatsby-config.js file to see your plugin added. Now just add the tracking ID and you are set to go.
Conclusion
Now with this recipe developed you can add other plugins that you install in your site and create a Recipe with which you can develop your new site in a matter of seconds. To know more head over to docs.
