My 2020 Website Redesign

April 24, 2020

Here it is. The moment you've all been waiting for. Or, at least, the moment my wife has been waiting for so she can stop listening to me talk about this redesign.

Say hello to the new and improved alexandersix.com!

You may be thinking to yourself, "But Alex, your other site looked so good!" to which I would respond, "Yes, it did." But there were a few glaring issues with my last website design and implementation that made it a pain to manage, hard to find, and not suited to serve my new goals. To save you from potentially making the same mistakes that I made, let's take a deep-dive into the reasons behind my significant 2020 website overhaul!

What's new in 2020?

First things first, let's talk about what high-level changes were made to alexandersix.com.

I rebuilt the 2020 version of alexandersix.com from the ground up, so practically everything is shiny and new. Honestly, just about the only thing that is the same from the 2019 version of the website is the fact that it's a static site served on AWS S3/Cloudfront (although honestly, that may be changing very soon).

The most significant change that the 2020 overhaul brought with it was a change in the tooling that I now use to build and maintain the site. Previously, alexandersix.com was made entirely as a Vue.js SPA that got its content by making API requests to a Ghost CMS (EDIT: version 3 of Ghost has come out since I used it last, so I haven't tried that one yet!) backend that I had running on an EC2 instance in the AWS cloud. This time around, I've simplified the entire stack down to a single Jigsaw project that holds everything: the site, posts, configurations, etc.

Moving to Jigsaw brought a lot of benefits along, too. I've talked about that in another post, so check that out if you're interested! To summarize, this website came together in no time and is easier to manage than anything else I've used, all thanks to Jigsaw.

Another (fairly obvious) change that I've made with the new revision of the website is the overall look and feel. It's a massive change from sites I've had in the past, but I'm really excited about what the new styling will allow me to do that would have been much more difficult with the old designs.

It was a pain to manage.

The 2019-version of alexandersix.com was a royal pain to keep up to date, to say the least. There were a lot of little reasons why, mostly involving the wide spread of tools and services that I used to build the site in the first place, but it all ended up resulting in a website that quickly got stale and out-of-date.

First and foremost, Ghost CMS was a horrible choice for my needs. Listen, I'm sure Ghost CMS is actually a fantastic CMS when in the right hands. It looked sleek, the desktop app was surprisingly good, and all things considered, it was an excellent writing experience, and I wish I could have used it more effectively. The issue is that I have little to no experience building, changing, or deploying NodeJS applications. At the end of the day, I figured it out enough to get the CMS going, but I would much prefer to use something that already falls within the technologies that I know how to use.

On top of that, because of the difficulties I had getting Ghost CMS to work, I didn't bother trying to make it work for all parts of the website. Blog posts were created and pushed through the CMS, but all of the other pages were their own Vue.js components. Let me be clear, I love Vue.js; it's a fantastic way to write dynamic JavaScript SPAs. However, it was less-than-ideal to have to write an entire Vue component page for each project that I wanted to add to my portfolio, which took a ridiculous amount of time! I obviously should have architected it better, but that's the system my 2019 brain came up with to get the site out the door as quick as possible 🙃.

Needless to say, I needed a more straightforward solution. My personal website didn't need to be a feat of engineering; it just needed to be my own place on the internet where I could easily add content as I saw fit.

It was hard to find.

When I built the previous version of alexandersix.com in 2019, I was really on a single-page application craze. So really, it's no surprise that I wanted to make my website with Vue.js. This presented a bit of a problem, though. It turns out, SEO is a real issue when it comes to true JavaScript-rendered SPAs. Try as I might, it was perpetually a struggle to get search engines to properly index the site, and getting Open Graph metadata to appear correctly in social media share sheets was near impossible.

Since that point, I've realized that SPAs aren't the golden hammer to solve all of our problems. Who would have thought, right? At the time, I wasn't sure what I was going to do, but I certainly wasn't going to make the same mistake of not having a findable website again.

Enter Jigsaw.

Jigsaw fell into my lap almost accidentally one day, and after reading a bit about it on the Tighten blog, I was hooked. It was the perfect balance that I was looking for: similar tooling to what I already used, quick to develop with, simple, and cost-efficient. And the rest is history, the 2020 version of alexandersix.com is proudly built with Jigsaw.

It didn't serve the purpose anymore.

When I first built alexandersix.com, the purpose was to attract potential clients. For a handful of reasons, that flat-out just didn't happen. Mostly, I had forgotten a key piece to the equation: how were potential clients going to know my website existed? At the time, I wasn't going to "networking events" to try and hand my business card to every person in the room, and even if I WAS, I don't think it would have mattered much. I wasn't creating software that people would know about, because if I had been doing that, I would probably be more focused on the software than client work. My freelance side-hustle was just hanging on a prayer that someone would accidentally fall onto my website and hire me because...reasons?

As 2019 progressed and we moved into this insane beginning of 2020, I've had a change in perspective. Right now, I'm not interested in using my website to rack up clients or sell a product, I'm interested in using it to give back.

More and more, I've been thinking about how much the programming community has given me. Not to get too philosophical or anything, but it's easy for me to believe that without this great community, specifically the open-source heroes who build the tools that I use, I wouldn't be where I am today. At the moment, I'm at a point in my life where I can start to give back to the community and hopefully help other people in the same ways that I was helped. So that's what I'm going to do.

You may have noticed that there's a much bigger focus on content in this revision of my website. That's very much on purpose. Going forward, alexandersix.com isn't going to be a website focused on impressing clients, it's going to be a website focused on giving back to my peers.

I'm really excited about the direction this website is taking, and I hope you are too. As always, if you have any questions, comments, concerns, criticisms, or quagmires, drop me a line on Twitter, and let's chat!

Fellow developers, thanks for the support. Here's to a new year of excitement and collaboration for all of us! Stay safe out there.

The Links.

Curious about things I've talked about in this post? Check out these links for more information:

Join my mailing list!

No spam, just a weekly newsletter with thoughts, discoveries, and cool new things in the world of programming.

subscribe.