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 👇
Top comments (9)
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!
Thanks for sharing the template. I'll star it and try it out.
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 :)
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
Is there any reason why you prefer Yarn over NPM?
This is a great question, I wrote a post beacuse my answer was going long. tl;dr -
yarn test
is less keys to press thannpm run test
also monorepos and npm inc. worries me.dev.to/shelob9/why-i-use-yarn-not-...
Thanks for taking the time to write that, very insightful.
NP. Thanks for the excellent suggestion for a topic.
Yarn is also more reliable on managing and upgrading dependencies and it respects the lock file correctly 👍