Goodbye Jekyll; Hello, Hugo!

Published on Apr 29, 2021 | Updated on Apr 30, 2021

That’s right. Goodbye Jekyll; thank you for your faithful years of service, but I’ve got to move on! But don’t get me wrong — Jekyll is an amazing tool that can be used for building blogs, sites and what not; but, I’ve come to the point where I’m drawn away from Jekyll to Hugo. Here’s why.

#1: Speed

Hugo is written in the compiled language Go while Jekyll is written in the interpreted language Ruby. No matter how hard you optimize code, Go will be faster than Ruby (unless you decide to do something intentionally). But again, don’t go into the language wars; always remember, programming lanugages are merely tools and it is you who is reponsible for using them correctly.

Just for comparison-sake, a typical template render will take:

~350ms on Jekyll
~25ms on Hugo

Now if the speed of renders is not a matter of concern for you, then this point isn’t important.

#2: Simplicity

This might sound counterintuitive, provided that setting up Jekyll with GitHub Pages is a matter of click and upload (albeit some push and pull, but you get the point). But the thing with Jekyll is that you need to install Ruby, RubyGems, GCC and Make. Not only that, you might also need bundler to manage gems.

Compare that to Hugo which only requires you to download a binary — and you’re pretty much done! No silly dependencies here and there (for a basic setup).

#3: Themes

Jekyll does have a giant collection of themes, provided it has been around for a long time; but Hugo’s easily searchable Theme Marketplace is a selling point for me, where I can easily search for themes.

#4: Rapid maintenance

Hugo has a very active community where people ask and/or answer questions on an almost daily basis. At the same time, the team behind Hugo releases versions with new features and bug fixes very often.

#5: Shortcodes

Hugo’s shortcodes are one of the best things for lazy folks (and that’s somewhat me, especially when I can be lazy). It avoids the need for adding raw HTML for, say YouTube video previews. Instead of writing this:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe src="https://www.youtube.com/embed/w7Ft2ymGmfc" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
</div>

You can just write this:

{{% < youtube w7Ft2ymGmfc > %}}

Final words

Both Hugo and Jekyll are extremely popular static-site generators. Both of them generate pure HTML/CSS (in most cases), and hence produce very fast websites. Both have great plugin/extension ecosystems. Just like languages — these are mere tools; your focus should be on writing great content and not worrying about the underlying tooling infrastructure!