I recently decided to migrate my personal website to use Hugo instead of the Vanilla JS, HTML, & CSS used by my previous site. Jump to the second section for a quick how-to.

–

A Little About This Site’s Predecessor

Inspired by Brutalism, my previous personal site was pretty barebones. Including little more than links to my contact information, a resume, a few lines about myself and my work history, I figured it needed some updating to appeal to potential employers or recruiters clicking the link provided on my resume.

Screenshot below:  

The new site is a huge improvement, both visually and functionally. Featuring a cool interactive terminal that can be used to learn more about me and a new blog, it’s way more content-rich.

Much cleaner:  

As I migrated, I figured I might as well add a blog (mostly focused on tech topics, sometimes deviating from that to include general thoughts or life updates). Using Hugo, this was trivial and I was up and running in minutes. In fact, settling on a theme to use as the base for my blog took longer than creating the site itself. I’ll show you below:

–

Installing Hugo and Creating a Site

Not going to spead a whole lot of time here as this portion of this post has been done countless times by others doing the same thing. The quick start guide on Hugo’s own website is pretty digestable and user-friendly enough for novices to follow. It’s probably a good idea to read through some documentation on Hugo’s site anyways to see how to use different features. My next post on Hugo will likely be more informative to most, as it documents how I was able to use two different Hugo generated sites on different portions of kashishpatel.com.

First, install Hugo using the relevant command or your OS. I’m using a MacBook Pro on macOS Mojave (from early 2015 - post on replacing the SSD with new 1TB NVMe drive coming tomorrow, 5 year review coming soon) and I already had homebrew installed, so for me it was easy as running the following command.

$ brew install hugo

Then create a new site:

$ hugo new site SITENAME

Next, you’ll want to add a theme. Lots of options (with demos!) browsable here.

For my blog, I went with Anubis with a few CSS changes. I used a modified version of Devise for my personal site (random tangent - the name reminded me of the massively useful Ruby gem that makes authentication of Ruby on Rails sites a breeze). If you plan on making some changes to the theme, it might be worthwhile forking the repository and then using git submodules add on your forked repository.

To add the theme, cd into the the themes subdirectory and add the folder for the theme using git submodules add or git clone.

Now edit the config.toml file to include theme = "THEME_NAME" and set differerent parameters for your theme (more info on what to set or an example should be available on the theme’s site or github).

Finally, add content using hugo new posts/POST_NAME.md, edit the markdown file, and serve it up using $ hugo server -D, the -D being for drafts enabled (theres an option at the top of the markdown file to set draft equal to true or false). Point your browser to localhost:1313 and you should be greeted with your new Hugo site!

A key functionality of Hugo and similar tools like Jekyll is static site generation. This can be done by running $ hugo -D. Look in the public subfolder and you should see your generated HTML files ready to serve up using the host of your choosing. Personally, I stuck to GitHub Pages as my previous site was already setup there. All I had to do was replace the contents of the repository and my fresh site was up and running.