Introducing our open-source Gatsby starter kits

We are excited to announce that we have started to release some of our Gatsby starter kits as open-source projects on GitHub. We've been big fans of Gatsby at orangejellyfish for a while now and we hope that some of the lessons we've learned can be of use to others in the community.

The kits

At the time of writing we've released three kits.

Our starter kits all stem from this barebones base. The base kit features support for React 16, Bootstrap 4 and unit testing with Jest and Enzyme. It relies upon some default Gatsby settings and conventions to get you up and running with the least overhead.

The Netlify CMS kit builds upon the base kit to add in support for content management via the excellent Netlify CMS. We introduce a number of our own conventions to give good separation of concerns.

The blog kit builds upon the Netlify CMS kit to add in support for a number of common blogging concepts including multiple post authors, categories and tags. This is the kit that powers our own website.

Usage

You can scaffold a new site from a starter kit with the Gatsby CLI. The quickest way to do this is with npx (installed with more recent versions of npm):

npx -p gatsby-cli gatsby new $DIR_NAME https://github.com/orangejellyfish/gatsby-starter-base

Replace the last part of that command with your chosen kit and you're good to go.

Why Gatsby?

We're big fans of building the right things, and building them well. While we enjoy developing complex systems with technologies like Serverless we recognise that it's not always the best solution. Sometimes, a good old static site is the way to go.

Gatsby offers us the ability to build for the modern web without a lot of the overhead. Combined with Netlify we can very rapidly develop and deploy static sites and not have to worry about infrastructure.

Best practice

We've tried to follow industry best practices throughout our starter kits. Gatsby does a great job of this on its own, giving you offline-first capabilities out of the box for example. Our kits add in a bunch of useful develop-time extras such as pre-configured unit testing and code linting, as well as build-time plugins for things like optimised images.

If there's anything you'd like to see added to the kits please feel free to get in touch, open an issue on the relevant repository on GitHub, or even go ahead and have a go at implementing it yourself!

Twitter