Some readers asked which WordPress theme we use. The simple answer: We do not use WordPress at all. WordPress and other big content management systems (CMS) like Joomla or Drupal are extremely overpowered for personal blogs and smaller projects like our InfoSec Handbook blog. In this article, we give a basic introduction to the static site generator Hugo and discuss security issues of CMS.
- CMS vs. static site generators
- Benefits of static websites
- Drawbacks of static websites
- How to use Hugo
Always stay in the loop!
Subscribe to our RSS/Atom feeds.
CMS vs. static site generators
Content management systems allow you to manage digital content. CMS are mostly created for team collaboration and provide ways to search, index and format content. CMS like WordPress are modular and user-friendly. They are easy to install and come with dozens of themes. Users don’t have to write any HTML code.
This may sound like big disadvantages but this is wrong. Static site generators like Hugo only run on your local computer. You don’t have to install Hugo on your server. You don’t need PHP, you don’t need a database. There isn’t even some sort of online account management. See the following picture that shows software needed for CMS and for static websites.
Let’s have a look at security vulnerabilities found in three famous CMS (according to cvedetails.com, 11/10/2018):
- WordPress (278 in total, 9 in 2018)
- Drupal (174 in total, 8 in 2018)
- Joomla (214 in total, 19 in 2018)
However, you need even more software like PHP and a database:
- PHP (574 in total, 18 in 2018)
- MySQL (242 in total)
- MariaDB (74 in total)
- … (additional libraries needed for your CMS, PHP or database)
If you use Hugo, you get 0. Instead of adding more and more security features which have the potential to introduce new security vulnerabilities, you need less software. Attackers can’t attack something that isn’t there. You don’t have to keep an eye on news tickers to learn about the latest security vulnerabilities in your CMS.
Furthermore, Hugo runs offline. There is no Hugo on your server.
Benefits of static websites
In summary, you get the following benefits in comparison with a typical CMS if you use Hugo or other static site generators:
- no need for PHP or databases—attackers can’t hack your database since there is none
- attackers can’t attack your web login since there is none
- your output is pure HTML, CSS and other static files—it’s very unlikely that static content contains security vulnerabilities
- static content can be delivered way faster than dynamic content, so your website’s loading speed is fast
- Hugo generates real-time preview on your local machine—this isn’t only really fast, it is also offline (you can write articles even if you are offline!)
- you can back up your complete website instantly—simply copy all files
- you can use Git for versioning of your content
Drawbacks of static websites
Of course, there are some drawbacks:
- If you use Hugo, you must learn its concepts: folder structures, commands and the generation process
- If you switch from your CMS to Hugo, you may miss some features
- If different people write content, you must find a solution to work collaboratively and synchronize all files (we use Git)
How to use Hugo
Seeing your first website is quite easy: Download and install Hugo, create a demo website and start the local development server.
Most Linux users can use their package managers to install Hugo and there are pre-built binaries for Windows, macOS, OpenBSD and FreeBSD.
Install Hugo and create a new website:
$ hugo new site [name-of-your-site]. This command creates the default folder structure and shows where you can find Hugo themes.
Understand the folder structure
As of Hugo 0.49.2, default project folders are:
- archetypes: Archetypes are like templates that are used when you call “hugo new site”. You can define new templates, if necessary. You can also simply create a new file without using Hugo. Archetypes are optional.
- content: This folder contains the actual content (Markdown files, .md) of your website. You can create subfolders to organize different sections of your website.
- data: This folder contains additional configuration files like “l10n.toml” for multi-language support.
- layouts: This is another template folder for HTML files.
- static: This folder contains static content like CSS, JPG and PNG files. You can create subfolders to organize different file types.
- themes: This folder contains your theme. In general, theme folders contain some of the folders mentioned above, so you can safely delete “archetypes” and “layouts” in your main folder since they are defined by the theme.
There is also the “config.toml” file. This is the project’s main configuration file. You can define custom project-wide variables in this file. Download several themes and study their configuration files to understand its purpose.
See your content in real-time
Navigate to the main folder of your website and enter
Generate your websites
You can directly generate your website by entering
$ hugo --theme=[your-theme]. This command creates a new folder “public” which contains your ready-to-publish website. You can upload its content without any modification to your web server’s main folder. That’s all.
In summary, you have:
- configuration files (like .toml) that define parameters of your website
- theme files (.html) with Go code that tell Hugo how to create your website
- content files (.md) that represent a single page of your website and contain text as well as metadata
- static files (.png, .jpg, .css, .pdf, .woff2, …)
What to do next
- Secure blogging requires hardened web server software and a hardened server operating system, too. Feel free to read and implement our web server security series.
- The default configuration of your web server can be optimized to speed things up. Enable HTTP/2, Brotli compression and apply HTML/CSS minification.
- The whole creation process can be automatized by using shell scripts. For example, we only have to enter one single command that automatically creates, optimizes, uploads and backs up our blog.
- Use Shortcodes. Shortcodes are small code snippets that can call raw HTML files as templates. See the Hugo documentation for examples.
Follow us on Mastodon:
Some people may be convinced that static files are old-school. We don’t think so. You can create a modern-looking blog that is more secure and faster than most CMS-based blogs. You can also heavily modify your theme and add custom functions. Moreover, you need less software on your web server and you don’t have to bother your head about patching your CMS, PHP or your database software.
However, the biggest disadvantage is the complex initial startup. Getting started with Hugo isn’t as easy as creating your CMS-based blog. Keep in mind that Hugo is only one of many static site generators.
- Hugo – the world’s fastest framework for building websites
- Hugo – documentation
- Hugo – themes
- StaticGen – A List of Static Site Generators (for JAMstack Sites)
- October 22, 2018: Added security vulnerabilities in PHP, MySQL and MariaDB.