How I Made This Site

Posted on 25 Apr 2021
Category: Web Development | Tags: commentary, jekyll, totalknavery

Well, this is my first post to this website! Not only that, this is my first foray into using the Jekyll static site generator. What intrigued me about this set of tools, was really being able to separate my layouts from content, having the ability to do some things data-driven, and ultimately manage a blog without the need of any back-end data base technology. Serving this website as static pages is also plus too, since these pages should load pretty quickly! Add in the fact that GitHub has built-in Jekyll support for their GitHub pages hosting, and this definitely became a win to setup the new TotalKnavery website!

This is not my first personal web-space I’ve setup for myself, but that’s some history for a different post :)

What I wanted to write about in this case, is just some of the things I was able to perform and take advantage of for this website using Jekyll, as it truly has been an awesome experience so far. This website is broken up into three sections essentially: Projects, Music, and Blog. For each section, I was able to take advantage of a particular capability of Jekyll that drives how that section works. Just to dive right in and talk about Blog for a moment, Jekyll really does excel at being able to manage blogs and blog posts with just a set of text files. Without going into how Jekyll works specifically (maybe I’ll do a separate post on that in the future), one thing that I wanted to do with this blog setup is to maintain a tag cloud and categories page that relates my posts together. You’d think, how could I do this with a static site generator? Well, the key is Liquid my friends. There are some neat tips and tricks in being able to generate tag clouds just using this markup language. I’ll have to do even another post on how I got the tag cloud setup (building on some work done by others in this space), but let’s just say I was able to automate some of the manual process even further by writing a Python script to generate tag pages for me - all in all Jekyll gives me the ability to manage my blog simply and efficiently.

Now, the Music section of this site, where I’ll post some of the game music and other tracks I work on, was sort of like a blog in my eyes. However, instead of managing posts, I am managing songs where each has its own metadata. Boom, in comes Jekyll ‘collections’. Using collections in Jekyll allowed me to just maintain a markup file of the song details, and that’s it! The layouts I wrote take care of automatically creating a page for each song I upload and show all the details in a decent format. I took the extra step of configuring a simple JavaScript audio player that allows you to listen to the song right on the page. Truly, updating the songs page is as easy as uploading a text file with the song details, and that’s it! (Of course, I have to put the music file itself somewhere too)

Alright, the last section (which funny enough was the first I worked on) is the Projects section. This is simply using the pages functionality in Jekyll, but with a twist. I wanted the ability to show what current projects I was working on, how far along I was on them, links to the relevant places to get more details… one way I could manage all this project data would be to put this in some initial database and manage that going forward. BUT, I decided to take advantage of data files with Jekyll, to the point that, every detail about my current projects is all in a master YAML file that I keep on my PC. This YAML file really became the master “brains” on my current linux setup, because I now drive several scripts and macros based on what projects I detail out in this YAML file. I’ve also written some automation so that when I push new updates to my site, my site automatically grabs the latest YAML project file and updates all the details on the Projects page automagically. This is also a topic that I could give the details on in a different post, but I guess the key takeaway for this site is my entire projects page is managed by 1 pretty standard YAML file, which makes it super easy to automate having the page updated, as well as having this projects file automate other tasks on my workstations! (One day I’ll have a voice-based AI like Tony Stark which will be able to read this file and tell my all about how I’m slacking on my various projects…)

There’s alot I could get into as far as the details go, but I just wanted to give a small plug for how cool I thought Jekyll was in being able to manage my site. If I wanted to give my site a TotalKnavery total makeover (which I’ve done several times in the past), I don’t really have to worry about updating all the content as well as the page layouts, I can focus on creating new layouts and have it populate with all my existing content, since that is pretty separate from how the design aspects of my site are managed. Even the fact that everything is text-file based, and I can hop onto my GitHub repository and manage my website from practically anywhere, with any device is a plus too - I’m pretty excited to keep adding to this website, and for the 5 or 6 people that stumble in here from wherever on the internet, welcome! Hope some of this stuff seems cool, don’t be shy to send a quick “hi” using the contact form - I’d love to see where people come from!

Definitely have some ideas I want to try, both with the posts I make on the blog, as well as the website in general, but more to come! Thanks for reading!