I’m super excited to share our first Shifter Gatsby Recipe! Created for Shifter Headless, our API-first WordPress hosting solution, this Gatsby Recipe will allow devs to bootstrap their Jamstack sites from the command line while saving time and effort.

Recipes are now officially part of the Gatsby CLI, which helps automate tasks for developers like adding themes, libraries, or plugins. Using the Gatsby Recipe API, you can create custom tasks and logic for things like building a WordPress site using Shifter Headless with Gatsby. That’s what we’ll cover today.

This is a simple start to something exciting we have planned for Gatsby Recipes and Gatsby Cloud. We started using them on the recommendation of Gatsby founder Kyle Mathews and learned there are more features on the way. Such as support for interactive recipes like Yeoman, the Netlify CLI, or any other CLI that prompts you with questions. One future thing we’re excited about is being able to eliminate a step from our current recipe, making it even simpler and faster to use when working with Gatsby and Shifter. You can look forward to that one soon!

Our Shifter Gatsby Recipe focuses on solving the problem of getting started. If you want to create a Gatsby site using WordPress and deploy your site to something like Gatsby Cloud, you should be able to do that with just a few commands. As we develop more integrations with providers like Gatsby Cloud, recipes are a perfect testing ground we can use right now. We want our customers and the Jamstack community to skip the line and get started on building starts without the setup fuss.

At DigitalCube, we support open-source communities and applaud initiatives like Five for the Future, which help to give back to software projects. We encourage others to do the same beyond just WordPress. This recipe could not have happened without other open-source software community contributions. We’ve learned by example and sourced our recipes from the few but growing list of ones out there. 

We look forward to joining the list of official Gatsby recipes with our contribution to the Gatsby JS project along with the countless other contributors that made this all possible.

How to use the Shifter Gatsby Recipe

Start by updating your local Gatsby NPM packages. Running the latest released version is always a good idea.

$ npm install -g gatsby-cli@latest

$ npm install gatsby@latest

You can now run the Gatsby Recipes command! Here are just a few of our favorites included in the official recipes list.

$ gatsby recipes
Select a recipe to run
>> Add Styled Components
     Add Sass
     Add Typescript
     Add React Helmet

If you don’t have an existing site and you’re starting fresh, we recommend using the official Gatsby starter. It’s a well documented and frequently updated starter template. Out-of-the-box it’s not WordPress ready, but the Shifter Gatsby Recipe will cover that.

Create a new Gatsby site using their starter template with the following command. We’ve named our folders shifter-gatsby-recipe-demo but, you can choose whatever you like.

$ gatsby new shifter-gatsby-recipe-demo

$ cd ./shifter-gatsby-recipe-demo

Gatsby Recipes are not limited to the ones shipped with Gatsby CLI. You can run custom recipes with a URL. Here’s how to run the Shifter Gatsby Recipe hosted on GitHub. This command will begin to run our recipe on your newly created Gatsby site.

gatsby recipes https://raw.githubusercontent.com/getshifter/shifter-gatsby-recipe/master/shifter.mdx

This recipe does a few things. First, it installs the required NPM packages to your project, including Gatsby itself, the Gatsby Source WordPress plugin for pulling in WP data, Gatsby Image for image processing, and more.

Install necessary NPM packages
<NPMPackage name="gatsby" />
<NPMPackage name="gatsby-image" />
<NPMPackage name="gatsby-source-wordpress" />
...

Next, the recipe executes a command on one of the NPM packages we’ve installed. It’s the Gatsby Source WordPress plugin, which can also accept some parameters in the recipe config. Allowing those parameters helps those writing recipes to bootstrap them with a few defaults. When the interactive recipes feature is released, we’ll update this step to allow users to replace the default values with the ones they need.

<GatsbyPlugin name="gatsby-source-wordpress" options={{
    baseUrl: `example.hl-b.getshifter.co`,
    protocol: `https`,
    hostingWPCOM: false,
    useACF: false,
    includedRoutes: [
        "**/posts",
        "**/pages",
        "**/users",
        "**/categories",
        "**/tags",
    ]
}} />

This part of the recipe then begins to import the template and config files for your Gatsby site. Template files are sourced directly from GitHub along with the gatsby-node.js file which queries the WordPress data.

Note: We’ve decided to start with the Gatsby Source WordPress plugin for a few reasons. The team over at Gatsby is working on some exciting updates for this plugin which are already available and they have a new version slated for release soon. The beta is out now and we recommend watching the walkthrough demo of all the latest features hosted by Tyler Barnes and Jason Bahl.

With the Shifter Gatsby Recipe complete, we can now begin development. Start by running gatsby develop and that’s it!

Where do we go from here? Go forth and explore all your wildest JavaScript static site WordPress dreams, of course. Gatsby Recipes are designed to help you. As we said, they automate tasks but they don’t do all the work for you. There are more gaps out there we can cover by creating new recipes and at Shifter that’s what we’re working on.

We want to explore what’s possible using the Gatsby Recipe API and get closer to our goal of full integrations with Gatsby Cloud using WordPress powered by Shifter and we’ll only get there with the help of the community.