Hugo vs. Jekyll: Which is Right for Your Blog?
Static site generators create HTML sites, with predictable page layouts and content with regular presentation such as blogs. There are many frameworks that can leverage a programming language and allow you to reuse code and process assets for these HTML pages, but this article will compare two of the most popular: Hugo and Jekyll. (For a comparison of a static site and a dynamic site, see Jekyll vs Wordpress)
Why Use Static HTML Pages?
Static site generators are appealing because they produce secure sites requiring little maintenance that are faster to serve than dynamically generated web pages. With dynamic web pages, a web framework installed on a server generates the page a user sees. A user makes a request, the server queries a database, pulls out the information users want to see, combines that data into an HTML page, then sends that page to a user.
With static HTML pages, the pages are pre-rendered, so the server doesn’t do any of the work of building the page. It only handles sending the appropriate page to the user. This means that static HTML pages are faster, and the computing requirements for the server are much smaller; important in cloud environments where you’re charged for computing power.
Static pages cut out the page generation, so the user receives their page much more quickly. Security risks are also smaller because there are fewer moving parts for attackers to infiltrate and exploit. Static HTML pages are easily cached, so they’re well suited to be served from content delivery networks (CDNs), making response times even faster.
Because static pages don’t require servers to perform calculations or query the database, you can deploy them using very simple, low-cost hosting options like an Amazon S3 bucket or GitHub Pages.
Static Site Generators
You could simply write an HTML page and put it on a server, hearkening back to the early days of the web, but static site generators make it much easier to create new pages that use existing templates or modify all of your existing pages at once.
One of the first static site generators to restart this trend in web development was Jekyll. Hugo joined in five years later.
What is Hugo?
Hugo is a super fast, highly secure static site generator that positions themselves as a fun and modern website building tool. It is written in Go and sites can be hosted anywhere. One of the more standout features is that Hugo static sites don’t need a database on runtimes like Ruby, PHP or Python. According to their website, Hugo static site generator “is the fastest tool of its kind” listing average site builds speeds of under a second.
More information on “What is Hugo”.
What is Jekyll?
Jekyll is an open source static site generator written in Ruby by the co-founder of Github, Tom Preston-Werner. It translates plain text documents into static sites that can be used for informational based websites or blogs. It has built-in support for Github pages and is one of the more popular static site generators available.
More information on “What is Jekyll”
Hugo vs. Jekyll
With either generator, you can get a templated blog up and running in under thirty minutes. If you’re starting from nothing, Hugo is slightly easier to install. With Jekyll, you have to install a couple prerequisites like Ruby. Go comes as a precompiled binary bundled along with the Hugo installation.
For both Jekyll and Hugo frameworks, you’d normally write a content file like a blog post in HTML or Markdown. This content gets combined with HTML templates, which wrap and style the content, outputting an HTML file for display on the web.
Both frameworks allow developers to add variables to content, using the YAML markup language, and consume data files in common formats like JSON and CSV. Both frameworks also come with a number of features useful for a blog, like tags and the ability to route content files to finished HTML pages. They are also open source, so you can request changes and contribute improvements.
The first and most fundamental difference between the Jekyll and Hugo frameworks is the language they’re written in. Jekyll is written in Ruby, a popular scripting language that was one of the first languages to come with an opinionated web framework, making it extremely popular for building websites quickly. Hugo is written in Go, which was developed at Google with an eye on concurrent execution, optimizing for deployment in cloud environments where computing power is distributed across many machines.
Each framework also has different preferences about what languages it works well with. Jekyll offers support for CoffeeScript and SASS/SCSS. Hugo supports TOML and JSON markdown in content files, but supporting SASS and SCSS might require some additional setup.
The Template Situation
One of the main benefits of the Jekyll framework is its ease of use, well-developed documentation, and broad support from major organizations like GitHub. Jekyll was released twelve years ago and helped kick off the new interest in static HTML sites. Hugo was released later and is less popular, so it has a less developed ecosystem of plug-ins and templates.
GitHub topics offers a whopping 1,200 themes to choose from for Jekyll, while there are only 370 options offered on the Hugo themes pages (although, you can also create your own themes). Obviously, it’s much more likely you’ll find a theme with the look you want with Jekyll. Jekyll is supported by GitHub, so if you want a simple, no-cost deployment, Jekyll works seamlessly with GitHub Pages, so you can have a simple Jekyll blog up and online very quickly by following GitHub’s excellent documentation.
Another difference between the Hugo and Jekyll frameworks is that creating a brand-new site with Jekyll by running the command jekyll new my-awesome-site installs a basic theme, while creating a new site with the hugo new site my-awesome-site command only generates the folder structure and an archetype file. With Jekyll, you’ll have something to work with right away, but with Hugo you’ll be looking at an empty screen waiting for you to add a theme or custom templates.
This can be great for a totally customized setup, but Jekyll has a much quicker path to seeing content you can work with.
Speed, More Speed
One of the major benefits of using the Hugo static site generator is its speed. Leveraging the focus on concurrency of the Go language means blogs with thousands of entries or tons of images will generate HTML more quickly. That matters if you’re running code anywhere you’re paying for computing power.
It also matters during development, because changes that you make to templates or content are re-rendered more quickly with Hugo. This speed difference is noticeable even at low page counts, but it becomes significant if you’re building a hundred pages of content.
Hugo Bonuses
Hugo offers support for internationalization, providing multiple ways to categorize content in different languages. Hugo also offers image processing, built-in menus, site mapping, and live reloading.
You can achieve the same result in Jekyll, but it’ll take more work to set up. In Jekyll, this functionality comes from plug-ins, but if you’re building complicated pages, it’s nice to have it built-in.
Hosting
Both languages offer options for easy hosting, but Jekyll is the simplest. Jekyll and GitHub Pages have a close, long relationship, and deploying a Jekyll project to GitHub Pages is simple and fast, which can be a great option for trying out a blog with Jekyll.
Hugo also offers many hosting options. For both generators, you have two fundamental options:
- You can run the site generator locally, then upload the results to a server. You can do this manually or instruct some service to grab your updated HTML.
- You can install the static site generator on a computer in the cloud, tell that computer to run the content generation command, then serve the files that process creates. This is how services like Amazon Amplify, CloudCannon, and Netlify all work. These providers all have specific guides for deploying sites, but the deployment process is pretty painless when using either static site generator.
What to Choose
Jekyll and Hugo are both well suited for blogs and other frontend-oriented sites. They generate static HTML pages by combining content written in a markdown language with HTML templates.
The Jekyll static site generator has the fastest setup, more options for templates, and offers an easier experience when getting started, but it can start to feel slow once you’re processing a hundred pages. Hugo’s initial setup is more complicated, but it can handle larger sites with more speed, for example a Hugo blog.
When deciding, think about the languages you’re familiar with, the types of markdown you want to use, and how you’ll deploy the site. If you want to start blogging right away, Jekyll is a great fit, but if you anticipate writing lots of content, the speed and features of Hugo will make your development experience smoother.
By John Gramila
John Gramila is a coder and writer living in Chicago, and one of Draft.dev's first authors.
Want ideas for your next blog post?
Kickstart your content marketing efforts. Download our list of 50+ winning ideas for your company's blog today.