DEV Community

Cover image for Hexo and Hugo: two useful static generators
Martin Niombela
Martin Niombela

Posted on • Edited on

Hexo and Hugo: two useful static generators

When it comes to creating websites, there are several solutions available to developers: starting from scratch, using a CMS (Content Management System) or using a static site generator. In this article, I won't compare these options, as each has its own advantages and disadvantages.

The subject of this article will be the use of Hexo and Hugo static site generators, which I've already had the opportunity to use. Whether you're a beginner or a more experienced user, a website generator is a really interesting tool for launching web projects quickly, and we're going to take a closer look at it !

Static sites, generators: what are they?

Before getting to the heart of the matter, we need to remind you of a few basic concepts:

  1. What is a static site?
  2. What is a static site generator?

Static site

A static site is a site where all the pages are essentially in HTML and CSS. It is also possible to add Javascript if you want your website to be a little more dynamic. Unlike a "dynamic" site, a static site displays the same page to all visitors who request it.

The advantage of a static site is that it loads quickly. However, the more pages a site has, the more HTML, CSS and Javascript have to be written, which takes time and a certain amount of effort.

Static site generator

A static site generator is a tool that uses configurations and templates to create a static site. The pages are filled with the information stored in the configuration files, laid out by the templates, and then generated in the correct format (HTML, CSS, Javascript).

The generator also facilitates the layout of the different pages of the site by integrating a theme, which can be modified at any time.

As you can see, using a generator speeds up the creation of a simple site by quickly generating the pages, content and layout.

Choosing between Hexo and Hugo

When you search for a static site generator on Google, the first results you're likely to find are comparisons or articles explaining why this or that generator is the best.

The proof : just type in "static site generator".

Photo d'Ilya Pavlov sur Unsplash

Having only tested Hexo and Hugo, I couldn't compare a dozen generators. So let's concentrate on these two.

Hexo

Hexo is an open-source static site generator based on Node.js. It lets you quickly generate simple websites, often used to run blog-type sites or personal pages. You can write articles in Markdown, transform them into static HTML pages, then host them on any server (Amazon S3, Github Pages, etc.).

Hexo also offers customisation via themes available on its site (the "theme" section of the Hexo site lists some very nice ones, by the way), or via a theme that you can create yourself using the documentation.

It is also possible to extend the capabilities of your site using a system of plugins. Plugins can be Javascript scripts you've written yourself, or NPM packages, which can come in very handy.

Hugo

Like Hexo, Hugo is an open-source static site generator, but it is based on the Go programming language and is praised above all for its flexibility.

It has more or less the same features as Hexo, although it has a slightly smaller theme library, and is less popular than some of its competitors on the market (such as Jekyll).

A choice, really ?

When you're looking for static site generators, you often come across articles comparing them, or trying to rank them from "best" to "worst". It is important to nuance the choice of such a tool.

Nuance is important, and that also applies to our choice of tools. Here, I don't think it's necessary to choose just one of the two. Those who have more experience with Node.js can opt for Hexo, if they want to customise their sites. Those who have already manipulated the Go language will go for Hugo for the same reasons. In short, nothing is set in stone.

What's more, it sometimes happens that you come across a magnificent theme available for one of these two generators but not for the other. In that case, it would be a shame to deprive yourself of it because a site has told you that it's "not as good" as another generator.

My experience with Hexo and Hugo

When I wanted to create my own website, I had to think about how I wanted to do it. Not wanting to spend too much time on it, I initially opted for a static home-made site. However, I would have had to do the blog part of my site myself, which led me to look for a way of doing it quickly and to discover static site generators.

Although I haven't mastered the Go language, with experience and Hugo's documentation, it's possible to modify a pre-made theme, which I was able to do for one of my projects. As far as Hexo is concerned, one point that isn't always stressed is that it's a generator whose majority of the community is located in Asia. This virtually inflates Hexo's popularity, in addition to the fact that most themes are optimised for ideograms rather than Roman letters. These themes are rarely documented in English, which also reduces the number of themes available to Western users.

Conclusion

Hexo and Hugo are good tools for developers, but also for anyone who wants to put a site online quickly and without too much effort (or money). What's more, these solutions facilitate certain aspects of setting up a site, such as styling and deployment on a server, which can be a real plus when you want to do as little as possible.

In short, whether it's for a personal project, a course project or to sell a product, these static site generators can really make your job easier. Don't hesitate to use them, and even try out others, like Jekyll, or Gatsby!

Until next time ! 👋

Top comments (0)