Every year or so I get the itch to start redesigning my personal site with the intention of writing more, showcasing more work, and generally creating more things to put on the internet. About six months ago, I started gathering ideas for what exactly I wanted the next iteration of my personal site to be, how I wanted it to be presented, and what I wanted to get out the process.
Growing up as an early consumer of the internet in the late 90s, I had a desire to join the ranks of those creating for this new space. I found my way to a few dozen websites/zines/portals/blogs/whatever geared towards making. I was immediately drawn in and wanted to soak up as much as possible. Many of these sites had a distinct identity of their own beyond that of the author(s) that wrote them. Specifically in the “web design” community, my digital worldview was shaped by the likes of K10k, Stop Design, Daring Fireball, Design Is Kinky, swissmiss, and others. Once again almost twenty-years later, these pioneering sites inspired me to detach my personal home on the web from my own namesake, giving birth to This Modern Web.
This new site is broken down into three different types of content:
Beyond the content that I am producing, I wanted more control over the process by which it is produced. This led me to explore many ways of building this site and my ideal workflows for publishing each type of content. I ultimately choose to go with Gatsby.js as the framework to build this thing for two reasons:
I wanted an excuse to build a JavaScript/React based site and play in all of the possibilities that come with this landscape.
I wanted more flexibility than Jekyll (my previous static site generator) has out-of-the-box. I love Jekyll and still use it for many things, but there are many things that it leaves to be desired for a website in 2020, like processing assets, SEO, a modern data layer, a more dynamic front end, and flexibility in working with Markdown.
Once I got over the initial learning curve of going from the familiar and fairly boundaried world of Jekyll to the unknown and expansive possibilities of Gatsby, I found the experience of building the site to be quite joyful. Thanks to Theme UI, styling the site was felt familiar and much of the heavy lifting that I normally need to do (with utility classes or custom CSS frameworks) was all there for me and completely customizable to however I wanted to setup my design constraints. It’s responsive out-of-the-box and I didn’t have to write one media query. It feels like cheating. And hell, this whole process even finally converted me to a CSS-in-JS disciple.
Of all the new stuff though, my biggest improvement was making the content creation workflow more ergonomic. I was heavily inspired by Muan’s personal site which is purely Microblog / Micropub-based collection of “notes”. I love the idea of a personal site with short low-commitment posts as it harkens back to all those early blogs that had their own “news feeds”. I toyed around with this before on the last iteration of my site, but it never really felt like I had the right implementation. Behind the scenes, I used Muan’s micropub-content as a template for how to build the Micropub standard into a static site-generator like Gatsby as well as a fork of micropub-endpoint to actually handle the posting of content. On the client side, I’m using the Micro.blog iOS app to write the short posts which is as easy as writing a tweet on my phone. The content gets created in the GitHub repo, Netlify automatically deploys it and the post goes live — just like posting a tweet.