Using a static website generator

Static, Practical, Great

Article from Issue 250/2021
Author(s):

If you only want to put a blog, technical documentation, or a web business card online, static website generators can save you a lot of work.

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.

Obsolete

When searching for static website generators, you will frequently come across obsolete candidates on the Internet. For instance, the formerly quite popular Octopress [6], a fork of Jekyll primarily aimed at programmers, was last updated with the revamped version 3.0 in 2016; since then, the project has been dormant.

GitBook, which was primarily intended for creating documentation, was discontinued in favor of an online service of the same name [7]. However, the source code for the original version is still on GitHub [8].

When searching for suitable static website generators, you will definitely want to pay attention to when the last version was released. Also, to see how active the community currently is, check out its forums and bug reports.

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.

Buy this article as PDF

Express-Checkout as PDF
Price $2.95
(incl. VAT)

Buy Linux Magazine

SINGLE ISSUES
 
SUBSCRIPTIONS
 
TABLET & SMARTPHONE APPS
Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content

  • Jekyll

    Most people starting a blog will almost automatically turn to WordPress, which calls for PHP, a database, and regular security updates … and thus a lot of attention. With the small Jekyll template engine, you can avoid all that.

  • Workspace: GitBook

    Write and publish ebooks with the GitBook software and publishing platform.

  • Tool Tips

    Tool tests on the fast track

  • Introduction

    This month in Linux Voice.

  • Crystal

    Crystal is an open source project that seeks to combine the best of two worlds: the simplicity of a language syntax similar to Ruby and the speed and capabilities of the LLVM platform.

comments powered by Disqus