Hugo vs Jekyll

I'm going to tell you about my experience with Hugo and Jekyll here. One of my secret recipes for my website to achieve:

Many people have curious about the back-end or front-end of my website. Here is the answer. This website is static HTML pages. There is a back-end, but it is on my local instead on the server. Powered by Jekyll, then Hugo. So, it is still called client-side rendering but not using any JavaScript library or framework such as React, Vue, etc.

How it works

  1. We install Jekyll or Hugo in our local. They are just like a back-end, front-end, and CMS.
  2. We create the front-end or theme.
  3. We create the content by using MD or HTML files.
  4. It will generate static HTML files.
  5. Deploy the generated files.

History

In 2016, I started to create a website for my profile. So, I can write articles about my works or blog. It should be fast, indexed, and perfect.

Jekyll was quite popular at this moment. It is built on Ruby and used the Liquid template engine. So, I chose Jekyll as my back-end and wrote articles on it. I was happy with this.

I created custom themes and followed Google rules for PageSpeed and SEO. That was how I achieved Google PageSpeed and no error on Google Search Console.

Jekyll

I got into trouble when I tried to create AMP versions of every article. I need to duplicate every article to the AMP version manually. I did a little trick to make AMP pages not listed on the homepage and sitemap. I had no idea how to make AMP versions of pages automatically or in the right way in Jekyll. Please put a comment below if you know the right one.

The second problem came when I made related articles. I wrote long nested code in Ruby or Liquid to print them. It was not a clean code and caused slow performance.

The third problem came when I got a lot of articles, especially since 2022. The build time in my local is about 2 seconds for every change I have. It is slow or heavy because of printing related articles. There are many articles and the calculation becomes double because of the duplicated ones for the AMP version.

Hugo

I decided to move to Hugo because of three problems that I got with Jekyll; AMP pages, related articles, and build time.

Hugo can generate AMP versions of our pages automatically. We only need to put AMP on the output configuration.

[outputs]
  page = ['HTML', 'AMP']

All AMP pages are started with path /amp. You also can specify the layout for only AMP pages like baseof.amp.html, single.amp.html, etc.

Printing “Related Article” is simple. It also does not affect the build performance. Hugo prints related content with similar tags and the same date.

The last one is build time. Hugo is extremely fast. The build time I got at this moment for every change I made is below 10 ms.

Related Articles

Comments

comments powered by Disqus