The Failed Personal Website- Part 1: Getting Started

Over the summer, I set out to combine my personal website with my old blog into one place. The initial plan was to take a pretty looking theme, make a few changes and stick with it. That went well until I reached the “few changes” turned into a lot of changes.

Taking a Theme and Making it Mine

For the website, I decided to use Hugo since I felt like doing something different. I decided to use the theme Minimal by Calin Tataru since it stood out. As pretty as it is, the underlining HTML wasn’t semantic since the author used the tags for their style rather than it’s meaning. Fortunately, shifting over wasn’t too hard since it was a matter of changing tags and porting the intended style.

Making My Writing Less Terrible

The next challenge was moving the blog posts from WordPress. I should have just copypasted everything and left it at that, but the writing was so bad I had to fix it.

As I was fixing it, I decided to add commentary in the form of footnotes to improve the flow of the article. This led me to create a definition list in raw HTML for each article, some of which had 15 footnotes.

By the time I looked over the last post, I realized that some flavors of markdown support footnotes without the excessive HTML. For some reason, I didn’t think this was supported and I could pick another markdown processor so I moved on.

Enabling Rich Social Sharing

Have you noticed how sharing a link on social media sometimes shows a pretty thumbnail along with the page’s title and description? This is done through the Open Graph protocol as well as Twitter Cards.

Using <meta> tags, Open Graph allows developers to enable rich social sharing. CMSs usually come with this functionality either baked in our as a plugin. While Hugo has Open Graph/Twitter Card functionality through internal templates, this feature (at the time of coding) was broken and poorly documented leading me to roll my own.

Moving to Jekyll

As of 2019, everything in this section has changed. Hugo now has SASS support, its markdown processor Black Friday now supports footnotes, the complex templating system got better as I understood it better and Hugo includes RSS and Sitemap support out of the box. Heck, I don’t use Jekyll anymore, I’ve shifted entirely to Hugo.

As I was rolling my own Open Graph, my frustration with Hugo reached its tipping point. Noticing the lack of SAAS preprocessor, the absence of footnotes and it’s complex templating system, I switched back to Jekyll. Turns out I was wrong about those things, but more on that in a later article.

Moving back to Jekyll, I could use SASS to make CSS more bearable. I could have footnotes since I could choose from a selection of markdown processor. Heck, I could add plugins! Not that I needed to besides the RSS and Sitemap plugin, but the fact that I could was all that mattered to me.

Now that I was comfortable with Jekyll, it was time to worry about hosting the website.