Static, Practical, Great

Most websites today are delivered by a content management system (CMS) such as WordPress, Drupal, or TYPO3. While you can conveniently operate these CMSs from a web browser, you also need a scripting language such as PHP and a database running on the web server. This complicates not only installation but also maintenance: Attackers can exploit a vulnerability in the CMS to harvest information or even hijack the web server. Moreover, a CMS only assembles a page when a visitor wants to read it. Dynamic generation costs time and also computing power if there are multiple requests.

Do the Work First

Static website generators take a different approach. They receive the website contents and use a design template to generate the individual web pages. You only have to upload the result to your own web server.

Because the pages are ready for delivery, they require neither PHP nor a database. The web server can also deliver them far faster than dynamically generated pages. On top of that, this type of static site can be stored in a version control system such as Git.

However, a static site generator also has disadvantages: Dynamic functions, such as blog comments, are difficult or impossible to implement. Some website generators such as Lektor [1] or Pelican [2] integrate external services for this purpose, with the comment function then provided by Disqus. In addition, with the exception of Lektor (Figure 1), these website generators do not offer a content editor.

Figure 1: Lektor gives you a convenient approach to entering content in the browser via an admin interface. With other generators, you have to use an external text editor.

Furthermore, because there is no user management, you must restrict access in other ways. Exceptions include Gatsby [3] and Next.js [4], which use an external service for user authentication, such as Netlify Identity. The generated website takes the visitor's login data and then asks the corresponding service whether the user is allowed to see a page.

Spoiled for Choice

When it comes to choosing a static website generator, there are many options, but beware of unsupported options (see the "Obsolete" box). The Jamstack website [5] provides a summary of the available website generators and lets you filter the generators by programming language and license type (Figure 2).

Figure 2: At press time, Jamstack listed no fewer than 322 static website generators.

Almost all generators work along the same lines: First, you place the content to be published in text files. You mark the headings, links, and other elements with Markdown, HTML tags, or some other markup language. The website generators usually expect the text files in specific, predefined subdirectories. Jekyll [9], for example, collects all blog posts in _posts/.

You can put additional information at the beginning of the text files, such as the publication date or keywords (tags). Many generators use YAML notation for this. The website generator then either incorporates this introductory information (often referred to as the front matter) into the website at the appropriate places or triggers the appropriate actions. For example, if Hugo [10] detects draft: true in the front matter, the text file does not end up on the production website. In this way, you can revise the web page draft at your leisure.

Beautified

A design template determines a page's appearance. Themes consist of a conventional HTML framework in which placeholders mark the locations for the corresponding content. The static website generator then integrates the text files into the theme and produces the finished website.

Depending on the static website generator's popularity, the associated community often offers numerous ready-made themes (Figure 3), the quality of which varies. However, the generators all come with a standard theme that can be used as a starting point for your own design template (Figure 4).

Figure 3: Like Hexo shown here, most tools offer a catalog of ready-made themes on their website.

Figure 4: MkDocs comes with a default theme based on Bootstrap, which is also used by the developers on the project website.

Many static website generators do not handle the replacements themselves but leave this to a template engine in the background. The popular Jekyll, for example, uses Liquid [11] for this purpose. In addition to the notation for the placeholders, the template engine also specifies the supported functions. Liquid can, for example, hide content under certain conditions. CSS files take care of the actual look, although some generators like Jekyll include additional tools, such as a Sass compiler.

Website generators usually automatically detect newly added content when called. Because of this, you can automate the process or integrate it in your shell scripts. Almost all static website generators also come with a built-in web server, which supports convenient previewing of the current website status. Most of the time, the generators also simultaneously monitor the project directory and automatically regenerate the site when changes are made to the text files.

Extra Features

By default, website generators derive the URL where a page can later be accessed from the directory structure and file names. With some website generators, such as Hexo [12] and MkDocs [13], you can specify a concrete Internet address (a permalink) yourself. Most generators also support the translation of a website into several languages. Plugins extend the generators' functionality if necessary (Figure 5). With VuePress [14], for example, a search function can be added.

Figure 5: Among Hexo's extensions, you can find plugins that convert images to different sizes or embed music tracks from SoundCloud.

To avoid having to manually insert measurements, addresses, and other datasets into the pages, some website generators such as Jekyll and Middleman [15] import tables that must be in very specific formats. For example, Middleman only accepts YAML and JSON by default, while Jekyll also accepts CSV files. The template engine then helps prepare the data.

Only a few of the website generators let you import existing websites from WordPress, Drupal, and the like. Gatsby and Pelican, for example, advertise this service. As with Hexo, a corresponding plugin usually handles the import.

Language Differences

Due to the similar work approach, the website generators differ only in detail or focus. For example, Jekyll and Hexo mainly focus on blogs; GitBook, MkDocs, and VuePress help you create manuals and documentation. Having said this, they all support flexible use. Jekyll and Hexo can also generate manuals, provided you use a suitable theme.

The biggest differences between these generators are the programming languages and frameworks. For example, the Hugo developers use Go, and Jekyll is implemented in Ruby. These differences also have a direct impact on working with the generators: VuePress lets you use Vue components within Markdown, whereas Jekyll harnesses the capabilities of the Ruby package manager, Gem.

The programming language is particularly noticeable in the Gatsby and Next.js generators implemented in JavaScript. Both also force authors and theme developers to make extensive use of the scripting language and the React framework. Gatsby even uses JSX and GraphQL on top. Because of this, you need the appropriate in-depth knowledge to use these generators. That said, Gatsby and Next.js do offer potential users a particularly large feature set. Gatsby can dock onto Google Analytics, for example, and process payments via Stripe, an accounting service provider.

A bit out of the ordinary, Next.js (Figure 6) not only generates static websites, but it can also assemble individual pages when requested. To do this, it requires a Node.js environment on the server. This requirement is also the prerequisite for some interactive functions, such as automatic image optimization for different screens.

Figure 6: Next.js has many famous users, including TikTok, Hulu, and Nike.

A Sideways Glance at FlatPress

The WordPress-like FlatPress CMS [16] uses structured text files ("flat files") instead of a database to store the page content. The well-known markup languages BBCode [17] and Markdown [18] are available for text formatting. About 60 themes define the look of websites created with FlatPress [19]. If you have experience in web development, you can easily customize the themes based on Smarty templates. FlatPress accommodates users without programming ambitions with a simple installation: You just need to upload the source code and make a directory writable for the system, both of which can be done via FTP. The standard download already integrates 20 plugins, including a spam filter for comments and two image galleries. Version 1.2, which is available as a beta, supports PHP 7.4 and 8.

Conclusions

If your website content rarely changes, static website generators are always a good choice. In particular, blogs without a comment function, technical documentation, or company presentations are all perfect candidates for these website generators.

The functional scopes of the various generators discussed here only differ in their details. If you are looking for a suitable tool, you should primarily be guided by the programming languages you are familiar with. Python experts, for example, should take a look at Lektor, whereas JavaScript fans are more likely to opt for Gatsby or Next.js.