Skip to main contentKathleenMcMahon.devKathleenMcMahon.me

Tackling the 100 Days of Gatsby

Published: January 01, 2020 | 6 min read

New year, new challenge! Last year was a very busy time that included traveling to many interesting places speaking about accessible React component libraries and design systems. After I ended the year with a bit of rest, I decided to start this year by continuing to dig deeper into some of my favorite new topics: JAMstack, and MDX.

Why I'm doing this challenge

Currently, we're using Gatsby for documenting our design system, so I'm pretty familiar with how to get started and using Gatsby for projects. Lo and behold, I noticed the 100 Days of Gatsby Challenge come across my Twitter feed. Oh yes, this is a project where I can dig in and have some fun!

The purpose of this challenge is to encourage users to learn all the wonderful ways you can create a site using Gatsby through a curated set of weekly prompts beginning on January 1st. My first time using Gatsby was in the spring of 2019, so I chose to do this challenge for a few reasons:

  1. The learning curve seemed a bit steep when I jumped into the Gatsby.js tutorials last year, so I wanted to follow the prompts this year to compare the progress of what I learned, determine if there was anything still unclear in the documentation, and capture it to provide feedback and make some contributions back to the code base when I'm done.
  2. I have a site or two that I want to refactor to use a more modern stack, and this is the perfect opportunity to use what I learn to do a refactor, and write about it. Well more than two sites need a refactor — I like making sites, OK?! Don't judge.

So here we go... the beginning a series of posts that document what I learned from these set of challenges.

Challenge 1: Create a Gatsby Blog from Scratch

Tutorial Parts 1 and 2

I started by following the steps in the 8-part tutorial and Tutorial parts 0 through 2 were straightforward. One thing I did to smooth out my workflow at this point was to update my Visual Studio Code files: AutoSavesetting setting to onFocusChange so my work would be automatically saved when I moved to work on another window. I also made sure my formatting setting was set to Format on Save so the Prettier extension I have installed was formatting my code properly.

Tutorial Part 3

During Tutorial Part 3 I got a bit stuck when I reached step 4 and received an error in the Terminal. The command line interface (CLI) alerted me that my app could not find React after running gatsby develop. What I noticed — after some digging — was that by following the instructions literally, I ended up using both npm and yarn package managers at once. I then chose to use npm only going forward in this challenge.

Mixing package managers in the same app can cause issues, and not knowing this can trip up users who are new to npm and yarn in general. Armed with this knowledge, I decided to open a GitHub issue on the Gatsby codebase, capturing a summary of what was going on and the motivation of why this would be a great addition to the docs.

I got a bit busy with my other life commitments before submitting an official pull request (PR), so the documentation was updated by the Gatsby team and the issue closed before I got a chance to make a submission. If you're curious, here is the GitHub issue I submitted to Gatsby.

Tutorial Part 4

During this part of the tutorial, I noticed my VS Code linter complaining about the syntax I was leveraging in my code from the your first GraphQL query section, yet the code was still working. I wondered which IDE setting would fix this and started fiddling around with my settings. Ultimately, changing the language of the selected file from JavaScript React to GraphQL and then back to Javascript React did the trick, and all syntax errors disappeared. The rest of Tutorial Part 4 went smoothly.

Aside: When digging into to docs code examples demonstrating how the createPages API and the createPages action work:

export default ({ pageContext: { pokemon } }) => (
  <div style={{ width: 960, margin: "4rem auto" }}>
    <h1>{pokemon.name}</h1>
    <img src={pokemon.sprites.front_default} alt={pokemon.name} />
    <h2>Abilities</h2>
    <ul>
      {pokemon.abilities.map((ability) => (
        <li key={ability.name}>
          <Link to={`./pokemon/${pokemon.name}/ability/${ability.name}`}>
            {ability.name}
          </Link>
        </li>
      ))}
    </ul>
    <Link to="/">Back to all Pokémon</Link>
  </div>
)

Those Pokémon examples for mayyyyyy be confusing for… anyone who didn’t grow up playing Pokémon. Possibly changing the example to a less cultural reference may benefit a wider user base.

Tutorial Part 5

I noticed some of the key commands didn't work for me in the Introducing GraphiQL and Source Plugins page sections:

Pressing Ctrl + Space (or use Shift + Space as an alternate keyboard shortcut) [in the query area] to bring up the autocomplete window didn't work, yet using Ctrl + Enter to run the GraphQL query worked for me, though.

The instructions on using GraphiQL improved as this part of the tutorial progressed.

Tutorial Part 6

The question I had during this section: Frontmatter... what is it? I've seen it used in Markdown and MDX files, I needed to learn more about it.

Tutorial Part 7

Another question came up during this section: Slug. What is a slug (aka, a pathname for content) and why is it important?

Update Hooray! A description for a slug has been added to the docs (as of 3/28/20).

After modifying the gatsby-node.js file and running gatsby develop again, I received this notification in the CLI:

info: One or more of your plugins have changed since the last time you ran Gatsby. As a precaution, we're deleting your site's cache to ensure there's no stale data.

Hooray! Looks like gatsby cleans site cache automatically now. Or does it? I seem to have to still run gatsby clean whenever I make changes to gatsby-config.js gatsby-browser.js or gatsby-node.js.

The 7th inning stretch

I took a quick break from the tutorial to focus on improving the semantic structure and accessibility of the site. The links weren’t presenting visually as links, so I fixed that and added proper headings and landmarks to the site structure.

Running a Google Lighthouse audit revealed a missing lang attribute for the <html> element and a missing title attribute for the page <head> element. I started digging into codebase to see if there was a template to modify, or if I should use react-helmet. I then decided to continue to Tutorial part 8 to see if this was addressed.

Tutorial Part 8

Yep! Looks like React helmet was used for injecting lang and title attribute information, along with the gatsby-plugin-react-helmet plugin.

I’ve been pretty new to Progressive Web Apps (PWAs), creating manifests and offline support other than cursory knowledge. I’ll dig into the links in the docs to learn more later.

Aside: Ooo... that SEO component config in the Add Page Metadata section looks really nice. I had to learn how to adjust settings for title prop and description prop, though, to fit my needs.

Question: does the SEO component need to be added to every component?

That wraps up Challenge 1. It was definitely a good refresher for getting started with Gatsby, and now I'm ready to take on the 100 Days of Gatsby — Challenge 2.

Back to top