Hugo - The world’s fastest static website engine

Are you searching for a really fast static website generator and do you want to improve your SEO and web vitals? Then you have to take a look at the JAMstack architecture.

3 Articles

Hugo explained

Hugo is a static website engine and is written in Go (aka Golang). The major benefit of Hugo is how fast the engine works. It is incredible how fast it renders thousands of pages. Hugo is very well supported by hosting services like netlify and comes with an easy to use CLI. Another great thing is how easy the build process fits in. Hugo supports PostCSS, SASS, Babel, minification, bundling, image processing and much more out of the box. Using Tailwind CSS with the JIT compiler is implemented in one row of code.

JAMstack explained

At first JAMstack is an architecture designed to make the web faster, more secure, and easier to scale. JAM is short for Javascript, Api services and Markdown. The JAMstack architecture comes with all kinds of benefits to the website and workflows: security, scalability, performance, maintainability, portability and a great developer experience.

JAMstack projects don’t rely on server-side rendering so you can serve the whole website from a fast and secure CDN. No databases to clone, no complex installs, everything lives in Git.

Let’s get started with Hugo

I want to give you my perspective about Hugo after using this engine in the last few years. This is not a “How to start with Hugo guide”. There are a lot of great videos and tutorials available and I linked you to some of it at the end of this article.

Hugo is a regular application so you can download it from GitHub and it works on macOS (Intel & ARM), Windows, Linux, FreeBSD, and others. You can host the static website on any web server or your favorite CDN. If you don’t want to write markdown by yourself you can use for instance Netlify CMS or Forestry .

Install in seconds, build in milliseconds.

Best tutorials to get started with Hugo

Personally I started to learn Hugo with Mike Dane’s tutorials. Maybe because his tutorials are integrated in the Hugo documentation but I liked the good combination of details and overview.

Introduction to Hugo | Hugo - Static Site Generator

Other good resources to learn Hugo - static website builder

WordPress is dead in 2021

I have used WordPress quite a lot since version 2.5 (Brecker) and I loved the ease of starting a website and customizing it with PHP. Since 2008 I have used a lot of different CMSs and I even developed my own one inspired by formally known as RedDot. But I was always unhappy with portability, publication and testing.

Since most websites are using some kind of build process (PostCSS, SASS, name it), pre-rendering is becoming more and more popular. It started with pre-fetching some API data and storing it in a JSON file. Today with great tools like Google Cloud, Netlify, GitHub or Forestry you can choose the best tool for the specific part you want to optimize. You don’t want to edit markdown by yourself? Okay integrate Netlify CMS or Forestry. You work in a large team and want to have a develop, test, stage and live version? Great, use GitHub with branches and publish it automatically to the location you want it to have.

No more typical WordPress security issues

No more unauthorized Logins, outdated Core Software, SQL Injections, Malware or Cross-Site Scripting. Sounds great right? But is building a static website not a huge step back to the time when every page was “static”?. Well yes and now. In the early day of “the Internet” there was no other way to build websites. Nowadays websites are getting more and more complex to produce, maintain and secure. Dividing the website in smaller, more testable, scalable and maintainable pieces helps to be faster on the market.

With the JAMstack you can separate parts of your website. Do you need a form? Great use Alpine.js or Vue.js and connect it to an API endpoint - Boom! Do you have complex data structures in tables? Pre-fetch is in the build process and let Hugo do the rest. And the most important thing you shouldn’t forget - Hugo ist fast. To give you an example, my biggest website with more than thousand pages and hundreds of to process images gets rendered in 3.7 seconds - freaking fast.

Benefits of static websites

  • Being more productive with the whole write and publish process
  • The fastest performance you can imagine
  • Literally you see exactly what you get
  • Best for SEO optimization and web vitals
  • Backup, version control and build process automated
  • Using open and supported technologies instead of a proprietary database structure.
  • Extremely improved security
  • Great for testing - you can’t run into server-side render issues.
  • Decoupling of API services gives you a greater portability, flexibility, as well as significantly reduced risks.

Most of these benefits are not particular to Hugo only. You get these by switching to the JAMstack in general.

Hugo’s particular benefits

  • Shortcodes inside of markdown files
  • Render Hooks: You can even redefine basic markdown elements like links, images and headlines.
  • Image processing out of the box: You can resize, fit, fill, rotate, resample and filter png, jpg or webp images.
  • Minification: You can switch on minification in production for JS, JSON, HTML, CSS, XML, SVG and in development just no minification
  • Pipes: I use pipes a lot to truncate, markdownify, fingerprint or just to append new elements to a list.
  • PostCSS, SASS, bundling, Babel, fingerprinting, …
  • Save money with short building times
Some of my latest articles tackling Hugo - static website builder
June 2021

Different ways to use the range method in Hugo

The range method in combination with where or sort is extremely powerful in Hugo - static website engine. Learn how to use range for pages, taxonomy or even numbers.
May 2021

Automated image handling and processing in Hugo

Guide for automated image processing in Hugo - static website engine. Learn how to resize and convert images, to speed up your build process and fallback solutions.
April 2021

Different ways to get an image as page resource in Hugo

In this tutorial I will focus on different ways to handle images in Hugo. Learn how to find and select images in every content and asset folder and don’t forget the …

Downside - Hugo’s flip side of the medal

Go templating: Using Go as your template engine language doesn’t feel as comfortable as other templating languages you might use in Vue.js or other static site generators. There is no controller or script part you can use. Every code has to be in one row. Maybe a quite good comparison, it’s a combination of Blade (Laravel templating) and Vue.js with lot’s of “Mustache” syntax (double curly braces)

Less optimal documentation: Another thing is the documentation. It is definitely not the best for beginners. I still struggle with finding the right page to get the information I’m searching for. I would consider it as a functionality first and not developer first documentation means the structure is based on functionalities and not of naturally linked content. The Hugo docu team could get some inspiration from Tailwind CSS or Vue.js and how they focus on real life situations and connected functionalities.

Results - my conclusion

I think WordPress is still a great tool to get your own website online. It is supported by nearly all web hosting services and you can find tons of themes - free or not. Wordpress developers are cheap to get in every place of the world so why should I use a static website builder?

Well maybe not right now but if you want to integrate more and more external sources via APIs and to improve your user experience, then you have to be flexible, fast and secure.

Some of the key benefits of JAMstack

  • Security
  • Scalability
  • Performance
  • Maintainability
  • Portability
  • Developer Experience

All links in a practical list

Related articles

Thoughts, topics or solutions I would like to make available to you, colleagues and fellow enthusiasts.
June 2021

Different ways to use the range method in Hugo

The range method in combination with where or sort is extremely powerful in Hugo - static website engine. Learn how to use range for pages, taxonomy or even numbers.
May 2021

Automated image handling and processing in Hugo

Guide for automated image processing in Hugo - static website engine. Learn how to resize and convert images, to speed up your build process and fallback solutions.
April 2021

Different ways to get an image as page resource in Hugo

In this tutorial I will focus on different ways to handle images in Hugo. Learn how to find and select images in every content and asset folder and don’t forget the …

Various topics

I enjoy diving into the details so, for those who know me personally, it is not surprising that I chose to summarize this knowledge in some articles.