Static site generators: creating your own minimalist web project

Offers on the internet are characterized not only by their thematic variety, but also increasingly by their functional diversity. Dynamic elements that allow visitors to interact directly with the page or customize the visual appearance (whole homepage or individual contents) based on events noticeably increase the added value and play an increasingly important role.

The use of interactive components that can be implemented with the help of databases and server- or client-side script languages such as PHP and JavaScript isn’t practical for every type of website, though: Small internet sites like blogs, company sites, or private homepages can also present themselves well with only static content without making their visitors forego basic functions. For the implementation of static web presences, developers are often using static site or static website generators, which considerably simplify the programming process thanks to premade layouts and website components.

What is a static site generator?

Static website generators (sometimes also called web page generators) are finished code frameworks on the basis of which static website can be created. As opposed to content management systems, which typically store content in databases and HTML code on the server side using script languages like PHP, static site generators create HTML code locally on the developer’s computer (or in the cloud). For this purpose, all necessary components are stored in a well-structured directory, which is generally characterized by the strict separation of layout and content. This makes it possible for users to make changes to the design of the web project at any time without influence on published content. Most generators contain a template engine for this, with which layout templates can be created.

Installation and operation of a static site generator functions over the command line. The actual website content is written in markup languages like Markdown, with corresponding editors either integrated into the software or – if necessary – downloaded manually. To publish the website, all you have to do is transfer the automatically-generated web code to the desired web space. By using metadata at the beginning of the files (often referred to as “front matter”), the generator makes sure that the website is displayed in the visitor’s browser. Instead of the directory being uploaded to your own web space, it can also be stored in a content delivery network (CDN).

What are the merits of a static website?

Static web presences are naturally reminiscent of the first days of the internet, when pop-up ads represented the maximum degree of interactivity. Today, websites are often more than just information platforms, which is why dynamic elements are also an important factor for the success of a web application, and are not to be underestimated. In certain cases, like the previously mentioned blogs or company pages, though, the mere transmission of information remains the center of attention. Content management systems and homepage building kits are also suitable for these types of projects, but static site generators have decided advantages when compared to traditional solutions:

  • Speed: Projects that are created with a static website generator are characterized by outstanding performance. Since they’re only put together with HMTL and sometimes CSS and JavaScript code, clients or browsers have an easy time with the interpretation: Resource-intensive database requests are no longer necessary, which means that each request can be answered without detours by the server. Caching of contents is also very easy, which saves additional time when the page is accessed again.
  • Content version control: While the content of dynamic web projects is saved separately from the code base in the database, the content of a static website is typically stored in simple text files. Structurally, the content elements don’t differ from other components of the code base, so version management can be set up without any problems. For example, both the code framework of a blog and individual blog entries can be managed in a GitHub directory. In particular when multiple people are responsible for the content management, it makes it easy to keep track of any changes made. With GitHub Pages, the developer platform even offers its own package of version management and static site generator (in this case: Jekyll).
  • Security: Another advantage of websites created with static website generators is that they offer few points of attack – as opposed to content management systems like WordPress, for example, that already have inherent security gaps and need to be updated on a regular basis. Above all, static web projects benefit from the fact that they fulfill their purpose without requiring database access or user interaction and authentication. The complete risk potential is limited to the individual access by the client when the page is called. Since this usually doesn’t deliver much more than the structured HTML pages, the probability of unwanted access is reduced to a minimum.
  • Simple server maintenance: As a software package, a static site generator also has its own dependencies that need to be fulfilled. The number of necessary components is comparatively small, but they’re only relevant during the development process. While other solutions require various modules, databases, libraries, frameworks, and packages for live operation and therefore require regular updates, the generated static pages are only bound to a functional web server at the time of publication.
  • Good traffic management: Web projects with dynamic elements usually have problems with unexpected traffic surges. An increased number of visitors can be compensated in part by caching mechanisms, but the server will still quickly reach its limits if many requests are linked to database queries. Websites that are programmed with a static website generator have visibly fewer problems with high visitor numbers: Delivering static HTML pages only demands minimal server resources.

The weaknesses of web page generators

While the previously mentioned advantages of static pages – such as the outstanding delivery speed or high security factor – can’t be denied, there are definite reasons why a static site generator is unsuitable for larger projects. A significant factor is the enormous maintenance effort: Work with a generator not only requires broad knowledge about Markdown, HMTL, and more, but also lacks numerous automatisms that are taken for granted in content management systems and homepage building kits. The following weaknesses can also be detected when using static website generators:

  • No real-time content: A static site generator offers no possibilities to create dynamic content (recommendations, price updates, full text search, etc.). Elements that are automatically adapted to the respective user by evaluating real-time data can only be implemented using detours: for example, with client-side scripts (especially JavaScript). This means that there are potential vulnerabilities that could pose a threat to the web project as well as its visitors. Many users have blocked JavaScript and other script languages in their browsers so that content would remain hidden from them.
  • Tedious utilization of user input: Another problem of the missing server scripts becomes clear if the web project should also allow user input in certain situations (e.g. with a contact form). If you want to link static pages with such an offer, you can’t avoid using JavaScript or the support of third-party services. The DISQUS platform can also be used, for example, to add a comment function (including moderation and spam management) to static website generator projects – but this service also relies on JavaScript. The GitHub pages mentioned earlier also offer a comment function, which is closely linked to version management and evaluated on the server side. In any case, the temporal and technical effort required for the implementation of these user components must be classified as relatively high.
  • No standard user interface: Static site generators don’t have an in-house interface with which new content can be added or existing content can be modified or deleted. WYSIWYG editors help with writing the necessary markdown code and inspecting the result in advance using the preview function, but don’t eliminate the need for manually-uploaded finished files to the server. This process is particularly difficult for editors who have little to do with the actual code and structure of the website, which is why it takes much more time to get started than with a CMS such as WordPress, for example.

Overall, it can be said that projects based on static sites mainly have weaknesses where actuality, change, and user interaction are required. Should

  • Content be edited regularly,
  • functionalities be added retrospectively,
  • user input be processed, or
  • visual modifications be made at any time and with minimal know-how,

then solutions like building kits and content management systems are preferable to the minimalistic static website generators.

Tip

If you want to opt for a more user-friendly alternative due to the mentioned weaknesses of static site generators, the 1&1 MyWebsite homepage building kit is a suitable and powerful entry-level solution. The use of various design templates and functions is associated with additional server and database queries though, as mentioned before. In this case, the created websites can’t reach the performance and security standard of a generator project.

What are the popular static website generators?

The number of static site generators has increased considerably in recent years. On GitHub, you can find project directories for various open source solutions that can be used free of charge for the creation of your own website and modified as needed. An overview of the most popular providers is offered by staticgen.com: The site lists the various options alphabetically or sorted according to GitHub stars, forks, or issues (optimization suggestions/tasks). The website frameworks can also be filtered according to foundational programming language (e.g. Ruby, Python, C, C++). The following table presents the most important generators (aside from JavaScript) based on the StaticGen information:

  License Language Template engine Website/project page
Jekyll MIT Ruby Liquid jekyllrb.com
Hugo APL 2.0 Go Go Templates gohugo.io
Pelican AGPL Python Jinja2 blog.getpelican.com
Middleman MIT Ruby ERB/Tilt middlemanapp.com
Expose MIT Bash custom github.com/Jack000/Expose
Cactus BSD Python Django github.com/eudicots/Cactus
Lektor BSD Python Jinja2 getlektor.com
Octopress MIT Ruby Liquid octopress.org
Hyde MIT Python Jinja2 hyde.github.io

With more than 31,000 stars and 7,000 forks, Jekyll is the undisputed #1 static site generator on GitHub. This may also be because the Jekyll framework forms the basis for the official hosting service of the developer platform GitHub Pages. The generator, published in 2008 by GitHub founder Tom Preston-Werner and written in Ruby, is also one of the oldest in its trade. The rendering engine Liquid is responsible for generating the HTML code. Our guide delivers detailed information as well as a tutorial about creating projects with Jekyll via GitHub Pages.

Since 2013, the Hugo generator developed by Steve Francia has also been attracting attention (more than 20,000 GitHub stars and 2,700 forks). As opposed to Jekyll, Hugo is written in the programming language Go, which was developed by Google employees. On the official homepage, the Hugo team has more than 100 finished themes that can be used as layout and design templates for the implementation of your own website. The static website generator also offers the feature that it already contains its own web server for delivering HTML pages.

 

Even if the other generators listed in the table, such as Octopress, Middleman, or Cactus, don’t have the same width of distribution as Hugo or especially Jekyll, a more precise test can be worthwhile – whether due to other programming languages or a different template engine. Because of their minimal program size, the different providers can be ready for testing in no time at all, allowing you to conveniently search for the website generator that’s best suited to your skills and needs.