Generate a Static Website: Hugo VS Jekyll (Comparison)


Generate a Static Website: Hugo VS Jekyll (Comparison)

Building a website is no longer a pain, if you know where the current world stands at. And that point is for those who know their way around. See, for newbies out there jumping on this train can be hard, and sometimes you may get a soft landing. But that depends on which resources you will be relying on. Setting up a website using WordPress is the easiest way for those who didn’t know. But we know, not everyone prefers the WordPress way. But the good thing is, there are many alternatives out there.

If you want to build a static site, for example, you can use other Content Management Systems available on the market. But WordPress is yes, a single alternative.

We have these two common apps popularly known for their exceptional ability to build static websites. Yes, even in a world where most sites are dynamic, there is still a need for static websites. This applies to writers and content creators who need a website to showcase their talent without merely having a cluttered website. 

In this article, we compare Hugo and Jekyll. A brief background about Hugo is that it is based on Golang. Hugo has been nicknamed as the ‘Easiest Static Site Generator.’ Is that true? Well, we shall look at that soon, spare the curiosity now. Moving on to Jekyll, it is based on Ruby – which comes with its own advantages as well.

In the end, we will see who wins this, and that will be our recommendation to you. Here is a summary of the whole article.

Summary

Hugo and Jekyll have differences that should count when you want to choose one of them. In this article, we have covered all the essential features you should consider, like the speed of build, development workflow, hosting, content management, and ease of use. Apart from this, your willingness to learn also counts, especially for the case of Hugo. But that means that Hugo has many baked-in features that you can use even without using plugins, and there is no extension support. For Jekyll, this is user-friendly but takes a lot of time to build a static website. Hugo is fast, but it gets complicated once you want to customize your site. In terms of themes, Jekyll supports a plethora of themes that are ready-made to use.

Hugo Vs Jekyll: Features

Build Speed

Build speed is a crucial factor to consider for those who want to build a website with tons of web pages. Between Hugo and Jekyll, the former is faster in building sites. Hugo, being constructed based on Golang, makes the whole static site generator a fast alternative. Hugo can create thousands of web pages in a few seconds. As compared to Jekyll, Hugo is way faster. Jekyll lags on speed due to the language it is built on – Ruby. According to forest.io, who performed a benchmark to determine the faster static site generator between the two, Hugo was between 23 and 63 times faster than Jekyll! Forest.io says they used the two site generators to build websites with 10 pages, 100 pages, 1000 posts, and 10,000 posts. That does not guarantee that Hugo is the best alternative here. That depends on your needs as well.

Themes

Hugo has tons of themes to choose from. If you want a site generator with tons of themes for a large number of options, then Hugo is the right alternative. Hugo has over 100 different themes that you can use on your site. On the other hand, Jekyll also has tons of themes to choose from. In comparison, Jekyll has way more themes than Hugo.

Content Management

Despite the two being static site generators, they also think it will be best for you to have a blog aside from the static pages. Jekyll, on its part, has various inbuilt features to help you create a fully-featured blog. The blog has the standard blog features like pages, posts, categories, drafts, permalinks, and more. It is good to note that the posts have no dates; however, just mysterious the way some people may like it. But in general, Jekyll is not as hard to get a hold on than Hugo. Jekyll is more like WordPress CMS but with little tweaks.

Hugo gives you all the freedom you ever wanted around creating pages and posts. That makes the platform extremely powerful. But that also delivers a new challenge – ease of use. Hugo is not easy to use. The company has even a well-documented page for that. We know it is not easy to get this for the first time, but just keep learning you will get the hang of it as you proceed. Hugo supports both HTML and Markdown content formats. It features two markdown formats. Both featured in Go – One is the naming your files *.md or set markup = “markdown” in the front matter. Second is using its fork Mmark, so you name your files *.mmark or set markup = “mmark” in the front matter. With Hugo, you can output files in different formats part from just HTML. You can use JSON, OML, and YAML, as well. In Jekyll, it only supports YAML for the front matter.

Well, simply put, before you opt to use Hugo, be ready to spare some good amount of time in learning how things work here.

Plugins Supported

Jekyll has the edge over Hugo on the number of plugins supported. That is because Jekyll is written in Ruby. As a result, Jekyll has a large community of plugins supported. With the extensive ecosystem, you can create anything on Jekyll by just relying on a few plugins to get the job done quickly. 

As compared to Jekyll, Hugo just relies on its in-built features for the most functionality. Using the shortcode support, for example, you can port some features in your Hugo site like embedding YouTube videos. But that still depends if your content fits in Hugo’s site flexibility. If not, that will be a drawback, and you probably want to use Hugo. However, you can create your shortcodes, too, if you are willing to dig inside Hugo’s extensive documentation page.

Development Workflow

Working with Hugo is the best thing. Hugo is fast and executes commands way better than Jekyll thanks to its built-in live to reload server. Hugo allows you to make changes to your site using your local IP address, after which it will rebuild your project and reload the browser automatically. On the other hand, Jekyll’s development workflow is more user-friendly and way better than working with traditional CMS’. It is built-in with a development server, so all you have to do is run it by calling bundle exec Jekyll serve. Just like in Hugo, you can build your static site using Jekyll on your local IP address, but you will have to reload the page for your content and templates to be updated.

Hugo Special Features

Apart from all the similar features compared here are some of the Hugo features;

Cross-platform support

Using easy installation, Hugo can be installed on different platforms such as on macOS, Linux, Windows, and more.

Hosting

Hugo allows you to host your site anywhere. This has been a success, thanks to Hugo’s automated deployment solutions. For example, to host your static website on AWS, Digital Ocean, Google, Azure, and more… you will have to use Host-Agnostic Deploys with Nano box. For GCS, S3, or Azure, you can leverage on Hugo Deploy, Hugo’s own CLI.

Open Source

Hugo is open-source. As a result, it is a free software to use.

Jekyll Special Features

Hosting

Jekyll provides free hosting on GitHub. That does not mean you will be restricted from using a custom domain. Jekyll will host your website on GitHub pages, and you will still enjoy other privileges like free hosting with your custom domain name. With the free GitHub hosting, you can host custom domains like a www subdomain, Custom subdomain like blog.example.com, and also an apex domain like example.com. However, keep in mind that GitHub often recommends using a www subdomain, even if you also use an apex domain.

Small Comparison Table

Who is this for?

Static site generators are for those who want to create static websites. This mostly applies to freelancers and is a simple way to help them showcase their freelance portfolios.

Pros and Cons

Hugo Pros

  • Very fast
  • Rich in functionality out of the box
  • Enterprise ready

Hugo Cons

  • No assets pipeline
  • No extensions

Jekyll Pros

  • Rich theme library
  • GitHub Pages Integration
  • Rich plugin library

Jekyll Cons

  • Slow Builds
  • Heavily relies on third-party plugins for more functionality

Pricing

Hugo is a free static site generator you can leverage. Everything is free here right from hosting to even using the platform’s themes. This is because Hugo is an open-source platform. As a result, the tool is free to use and also provides hosting for free, and most importantly, all the themes are free to use.

In the same way, Jekyll is also a free static site generator.

User-Friendliness

Jekyll is easier to use, unlike Hugo. Especially if you are familiar with Ruby, you will have an easy time getting the hang of Jekyll. Although the installation process is slow, it is the best alternative if you are aware of Ruby. For Hugo, it is easy to install thanks to its GO framework. But the general user experience is not great. Hugo is not easy to use. You will have to read through the documentation pages, which you will likely not get the hang of for the first time.

Integrations

Jekyll supports the following plugins;

  • Assets 3
  • Picture Tag
  • Site map generator
  • Feed
  • Scholar
  • Jemoji
  • Gist
  • Twitter
  • Mermaid
  • SEO tag
  • Typogrify
  • Time Ago
  • MD5
  • Roman
  • Hawkins
  • Admin
  • Planet
  • Data
  • Readme Index
  • Title for headings
  • Archives
  • Tagging
  • Octicons
  • Image size
  • Cloudinary
  • YouTube
  • Geocode
  • Textile and more

Support

With the two platforms being free and open to use, you can’t expect great customer support. Unless its for money, many companies provide customer support as a tertiary need; in fact, its more like a bonus or worst out of empathy. Hugo has a documentation page that you can utilize to learn it. The same case applies to Jekyll.


The Verdict

It is finally time to make a choice. The answer here depends heavily on your needs. Somewhere in this post, if you have read through, we said that Hugo is most appropriate to you if you mind fast build speeds. And also, if you want to build many pages. Jekyll is a great choice if you wish to create pages with a smaller number of contents. Jekyll also has a large number of supported plugins, a great variety of themes, and is also beginner-friendly. Oh, and Jekyll also supports extensibility thanks to its support for extensions. Hugo does not support extensions, and what you will have to rely on is the built-in features. Hugo is although heavily customizable, and that will be of much help if you spare yourself time to learn its tiring documentation pages.

So deciding between the two depends on the basic features available on both like the speed of build, development workflow, hosting, content management, and the ease of use.

Recent Content