Building my new static site

After a few years of letting my main site, kennygoff.com sit in stagnation, I wanted to give it a bit of a refresh. My main goals were to implement a simple design, host just static files, and follow accessibility best practices. Here I just want to run down the tools and steps I took to hit those goals, and a few takeaways from what I learned.

Gatsby: Static sites with React

I’ve been a fan of static site generators for years after moving away from Wordpress and Blogger, and even dabbled in building one myself a few years ago. The simplicity and speed of hosting static HTML/CSS/JS files always appealed to me over large CMS systems like Wordpress for building basic sites or blogs. When I started doing work in React, one of the first things I looked for was a React-powered static site generator.

I stumbled on Gatsby and it was what I’ve always wanted, and near perfect fit to my needs. A simple structure and easy to generate from pre-processors like Sass and writing in Markdown. Plus it was enhanced to do loading of pages in javascript to enhance performance when available, while not relying on it. All that, and powered by my new favorite UI library, React. Win, win, win. ✓ ✓ ✓

Design

I’ve kept my main site minimalist and clean in design for years. I normally just hack around and design in the browser when designing my personal site, but this time around I did some sketches to try out ideas and then built a digital wireframe. I liked it so I skipped a full mockup and just dove in to code, knowing that it was going to be mainly black, white, and dark-grey.

Pen and paper design sketches *Sloppy handwriting on dot-grid paper is my calling card. *

I like to give certain parts of my sites a little polish and juiciness. Something simple like peppy a hover transition in CSS, a complex Javascript animation, or a little easter egg. It’s those little touches that I find make people remember sites or at least give someone a smile. Animations don’t always have their place, but they’ll always have a place in my heart.

For this site, I added some simple animations to the social platform links at the bottom of my navigation sidebar. Go ahead and mouse over or focus to your left to check out them out.

Accessibility

In the past year or two, I’ve been much more aware of the needs of building software in a way that is accessible to everyone, or at least as many people as possible. This was something that always took a backseat, partially because I didn’t really know what it meant or any clue how to do it. It’s something that I’m still learning how to make it a natural part of my workflow. So making sure I learn about and try to follow best practices is now a conscious part of my development process.

I always do a pass over my web projects with Khan Academy’s tota11y, which does a quick analysis of your site and tells you if certain accessibility tests fail. I’ve been better at remembering to implement those features from the get go, but I still forget to put alt text in my img tags, and have so for the past 8 years. Tota11y makes sure I don’t forget to set my alt text, watch my color contrast, take my vitamins, and call my mom.

Takeaways

Gatsby was a pleasure to work with and I plan on working with it more. The main issue I ran into was that I didn’t realize I needed to end all urls with a trailing slash, otherwise the page will 404, and it was driving me nuts trying to figure out what I was doing wrong. I checked out the GitHub project and it seems to be fixed in the 1.0 release, currently in alpha.

I didn’t do anything drastically unfamiliar in my design, but I did come up with a bunch of cool ideas on paper that I could use in later projects! Plus I went through the process of doing a wireframe in Sketch, something I normally skip on tiny personal projects. But practice is practice!

I’m learning to add a few new tools to a11y testing toolbelt so I ran an analysis in aXe, as well as manually tested screen-reading with ChromeVox. I learned from W3C’s Web Accessibility Tutorial that decorative images that are part of text don’t need role="presentation", an empty alt tag will suffice. Its so simple, yet something I used to never think about.

All in all I had a blast rebuilding my site and finally getting a blog back online!