Switch to Hugo

Switch to Hugo

Background

Over the years, there have been numerous apps and libs for managing one’s own website. Collectively these can be referred to as content management systems (CMS) and the majority started out as a combination of some programming language paired with a storage backend (database). Some of the more commonly known open source examples might be Django[1] , Flask[2] , Ruby on Rails[6] , Wordpress[3] , Drupal[4] , Joomla[5] , and there are many many more! Most of these appeared on the scene in early 2000’s. Not long after we saw the emergence of “static” site generators[7] , which later Mathais Biilmann, CEO of Netlify termed this approach as JAM Stack[8] , Javascript, APIs and Markup. There are a couple of different ones out there, Jekyll[9] , Ghost[10] , and Hugo[11] to name a few.

From Jekyll To Hugo

A few years ago I switched to using Jekyll with github.com for my blog, mainly because I was tired of paying for server and database hosting. However, I never cared very much for Ruby, mostly for personal reasons which are not very objective or quantifiable:

  • I started with Python so trying to code in Ruby just felt … off to me.
  • The Ruby community always felt smaller than other languages.

Not that I consider Ruby to be inferior, because I’ve known several talented Ruby developers and successful projects built in Ruby, it’s just my personal preference. Also not because I couldn’t hack it, because I spent the last 5 years working as a Site Reliability Engineer where I wrote Chef Recipes (Ruby) to manage some of the custom provisioning for Google Cloud and internally hosted virtual machines. As a result I’ve been intending to switch over to Hugo for a while. Since I recently have some free time, and the motivation to be publishing content, so here we are let’s dive in!

Theme / Site Template

Choosing a template for the new site is where we begin. Initially there were only two requirements I considered, but as I began to search, necessity added a third.

  1. Must be responsive!
  2. Dark theme option, preferably with a toggle.
  3. Demo, can I easily try it out?

I remember when mobile responsive sites were optional, I even remember building a site using tables , but nowadays you cannot even have a respectable site without it. Having a light/dark theme option is a little more recent and being a bit of a night owl means I appreciate not being blinded, or waking my wife who is trying to sleep next to me, with a portable noon day sun on a site that is largely white and bright in my browser. As our search continues, we quickly find ourselves heading over to themes.gohugo.io , where there are a host of options. And as several options are presented the need to take one or more candidates out for a test drive becomes apparent. I don’t know about you, but when I demo something, what I really want is to actually play with it, look under the hood, and see how it works before I come to any final conclusions. Maybe I’m just more curious than most, or perhaps I just take too long and get stuck struggling with analysis paralysis, but this step probably took me the longest!

Eventually, we realize there are additional considerations we want or need …

  • Like what, features, plugins, or extensions does hugo have and does the template already incorporate them?

    • Which are them missing? And how badly do I need them?
  • github.com/gethugothemes/hugo-modules have built several nice modules

  • Most important, where can I get Emoji’s for my website please!

    • … and of course in my case they now also should probably play nice with a light / dark theme
  • Emoji’s please!

    • fontawesome.com icons

Content Migration

tl;dr

$> hugo convert

I tried a couple migration scripts out there, one or two gists on github.com but nothing worked as well as hugo convert and afterwards a little manual clean up. I won’t get into the migration details since it doesn’t interest me at all.

Bug Fix

Found and fixed a bug in the search hugo-module . It’s always fun and rewarding to contribute to the OpenSource community, especially when it is accepted

Conclusion

Overall I enjoyed converting over to hugo. I will say for most there is a learning curve, which largely depends on how well you know golang, I didn’t find it to be that hard. Based on what little I’ve done with rolling my own site I’d recommend one pick one that fits your skill sets, because unless it’s your full time business I personally don’t want to spend tons of extra time fighting to make it work. Unless of course you’re looking to try something new, however in the end I will often say do what works for you!

References

  1. Django (web framework)
  2. Flask (web framework)
  3. Wordpress
  4. Drupal
  5. Joomla
  6. Ruby on Rails
  7. Static site generator
  8. JAMStack
  9. Jekyll (software)
  10. Ghost (blogging platform)
  11. Hugo (software)

Related Posts

Enhance Angular.js Directive - ngRepeat

Recently I started a social Phone Gap project for a client and decided it would be wise to use a JavaScript framework. It was first suggested that I look into Backbone.js. I investigated it and did a little research and digging. I looked at Backbone.js, jQuery Mobile, Ember.js, various others, and Angular.js . The long and the short is I read a slew of reviews, some documentation, a bunch or tutorials, and in the end I decided to go with Angular.js for my framework of choice.

Read More

Super Dad

My daughter, Olivia, has of late been growing like some plant that has been sprayed with Miracle Grow.

Read More

Sliding AJAX Photo Browser

Above is the original photo browser for the print details page on any Instaproofs photographer website. It highlighted the previous, current, and next photo for an event category and the previous and next images were also links to the actual print details page and if clicked would result in a new page request. Very clean, simple, and effective. You could browse the prints quicker with a search or category page, which also resulted in a new page request.

Read More