TODO: Build a blog

I’ve had a personal website up for some time now, but it has been really basic. Just a landing page with a brief bio and some work experience. As a software engineer, I was honestly kind of embarassed by it. A personal site should be a demonstration of my capabilities, not a boring letter.

My personal site needed lots work.

Counter to that, I’m really busy. I work for a wonderful company, I have a growing family, and I have lots of other projects calling for my attention. All that to say, reworking my site was more of a “want” than a “need”.

Defining requirements

As an engineer:

  • I need a site that can be built quickly and be easy to maintain.
  • I need a modern tech stack that will demonstrate my skills.

As an author of content:

  • I need a site that is easy to write content for.
  • I need a site that looks appealing for my readers.
  • I need a site that is easy to navigate.

Technology

I wanted to use a modern static site generator for my new blog. Since the primary focus of my career is front end web development, and I typically focus on React JS, Gatsby JS was a natural fit.

I have significant amounts of experience working with styled-components and building reuseable components from mockups, but I’m not a gifted designer. I opted to use Tailwind CSS to help create a clean and lightweight theme.

Since I find it natural to write using Markdown, I definitely wanted to use MDX in my blog. MDX is such a powerful tool. Mixing plain Markdown with custom React components is awesome!

Challenges

I’ve been working with the new blog in my free time for a day or two, and I’ve got to say I’m really impressed with how quickly it’s come together. Gatsby is conceptually different from any other toolset I’ve used, but the docs are very helpful and there are plenty of excellent example projects to draw from.

I lightly explored using Gatsby a while ago, but didn’t dig in enough to fully get my head around it. When I tried before I found it very cumbersome and confusing. This time around though everything has fallen into place very nicely. I’m certain that some amount of it was just time dedicated to understanding, but I’m also sure the tooling has gotten much better over that time too as the team building it has been very busy.

I’m especially happy with the styling. I have helped build a few component libraries and even a comprehensive design system, so I’m no stranger to working with raw CSS. For this project I chose to set up twin.macro so I could easily use Tailwind CSS with styled-components. This is a combination I’ve not used before but am rapidly growing very fond of. The tooling is great, and the styles are awesome. A full component library felt too heavy for this project, but Tailwind feels just right.

Summary

The code for my blog is available on my Github. Feel free to check it out. If you have questions, suggestions about how I can do things better, or just want to say hi, reach out to me on Twitter.