Fresh Start: A Brand-New Website

In November 2018, I woke up one morning and noticed that I had not published any content on my website for over 2 years. That was bewildering to me as I had ideas for articles, but I was lacking motivation to write any of it down. Then it dawned on me…

I loathed WordPress. I didn’t like the editing experience, the platform was cumbersome to maintain, and quite frankly the only reason why I even had a WordPress blog is because it was low effort to set up. Back in 2015, I bought a theme, provisioned a VM, installed WordPress, and that was that. Since then, I dutifully paid my hosting fees month after month while my showcase to the world was left to rot.

It was time for a change. I wanted a website where I could blog, and showcase my photography in an easy to read and navigate package. But where to begin?

A Blank Sheet

At that point, I knew I wanted to leave WordPress behind. I needed goals beyond that. I ended up writing the following requirements list:

• Hosting must be cheaper than the previous WordPress solution

  My previous website cost me US$25.00/month to host. While not expensive by any means, it was still money thrown out the door every single month for something I barely updated.

• The website must be fast and fluid to navigate, with sub-200ms response times for most pages

  That one is pretty much a given. That said, the reason why that requirement was in the list was to strengthen the requirement about hosting costs. When a site doesn’t perform as expected, there’s always the possibility to throw money at it by investing in more powerful infrastructure. I didn’t want to do that.

• The website must be SEO-friendly

  Discoverability is super important if you want to build an audience, therefore having an SEO-friendly website is important. I’m taking about crawlability here, not content optimization.

• The authoring experience must use Markdown or a Markdown variant

  I love Markdown. I’ve been using it for years for project documentation and note-taking purposes. It’s a quick, efficient format that was broadly supported in many applications. It even had a standard implementation: CommonMark. It seemed like the perfect choice to be able to quickly author articles without having to deal with discreet markup languages or pure HTML.

• Maintenance/upkeep must be easy

  Having to log into a server every few weeks to update WordPress or a plugin due to yet another security vulnerability was quickly becoming a chore I didn’t enjoy. I did end up writing a bash script that did most of the work for me automatically, but I still had to manually verify that everything was working after an update. It was a pain.

• Deployment of code and content must be possible using CI/CD pipelines

  Continuous integration with WordPress, when also including content, is close to impossible to do properly out of the box. I wanted a workflow that allowed me to push code and content to a staging environment with a simple git push.

Looking at the requirement list I had just written, it wasn’t long for me to come to the conclusion that having a static site generator that would transform my Markdown files to HTML pages would check all the boxes.

It didn’t take long for me to stumble upon Gatsby. This static site generator had most of the features I wanted. It was able to take Markdown files as input and transform them into HTML pages based on templates I would author. It had a built-in image processor to quickly resize and optimize image files. It rendered pages as build time as to be SEO-friendly. It was the perfect fit, and so began the work…

The Long Road Ahead

The progress was initially slow. 2018 had been a pretty challenging year for me, and I was struggling to find any motivation to work. Plus, my first task was to decide on an art direction for the look and feel of the new website. I was never artistically inclined. I’m as cartesian as a person can be.

I took the easy route of simply designing something that was similar to my WordPress theme. For the first year, this is exactly what I started doing, using Bootstrap. However, by the end of 2019, I grew frustrated with the lack of progress I was making and ended up scrapping everything and restarting. At the time, I thought I was frustrated by the lack of flexibility Bootstrap offered, so I started redesigning the exact same thing without using a CSS framework.

What a terrible idea. I ended up wasting another year. By December 2020, it was clear that Bootstrap was not the issue. I just didn’t like the simple fact that I was re-implementing a design that just didn’t fit me anymore. What did I do? I SHIFT+DEL the whole thing, and started again from scratch.

Entered Tailwind CSS, which allowed me to come up with a design that I was happy with very quickly, with minimal effort. 2021 was focused on redesigning all the pages, writing the content, upgrading Gatsby from 2.x to 3.x… I’m quite proud of the design I came up with. It has both a light and dark theme (which ended up unsurprisingly doubling the amount of work), pretty strong code highlighting capabilities based on Visual Studio Code’s highlighting engine (thanks to the incredible work of Andrew Branch), and puts my content front and center.

After another slump in motivation that lasted throughout the months of February to May, here we are: a brand-new website built using the following: TypeScript, React, MDX, Gatsby, and Tailwind CSS.

I managed to meet all my requirements above. This new website has a near perfect score in Lighthouse, which is great news for my performance and SEO requirements. It costs mere dollars to host, greatly reducing the monthly cost of owning a website (more on that in a latter post). Most importantly, it looks good and fits with my personality.

What’s next?

Expect some content to be posted semi-regularly. I’m currently aiming to write at a minimum one article per 3 months. While it may not seem like much, I prefer to set myself realistic goals. Stay tuned for the next article which will be about how I managed to meet my objectives of reducing my hosting costs by leveraging Amazon Web Services and by going serverless.

Do you like this redesign? Please let me know via Twitter or by sending me a message through my contact form.