My old website was hosted on a Raspberry Pi 3 hosting service run by Mythic Beasts that was affordable and fast enough to run a Minecraft server in parallel. The annual contract ran out this month and I was considering renewing, but my usage of the server wasn’t nearly enough to warrant spending more money on it, hence I decided to cancel instead. My portfolio site still needed a host so I required an alternative, preferably a free one. Enter Github Pages and Hugo, two things I’ve always wanted to try and now have a reason to.

Github Pages is a free service provided by Github that provides webspace for projects and individuals. The catch is that the webpages served by Github Pages all have to be static HTML files. That means, stuff such as Wordpress and Movable Type, which use programs running on the web server to generate web pages dynamicially, don’t work. So you either have to write the webpages yourself in raw HTML, or use a WYSIWYG editor like Adobe Dreamweaver - neither of these options support the content structure of an oft-updated blog. Fortunately, there exists a collection of static page generators that are built for this explicit purpose, and with the advent of Github Pages, are getting a lot more attention from both users and developers.

Static page generators are structured like blogs, but instead of residing on a webserver like Wordpress, they live on your desktop instead. You write your post, save it, then trigger the compilation process to generate a bunch of static HTML pages that can be uploaded to a webhost. Among the many options available, the most popular ones are Jekyll and Hugo. Having played around with Jekyll some time ago for a project website, I wanted to give Hugo a spin instead. Setup on my desktop was extremely simple, but required you to be quite comfortable with the command line. For those of you who aren’t, there are also some GUI interfaces for Hugo and a GUI-centric static site generator called Publii.

With that out of the way, I can now start to build the website. I couldn’t find a Wordpress to Hugo migration tool, so I had do a bunch of manual copy-pasting. Fortunately, I didn’t really have that much content to move. Since posts in Hugo were written in Markdown, the Paste to Markdown tool helped a LOT. I also found a theme that closely resembled how I imagined my portfolio to look like, so I used it as a base to make modifications on. I wanted to change a few things:

• Add image galleries to my portfolio entries.
• Change the theme to something dark.
• Add a blog section to the site.

For the first task, the theme had Lightbox and Masonry scripts included, so I didn’t have to add them myself for the creation of image galleries I needed in my posts. Had to do some digging into the javascript to find out how the theme had implemented the libraries, but after that the implementation was pretty straightforward. The second task required some detective work via the inspector in Firefox, my browser of choice, and some CSS work to implement my color choices. The third task required a bit more work - I had to actually get into how Hugo worked, and implement a second theme within the base one to lay out my blog posts in a list instead of a grid. Fortunately, there are many examples available so the solution wasn’t too elusive. Hugo has Disqus capabilities built in, so I just leaned into that to enable comments for my posts.

The final product is the site you are currently reading this post from. I’m pretty happy with it, and learned quite a few new things.