Static site generators: what are they?
First, an explanation of what a static site generator is. It is a tool that generates fully static HTML together with the accompanying JS scripts and CSS styles. A static site generator (SSG) makes preparing the individual pages of a website easier and automates it. For example, when we have a website with dozens or even hundreds of pages and we add another one, we do not have to modify the menu on every single page. The generator automatically adds a new menu item and regenerates all the necessary pages.
Static site generators vs WordPress
Why use an SSG when we have dynamically built websites and a full range of content management systems (CMS), with WordPress in the lead?
Developing an SSG-based website
Building a website with a static site generator looks different, so it is certainly harder for beginners. However, it is fairly easy to learn, and content management can be very simple.
Content management in a static site generator
Content is prepared in separate files (in Hugo and Jekyll, for example, these are .md Markdown files), and the static site generator places this content in templates/layouts, generating the whole set of HTML files. This kind of content management may seem difficult and cumbersome, but there are a number of cloud content management systems we can connect the website to. Then, as in a CMS, we fill in WYSIWYG fields in which we can format our content.
Security of a static site generated with an SSG
We know very well how important website security is, and how problematic it is for dynamically generated websites, where numerous scripts and database queries run on the server before the page appears in the browser. The most publicised security problems are of course those of WordPress, but other systems struggle with them too. You therefore need to protect yourself with daily backups (for online stores, even several a day) and by updating the CMS along with all its plugins/modules.
With a statically generated website, security is almost 100% (bulletproof). No code runs on the server and there is no database in between. The only weak point is our access credentials, for example to the cloud content management system or sometimes FTP. But even then we have the full history of changes to the website, because websites generated with an SSG are usually published automatically through a remote git repository, which stores the full current content of the website along with its complete history.
The speed of a static website
This is beyond dispute. As I mentioned above, there is no code or script running on the server side and no database queries. There are no bottlenecks at all. The website is served immediately as HTML/JS/CSS.
What is Hugo?
Hugo is a static site generator written in Go (an open programming language backed by Google). A great advantage of Hugo is the speed at which it builds a website. Hugo is one of the fastest static site generators, if not the fastest. This matters when a website has hundreds of pages.
Other advantages of Hugo include:
- great flexibility,
- well-made templates available, both paid and free,
- the ability to generate JSON or AMP formats too,
- automatic generation of resized images (srcset),
- unlimited content types (in WordPress, custom post types),
- any taxonomies (categories, tags and so on),
- the ability to use APIs.
Hugo can be installed on Windows, macOS, Linux, OpenBSD and FreeBSD. You can find plenty of information online about how to do it.
Hugo’s structure
A project prepared in Hugo consists of the following folders:
- Archetypes: contains content templates. Here we can define default content for individual content types (posts, pages, custom posts…),
- Assets: this is where you put resources that need to be processed by Hugo, for example Sass files that should be converted to CSS,
- Config: of course, this contains the project configuration, but it can usually be replaced with a single config.toml/yaml file in the project’s root directory,
- Content: a folder containing all the files and folders with the website’s content,
- Data: contains JSON, YAML and TOML files in which we can store additional configuration of our website and repeated content, such as the footer text or any section that appears on different pages,
- Layouts: here we find the templates, in this case HTML files, which determine how the static HTML files are rendered and where individual pieces of content appear,
- Static: here we can put any files that do not need processing by Hugo and will be presented on the website as they are, for example icons, images that do not need resizing for srcset, and JS files.
Hugo’s limitations and possibilities
Taxonomy in Hugo: categories and tags
Like WordPress, Hugo supports categories and tags and lets you create your own taxonomies. A serious drawback, however, is that for now Hugo only has built-in support for flat taxonomies, so we cannot create subcategories. But did I mention that Hugo is very flexible? With a little creativity and the help of the “data” folder, it is possible to create a hierarchical taxonomy. For example, you can create a category tree in a JSON file and then prepare the template to display this tree along with the articles or products assigned to it.
Is sorting and filtering articles and products possible in Hugo?
At first glance it seems that sorting and filtering are only possible on websites where content is served from a database. There, when a user wants to filter or sort the content they are viewing, the process takes place on the server side: a script on the server sends a query to the database, the processing happens at the database level, and the server returns the prepared data to the user.
In Hugo we do not have a database, although this is also achievable if we connect to a database server through an API. We do not have to resort to such solutions, though, when the speed of the website matters to us. Hugo’s flexibility comes to the rescue again: based on the contents of the “content” folder, it can generate not only HTML files but also JSON. With JS scripts executed by the browser and content generated into a JSON file, you can sort, filter and even search content and serve the results to the user.
What kinds of websites can be built with Hugo?
Almost any website can be built with Hugo; we are limited only by our imagination. If we harness the available cloud solutions and their APIs, we can even build an online store in Hugo. This kind of website architecture is called JAMstack. Product content is then handled with JSON files, the cart and its handling with JS scripts, and payments and order collection can be connected through an API to one of the available cloud solutions (such as Stripe or Snipcart).
