Contents

bchoy.me ver.1.22474487139...

It’s been a long while since I’ve updated this blog - almost 4 years. During this time I’ve grown immensely and there were many things worth posting here. Unfortunately I neglected maintaining my personal blog to the point where the main domain doesn’t even work.

/posts/bchoy-me-ver-1-22474487139/images/main-domain-404.png

I started a personal project recently that inspired me to start blogging again, until I saw this disaster.

/posts/bchoy-me-ver-1-22474487139/images/directory-structure-original.png
Original Directory Structure
/posts/bchoy-me-ver-1-22474487139/images/directory-structure-new.png
Redone Directory Structure

I didn’t even have a linter back then and wanted to fix this first before adding more content.

Original Purpose

Originally this domain was purchased with the intention of hosting all my personal projects, thus the blog was located on the blog.bchoy.me subdomain instead of the root one. The root domain would redirect to blog.bchoy.me while other projects lived in their respective subdomains. Since this website is listed on my resume and professional social media, I decided to move my hobby projects to other domains and keep this domain as a portfolio that lives on root https://bchoy.me.

Issues

This blog was originally built using Jekyll when I was a Ruby developer. Many years ago I switched over to Hugo for its feature set and ease of use. I’m not a front end developer so I wanted to start publishing content ASAP… so I hardly read the docs and ended up with the mess of a directory structure in the screenshot above. While cleaning up, I figured the whole site might as well be redone.

There were numerous problems due to a combination of neglect and learning over time:

  • Incorrect and non-optimal directory structure.
  • Many posts have incorrect formatting due to not having a Markdown linter.
  • Hugo features not properly being utilised.
  • Images were either too big or too small with no option to enlarge.
  • Code block syntax did not specify a language and syntax highlight was broken.
  • Poor design choices such as font size.

bchoy.me v…?

Similar to NieR Replicant being in between a remaster and a remake, I’m hesitant to call this a redesign.

In preparation for upcoming posts, I’ve made the following changes:

  • Overhauled directory structure and links. Eg. https://blog.bchoy.me/post/2015-02-08-no-plex-zone will now be https://bchoy.me/posts/no-plex-zone. Unfortunately all original links are now broken, but I’ll be surprised if anyone linked to and relied on my posts.
  • Added page numbers. I can’t believe I didn’t have this to begin with. While comparing the existing site to my locally developed one, I had to keep scrolling down and hitting “Older Posts” with no idea how many more there was.
  • The Blog header link now shows all posts. Again I can’t believe I didn’t have this to begin with.
  • Collapsible code blocks for cleaner viewing.
  • Basic search functionality has been added.
  • Dark mode toggling!
  • Smaller preview images and smaller text for better visibility.
  • Image enlarging through lightgallery.
  • Gallery view of images also through lightgallery.
  • Table of contents for posts with multiple sections.
  • Went through every post and fixed up code blocks. Some mistakes are preserved and the content is unedited to serve as a marker of how much I’ve grown.
  • Minify assets when deploying.
  • Create Makefile to build and publish.

Shout out to LoveIt Hugo for making an excellent theme that does all the heavy lifting. I’ve considered trying out other static site generators such as 11ty and zola but LoveIt is great straight out of the box.

Here are some comparison screenshots:

Homepage

/posts/bchoy-me-ver-1-22474487139/images/homepage-old.png
Old Homepage
/posts/bchoy-me-ver-1-22474487139/images/homepage-new.png
New Homepage

Blog Post

/posts/bchoy-me-ver-1-22474487139/images/blog-post-old.png
Old Blog Post
/posts/bchoy-me-ver-1-22474487139/images/blog-post-new.png
New Blog Post

Code Block

/posts/bchoy-me-ver-1-22474487139/images/code-block-old.png
Old Code Block
/posts/bchoy-me-ver-1-22474487139/images/code-block-new.png
New Code Block

Page Numbers

/posts/bchoy-me-ver-1-22474487139/images/page-numbers-old.png
Old Page Numbers
/posts/bchoy-me-ver-1-22474487139/images/page-numbers-new.png
New Page Numbers

Next Steps

Some improvements for the future:

  • Add tags and/or categories to posts.
  • Read Hugo’s documentation more thoroughly and make better use of the extended Markdown syntax, shortcodes, and other features.
  • Custom styling?

For now I’ll be focusing more on adding content and this seems to be a good stopping point.