09/05/2017

Tags: jekyll liquid static site generator blog

geemichael.com is here, and it’s beautiful.

Well, sort of. It looks no different, but it’s a lot better than it was before.

Two weeks ago, I took it upon myself to open the godforsaken codebase of this website to make some updates. I quickly found myself knee-deep in spaghetti code, copy-pasting line after atrocious line of ugly, ID-specific HTML text, finding hacky solutions to buggy CSS I never had time to fix, and sending it all away to some unlucky Bluehost server to parse.

It was while trying to fix a rogue right-floating image that I decided enough is enough. Time for a website rewrite.

Previously, I was shelling out a comparatively hefty chunk of my wallet to Bluehost for its web-hosting service. Don’t get me wrong, Bluehost is great for businesses and services requiring a server-side backend. Unfortunately, there were a couple of things that bothered me.

PHP Backend

Bluehost is old. Like, 2003 old. It got early traction, exploded from there, and since then has injected tons of bells and whistles into their product, making it more robust and efficient for both naive and veteran users. It’s safe to say that Bluehost now provides a behemoth of a service.

Unfortunately, all of that went to their backend language PHP, and they never added support for other server-side languages. I’m a big fan of Node and am now dabbling more and more in Flask. My lightweight Arch Linux machine makes development in Javascript and Python easy compared to the hulking Visual Studio software Windows users lug around. While PHP is certainly a feasible option to develop in, building this website was in and of itself a project in learning web development, and I didn’t find learning an outdated technology particularly interesting.

Static Websites

More importantly, I wasn’t even using most of the technology Bluehost had to offer for geemichael.com . My site is a portfolio for showcasing my artwork and code projects, not an interactive form-submission and data-processing system. The service was simply too hefty for my needs. Having something lightweight and easy to manage locally was a must for me.

Money

And of course, it’s not free.

Jekyll and Github Pages

As part of a push to encourage student engagement in computer science, Github offers one free static web-hosting server for each Github account. The site offers “unlimited” storage (within reason per Github’s repository rules). Github Pages is also closely integrated with Jekyll, a static-site HTML generator running on the templating engine Liquid and Sass. This was especially interesting to me because:

Familiar git workflow with version control
Templating: goodbye copy-pasting, hello YAML files
It's free!

And what a good change it was. Suddenly, masses of art-panel divs were reduced to a single for loop, naming conventions for titles and footers are now uniform throughout the codebase, and any time I need to add or remove data information, I can edit a much easier to read set of YAML files. The version control is a major plus to my workflow, and Github sends me an email if there is ever an error during Jekyll compilation. The biggest bonus of switching to Jekyll, however, was that I now have the tools to start something I’ve always wanted to do.

The Blog

Jekyll’s main use is for writing blogs easily and quickly. Simply by designating a template, I can write a blog post in a markdown file (or have it generated by some richtext formatter), compile it in Jekyll, and have everything easily published onto my website in a few minutes. This has quickly become the most exciting aspect of my website rewrite. Now, I’m not only maintaining a shrine of self-glorification, but I’ve also built up the infrastructure to allow me to share my thoughts with the world. :)

Final Thoughts

So, welcome to the new geemichael.com. While it’s still pretty chunky-looking, I’ll be having a much happier time touching up the design aspects in between breaks during the semester. The process of moving over was relatively painless; Jekyll is an easy-to-learn tool, and my domain name was purchased under NameCheap, so there weren’t issues with halting my Bluehost subscription. Better yet, I came out of this with a whole blog section, allowing me to document all these wonderful things I’ve learned!

My CSS is still pretty ugly though, but I think that would be true regardless of how I wrote my website.

geemichael 2.0

Why Bluehost Wasn't Right for Me