Skip to main content

Using GatsbyJS for this Blog

· 4 min read
Garo Yeriazarian
Garo Yeriazarian
Software Whisperer

As is tradition, the first post on a blog should talk about how the blog was created and setup. However, against tradition, I did not build my own blog site from scratch. Instead, I was looking into GatsbyJS and JAMStack style generators, and I really liked the plugin approach. What tickles the software developer in me is the GraphQL based query system that's baked into the core of the system. It allows you to add levels of abstraction to the content that you source through plugins, and query subsets of the data at compile time that you can then render into views at browse time.

GatsbyJS is (as the name suggests) written in JavaScript. This allows it to do some really neat stuff with the huge library of JavaScript modules out there and use them in different ways to achieve results. It also means that any GatsbyJS project will be plagued by the same black hole node_modules folder that consumes the world.

> yarn list --flat | wc -l
5860

That's 5,860 packages on my system that are used to build this website. It's a good thing SSD's are standard, otherwise I'd need to setup a nightly defragmenter job just to keep things moving at a reasonable pace. </GetOffMyLawn>

If you're interested in peeking under the hood, the source code and the site content are all hosted on my GitHub.

The site uses GatsbyJS Themes and customizes the theme example produced by GatsbyJS to demonstrate this functionality. Their documentation site is quite exhaustive and easy to get around. They have an easy "getting started" guide that will get you familiar with the syntax and the structure of everything and will walk you through a simple setup of your own blog-type site. My website here is based on a more complicated example that took more time to slog through and understand.

Thematic Structure​

No, this isn't suddenly a paper for English class. The structure of the different theming elements is important to know to understand how this works. As far as I can tell, there's some webpack Dark Voodoo Magic™ that implements the "Shadowing" of the different theme files.

  • garoyeri-dev-site
    • gatsby-garoyeri-dev-theme
      • gatsby-theme-blog-core

In theory, any file from the lower levels can be overridden by the higher levels and "shadowed". You can read more about GatsbyJS Shadowing on their site.

Caveat Emptor! It seems (at least as of this writing) that only packages that start with gatsby- can be shadowed. I ran into a nasty issue where nothing was being shadowed properly and I was getting a cryptic error message about my GraphQL queries not being compiled. Changing my base theme to be prefixed with gatsby- fixed the issue.

Also, some files can't be shadowed, and forking the theme for myself seemed like a better approach to let me muck around the details. At some point, I will get frustrated enough with how the core code was done and fork that for myself as well. All my changes and customizations will be available on GitHub in case you're curious, I don't plan on turning this into a reusable theme, but just a way to generate content for myself without needing to put all the "theme" goodies into it.

Yarn Workspace​

The site is my first time using Yarn and it's remarkably snappy (NPM was slower to process). Both Yarn and NPM can do workspaces using a top-level package.json file that has a few entries and a workspaces element to list the details. See mine here: package.json.

Wrap-Up​

This was a bit of a mishmash of topics to get me started. I plan to write more about my experiences in a variety of technical topics around software, DevOps, cloud, and whatever else comes to mind.