Finally, a newer site!2019-06-28

Back in 2013, I'd decided to build my personal site using Middleman, which was a Ruby-based static site generator. Since then, my whole world had shifted away from Ruby and toward all things Javascript, and keeping that cranky Ruby environment running was becoming increasingly annoying. I really wanted to leverage some of the powerful new SPA frameworks I'd been working with, but didn't want to lose the deployment simplicity of a static site generator. The obvious answer was GatsbyJS, which provides the full React development environment I'd become accustomed to, and uses GraphQL (which I'd also been itching to use in a project), while still generating a static site at the end so I didn't lose static's deployment and security benefits.

It ended up going together with very few problems, and I was able to peck away at porting the content over whever I had a few minutes to spare. I've got components set up for anything in the interface that's used more than once so I only have to make changes in one spot. The styling (scss) for each component is encapsulated so I don't have to worry about one component changing the style of another accidentally. Gatsby's plugin library has proved to have a ready solution for anything I needed that wasn't built-in.

One issue I still haven't solved though is the standard Gatsby Link component doesn't seem to be fully accessible. In the main navigation, I visually indicate what section you are in by changing the color of the corresponding menu item. For screen readers, I'd like to be able to set aria-current on that item, but Link doesn't support it. It's a minor sin, but one I want to correct at some point, so I'm going to look into what it would take to add it - either officially, or in a clone of the component.

The blog engine dynamically creates pages whenever markdown files are added to the codebase. Each blog post contains a block of headmatter with things like 'title' and 'date' for meta data. Middleman did something similar, so this isn't new. What is new though is that Gatsby uses GraphQL to fetch the data from these posts, and I can do sorting, transform dates into human-readable strings and other cool things using the query language. There's an absolutely amazing GraphQL explorer that runs in the browser alongside the development build and lets you create and run live queries against your site's data so that you can tweak it until you return exactly the data you need before you even start integrating it into the site.

I'm also getting pretty URLs now, so I'll need to do some Apache work to create redirects since I have a number of shope and clubs that link to my trail map and I don't want to break the interwebs.