Building my new static site
📣 Future Kenny here! ⏳
Update May 2020: This post is referencing an old design but 4 years later I'm still using Gatsby! I've rewritten and refreshed the design a few times since this post actually 😬. I've also fully designed this current site in Figma, check out all my tools in /uses. And I no longer forget to put alt text on my images 😎
After a few years of letting my website 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'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.
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.
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.
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!