A Few Things I Do Every Time I Start A New Gatsby Site
Josh Pollock
Posted on January 17, 2020
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 👇
Posted on January 17, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related