Using GatsbyJS for this Blog
October 11, 2019
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.
node_modules folder that consumes the world.
> yarn list --flat | wc -l5860
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.
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.
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.
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:
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.