DEV Community

Cover image for A Few Things I Do Every Time I Start A New Gatsby Site
Josh Pollock
Josh Pollock

Posted on • Edited on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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' }} />
Enter fullscreen mode Exit fullscreen mode

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 👇

Top comments (9)

Collapse
 
southpaw profile image
Alex Gabites

I got so sick of doing the same motions every time I set up a new Gastby site that I made a template for myself 😅

Thanks for the CSP plugin, didn't know about that one!

Collapse
 
shelob9 profile image
Josh Pollock

Thanks for sharing the template. I'll star it and try it out.

Collapse
 
southpaw profile image
Alex Gabites

Great! If you think there are improvements or plugins that would make it even better to include please do create a PR and I'd be more than happy to look at it :)

Collapse
 
waylonwalker profile image
Waylon Walker

Thanks for sharing! I have four Gatsby sites in production and have started countless others to play with. Great tips to always update packages before starting.

I always add styled components right away.

npm i styled-components

Collapse
 
wezpyke profile image
Wez Pyke

Is there any reason why you prefer Yarn over NPM?

Collapse
 
shelob9 profile image
Josh Pollock

This is a great question, I wrote a post beacuse my answer was going long. tl;dr - yarn test is less keys to press than npm run test also monorepos and npm inc. worries me.

dev.to/shelob9/why-i-use-yarn-not-...

Collapse
 
wezpyke profile image
Wez Pyke

Thanks for taking the time to write that, very insightful.

Thread Thread
 
shelob9 profile image
Josh Pollock

NP. Thanks for the excellent suggestion for a topic.

Collapse
 
southpaw profile image
Alex Gabites

Yarn is also more reliable on managing and upgrading dependencies and it respects the lock file correctly 👍