A Brand New Interactive Experience for Creating Gatsby Sites

Kyle Gill
Kyle Gill
December 20th, 2020

When you start building a Gatsby site you get access to over 2600 Gatsby-specific plugins and themes, hundreds of beautiful starters, the entire Javascript and React ecosystem, and dozens of headless CMS’s that just work with Gatsby. There is a downside to having so many options, though: sorting through so many choices can be overwhelming.

So! As of Gatsby v2.28 we are happy to announce a new getting started experience, adding new functionality to the console commands you already use for getting Gatsby sites up and running quickly — helping you get started even faster.

This new interactive workflow is designed to take away many of the decisions involved in setting up a new Gatsby site. To make it super seamless, we just gave two existing commands —npm init gatsby and gatsby-new— the power to do new things. Both now kick off a dialog to help you quickly create a Gatsby site with everything you need, and nothing that you don’t!

Run npm init gatsby and you’re ready to go. The simple-to-use wizard lets you choose the features you want for your site and installs and configures everything automatically. It doesn’t require knowing anything about Gatsby specific starters, Themes, Recipes, or plugins, yet is still fully customizable.

For first timers to Gatsby, we hope it shifts the question from Which are the best starter/plugins to choose? to simply, What do I want to start building?!

Whether you’re building a beautiful blog powered by WordPress or a blazing fast Shopify store, npm init gatsby has you covered. Want to add your favorite CSS-in-JS system like Styled Components? Support for responsive images? Make your selections, then have it all set up, configured and ready to go literally in minutes.

Using the new interactive workflow

You can give all this a spin simply by opening up your terminal and running npm init gatsby; all you need is Node.js installed. A dialog box will walk you through the process by asking a handful of questions, and then take care of installing all the plugins you need before spinning up a new, lightweight project.

Why’d we do this now?

Developers new to Gatsby can be excited to hear how easy it is to get started, but then quickly find themselves overwhelmed by the number of plugins and starters available to choose from. By setting up a streamlined workflow from a smaller subset of the most commonly used plugins and use cases, we make getting up and running even easier. Equally importantly,  we can reduce the likelihood of a developer wading through all the available choices, only to find that a plugin in the starter they’ve chosen is no longer maintained 🙀.

Of course, if you prefer, you can still get things started the traditional way! If you run gatsby new with a path and link to a starter’s repository, things still work the same as they used to. If the new experience isn’t really your jam you can still add and configure additional plugins manually, but we hope the initial setup process can get you started faster than before.

We care a lot about the Gatsby developer experience, and this is just one of many ways we’re trying to streamline the process to make Gatsby easier to use and more approachable.

FAQs

How is this different from the old gatsby-new?

Rather than giving a default starter or requiring you to find a suitable one, this asks you a series of questions and installs and configures the appropriate integrations.

Is this the same thing as Gatsby Recipes?

The new interactive experience leverages some of the code written for Gatsby Recipes, but is a separate package and CLI command.

How can I use my CMS if it’s not listed?

You can still install and configure the plugin manually. With over 2400 plugins, we probably already support it! Many offer support for interactive installs, even if they’re not in the default list.

Will you include my plugin as an option?

We have prioritized the most popular plugins for the default list based primarily on downloads. Plugins with a plugin schema via the pluginOptionsSchema API were also prioritized for inclusion. (You can learn how to add a typed schema in the plugin options docs). If the plugin has a significant install base and has a schema implemented, we may consider adding it as well.

Kyle Gill
Written by
Kyle Gill

Software engineer and fan of learning cool things, building cool things, and listening to cool music.

Follow Kyle Gill on Twitter

Talk to our team of Gatsby Experts to supercharge your website performance.