Mastodon

Switching my blog from Jekyll to Hugo

Jun 24, 2021 by Kolappan N

I recently switched my blog from Jekyll to Hugo. I have been hearing about Hugo for a few months now and almost everyone was really positive about it. I decided to give it a try. It has been incredibly great so far.

Why I made the switch

Jekyll was my first choice when I heard about Static Site Generators. I have been using for a few years now.

One of the main things that I disliked in Jekyll is it’s incredibly long install time & build times. Everyone told me Hugo is fast, but I didn’t expect it this to be this fast. My full CI/CD pipeline will take 6-8 mins for Jekyll and ~1 min for Hugo. That’s huge. Here is a screenshot below comparing the Install & Build times of Hugo & Jekyll.

Jekyll vs Hugo
Jekyll vs Hugo

Things to keep in mind when switching from Jekyll to Hugo

Page types: There are two main page types in Hugo, Single pages & List pages. A blog post is a single page and a blog index which lists all blog posts is a lit page.

Have a layout: You can either use a template or define the layouts yourself. I for one already had a layout based on Bootstrap in Jekyll and wanted to port it to Hugo. With Hugo you need to first define the templates for various pages before running the application otherwise you’ll get errors.

Hugo’s built-in short codes: Hugo has a built in shortcodes for embeding YouTube videos by just passing video id, etc… It’s great. But if you are using Bootstrap or any other CSS framework it won’t look good as the HTML generated won’t use any Bootstrap classes. I recommend writing your own shortcodes.

Extended & not so extended versions: Hugo comes in two variants, Extended and normal. Some functions like SCSS processing cannot be performed in Non-extended versions. Choose the version that suits your needs.

Assets vs Static: Hugo has different Assets vs static folders. Assets are resources that are processed by Hugo for example, SCSS files. Static directory is for files that are just copied over to the output directory.

If you want to try out Hugo, I recommend this checking out this YouTube playlist created by Mike Dane for understanding the basics of Hugo.