Rebuilding My Site (Version 3)


Well, this is embarrassing...

It's been a little over a year since I updated my site. The last time I rebuilt it, I was hoping that it'd be easier for me to maintain and post more. But pretty much a whole year went by without me posting anything. Whoops (🎵 I did it again 🎵). Welp, I've returned once again to tell you that I've rebuilt it for the third time. 🙃

Expand for a long rant about why I'm going down this road again.

y tho?

That's probably fair - I mean we've been down this road before. Why would I rebuild my site for a third time when I barely use it? Well, I've had things that I wanted to post, but:

  • I've been busy with OMSCS,
  • I didn't have a good idea of what I wanted to post,
  • I find writing difficult and it takes me a lot of time, and
  • the way that I rebuilt my site last time wasn't as helpful as I thought.

I'll briefly expand on each of these reasons excuses some more.

One of the primary reasons I haven't been able to post is simply because of a lack of time. OMSCS has demanded almost all of my free time for the past 3 years. It's been a massive time and energy sink for me. At the same time, I've really enjoyed it and have gotten immense value from the experience.

I also never really had a good idea of what I wanted to post. Over the years I've tried using my site for a bunch of different things, such as a personal project showcase, a photography portfolio, a travel/personal blog, and even as a replacement for social media (like for some reason I thought it'd be cool to make a post for my 2020 Spotify Wrapped instead of posting it on Instagram like everyone else). This lack of direction make it difficult for me to figure out what I wanted to post.

Even when I had a topic that I wanted to try posting about, I never sat down to write because I knew it'd take a lot of time that I couldn't afford. Writing is just a difficult exercise for me and one that I'm not very good at, so naturally, it takes me a long time to write.

Finally, my last site rebuild wasn't as conducive to writing as I thought. Turns out that I ended up repeating a lot of the same mistakes, just in different ways. For example, my original site was overly complex with a lot of moving parts and dependencies on external components (like MongoDB). Because of this, I would always face a steep re-learning curve whenever I came back to it after a few months away. I eventually trashed it and rebuilt it using GatsbyJS, a static site generator that I thought would be easier to maintain. But I made the same mistake with this iteration as well. It was unnecessarily complex, and I packed it with too many features, Gatsby plugins, and other dependencies. When I came back to it a few months later, I faced another steep re-learning curve, and many of the packages and plugins that I was using had breaking changes when I updated them. I had just shifted my original problems from run-time to build-time.

Ok, so what?

So I've explained all of the things that have gotten in the way in the past, but why rebuild my site again? What's changed since last time? Not much to be honest. I'm still in the OMSCS program (7 classes down, 3 more to go) and I'm still not great at writing. But I've recently been inspired to improve, and I think I've come up with a better idea of what I want to post (more on this in a later post... maybe). So the motivation to write is there, but my site was still borked and needed to be revamped before I could post anything.

What's wrong with Gatsby?

Nothing! GatsbyJS is a great static site framework with a lot of features and a huge plugin ecosystem. But it's almost too easy to add new features to your site and rely on 3rd party packages. I mean why not, right? Well eventually these packages need to be updated, and if you wait long enough and then try to update them all at once, things will break and you won't be able to build your site 😅.

Gatsby is also pretty opinionated - you typically have to interact with Gatsby and its plugins via GraphQL. When I picked first picked Gatsby, I figured GraphQL was an up-and-comer that would be worth learning, but I haven't used it since. So I forgot how my code worked, how Gatsby worked, how any of my dependencies worked, and how GraphQL worked.

[Insert Mark Cuban "and for those reasons I'm out" meme here]

RIP in peace V2

Before talking about V3, I wanted to share some screenshots of Version 2. Even though it was a pain to work with, I was pretty happy with how it looked.

Home Page

Post List Page (Projects)

Photography Page

V3 Strategy

My guiding principle for V3 was minimalism - my goal was to make my site super simple with a minimal set of features and dependencies. The idea was to remove any friction and make it easy to maintain and publish posts - if something didn't serve that purpose, I didn't include it.

I still wanted to statically generate my site and stick with using a React-based framework. Even though React's probably overkill for a simple blog, it was the tool that I was most familiar and comfortable with to build websites.

NextJS

Instead of using GatsbyJS again, I tried NextJS this time around. I decided on Next because of its lightweight and unopinionated attitude towards static site generation - your components basically just have to implement one or two methods (getStaticProps & getStaticPaths). This made it pretty easy to repurpose the components from my old Gatsby site and reuse them for this one.

On the other hand, this lightweight support meant that NextJS was missing a lot of the features that Gatsby provided. One example is Gatsby's build-time image processing plugin (for generating responsive images). This is a highly requested feature that Next does not currently support, and it's one that I thought would be a deal-breaker for me. However, after thinking about it I figured I didn't need it, so I guess that's another benefit of using NextJS - its simplicity kept me from veering too far out of my lane and making things too complicated for myself.

Final Thoughts

In the end, I think NextJS was the right tool to help me reach my minimalist goals. At the moment, this site only depends on 8 packages, which should be more manageable than the 35 packages that V2 used. The codebase (my HTML/JSX, JavaScript, & CSS) is also a lot smaller - my V2 site had ~2000 significant lines of code while this one is currently sitting at ~500. Hopefully, both of these factors will make this site much easier to maintain in the future and lower the re-learning curve if I ever need to tweak it.

Since I'm only using the SSG capabilities of NextJS, I'm able to keep my current deployment & hosting set up with Netlify. This means that the site will continue to be served from their CDN and reap those performance benefits while still being very cheap to host (and by "very cheap" I mean $free.99).

Overall, I think I've put together a pretty solid setup for myself - the question is if I'm going to use it and post stuff? The historical trends don't look promising, but I'm remaining cautiously optimistic. Hopefully, I'll see you soon in the next post, but if not I'll just see you next year when I write "Rebuilding My Site (Version 4)" and tell you that I'm ditching React and rebuilding my site using just HTML.