Upgrading Gatsby

Originally this blog was generated by Jekyll, then a little over a year ago I converted it to Gatsby. Since then Gatsby's moved from v1 to v2, so I want to detail the steps I went through upgrading.

What's New

According to the blog post about v2:

• Sites build faster
• The JS core is smaller
• The React dependency moved from 15 to 16
• Improved support for accessibility

and more, which you can read at the above-linked post.

Upgrading

So, following the docs, first I upgraded Gatsby:

npm i gatsby@latest

then my Gatsby packages:

npm i gatsby-link@latest gatsby-paginate@latest gatsby-plugin-google-analytics@latest gatsby-plugin-google-fonts@latest gatsby-remark-prismjs@latest gatsby-source-filesystem@latest gatsby-transformer-remark@latest

Then, since react and react-dom are no longer part of the gatsby package:

npm i react react-dom

I then had to go through the plugins and check whether the docs recommended installing extra dependencies for them. The only one that applied was gatsby-remark-prismjs, which required prismjs. I could also remove gatsby-link since it's now part of gatsby. This meant updating my index.js to import Link from Gatsby.

Testing

I'd already installed the Gatsby CLI (npm install -g gatsby-cli): to start the dev server, I ran

gatsby develop

What I got was an unstyled homepage, without the sidebar. So, the next step was to import the layouts page and wrap my index, page and post pages with it. I then changed the query in my layouts page to use StaticQuery. Just to clean things up, I removed any GraphQL query names and the query keyword where applicable.

Code formatting

The final problem was the code formatting. For some reason, anything between backticks was being strangely formatted with a black background, while code blocks, which were correctly highlighted, nonetheless had a different font (Consolas instead of Courier New). Probably not surprising since my previous version of gatsby-remark-prismjs (the syntax highlighting plugin) was 1.2.9, while the new one is 3.3.18.

The first problem was solved by adding noInlineHighlight: true to the options for gatsby-remark-prismjs (this wasn't available in the older version).

My solution to the second problem was a bit hacky. I created a css file to override the prism package's styling:

code[class*="language-"], pre[class*="language-"] {
    font-family: Menlo, Monaco, 'Courier New', monospace;
    font-size: 14px;
}

...then imported it in my layout file.

Here's the final code.