New Year, New Website, Same Ben

How Hugo and I created this new personal blog.

4 min read Ben Hayes

It was time for a new website…

My old website was created in 2009 during my freshman year of undergrad. While I learned a lot from creating the website from scratch (i.e., all of the HTML, CSS, JS, images, etc.), the most important thing that I learned was how to avoid all of that unnecessary work. You can see a screenshot of my old website here:

My old websiteMy old website 2

Moving on to a new website, I wanted to make sure that it was cost-effective, user-friendly, and satisfied all of my publishing needs. While most people try to ‘trim’ up as part of their new years resolution, mine was to keep my new website lean.

Required Features:

  • Responsive HTML5 Design
  • Simple static pages (about, contact, etc.)
  • Easy to use blogging capabilities
    • Fast performance
    • Low maintenance
    • Markdown (database-free)
    • Categories/tags
    • Pagination

Choices Available:

  • WordPress
  • Medium.com
  • b2Evolution
  • Jekyll
  • Hugo
  • Many more…

I settled on using Hugo because of its reputation, ability to generate pages without a database, low maintenance, and quick turn-around time.

WordPress is too clunky to set-up and behaves as a content-management system (CMS) where I do not need to manage users, comments, likes, subscribes, galleries of images, etc. Medium.com is great but limits how I can display my information and also charges $5 per month. B2Evolution is offered by my host with easy to install scripts but the blogging software is similar to WordPress - too many features that I will not use. In fact, I tried using b2evolution but found myself disabling features (e.g., comments) more than I did creating content. Jekyll and Hugo are similar - both make use of markdown (or ‘blogdown’) to generate static sites. After a quick search, I found that Hugo has cleaner documentation (more on its documentation later) and read that Hugo generates the content faster. These factors made the decision easy - winner: Hugo.

Choosing a ‘look and feel’

Before diving into the inner-workings of Hugo (which I still tenuously grasp), I had to provide a theme for my website. As noted above, building a theme from scratch is often never worth the reward, especially when many great HTML5 templates are readily available online. After some searching, I settled on the Future Imperfect template by (HTML5UP!)[www.html5up.net] as it provides a simple blog template - one that doesn’t distract from my content.

Getting started with Hugo (read: diving into the deep end)

I quickly discovered that Hugo, while simple in nature is much like Django. There is a learning curve. Also like Django - patience, persistence, and perseverance are required ingredients for success when getting started with Hugo.

Installation

Installing Hugo is simple on an Ubuntu server. You must consider, however, that Ubuntu 16 LTS does not have the latest Hugo version. Hugo is evolving quickly (new features added every few months) so it is important to start with the latest stable version. To get the latest version, I used a snap of Hugo.

# This command will install the powerful but lightweight static website generator, hugo.
snap install hugo

Markdown

Once installing Hugo was complete, I needed to familiarize myself with markdown format. Having experience with R-markdown files was helpful, but there are subtle differences.

Pagination

To enable pagination, I relied heavily on the Hugo documentation. I found the documentation to be thorough and insightful. Most challenges that you may encounter on a custom Hugo website were addressed in the documentation, Stack Overflow, or Github pages.

Generation

Once the pagination feature was added, the remaining piece is to generate the site. With a very simple command, hugo will generate the site HTML, CSS, images, etc. and package it in a directory.

# This command will take all of the markdown and convert it to HTML.
snap run hugo

As this stage, the majority of the site structure was complete and ready to generate/publish. I still need to finish the categories and search feature but they will come later. Thank you for reading!