A Few Things I Do Every Time I Start A New Gatsby Site

I'm a big fan of Gatsby.js. It powers my blog and a my other random sites. I've been trying our some starters recently -- trying out TinaCMS and to display my dev.to posts on my own domain.

I started keeping a list of what I do every time I start a Gatsby site, so I'll remember next time, and thought I would share.

Upgrade All Of The Dependencies

There are so many cool Gatsby starters out there. It makes starting up a site fairly painless and saves a ton of time. Before I start working with a starter, I like to set all of the dependencies to the latest versions. I use my favorite yarn command for this:

yarn upgrade-interactive --latest

This might break everything. I'd like to know early on if using a starter is going to force me to stick with an out of date version of Gatsby, React, etc or take work to update.

Use Yarn

I prefer yarn to npm. I run a find and replace in package.json for "npm run" and replace it with "yarn". I also delete package.lock.

Add A Language Attribute

When I look at a demo of a Gatsby starter, I always use the aXe accessibility tester Chrome extension to make sure I'm not going to end up with a ton of bugs to fix in the generated HTML. Almost all the time, I see this violation:

<html> element must have a lang attribute

This issue is considered serious and is explained in depth here. It has a simple fix in most Gatsby starters and themes.

Presuming that Helmet is being used, you can use an htmlAttributes prop to set an attribute on the <html> element:

<Helmet title={config.siteMetadata.title} htmlAttributes={{ lang: 'en' }} />

Add Some Plugins

Gatsby plugins are super helpful. I always want to try and get the benefits of offline caching of a PWA and the security of implimenting CSP headers, so I add these two plugins:

Here is a good article on PWAs and Gatsby.

What Else Do You Do?

That's my list, for now.

What did I miss? Let me know on Twitter @Josh412 or leave a comment 👇

Josh Pollock @shelob9