Designers and developers put a lot of time and effort into creating a web project. During the journey from initial idea to finished product, there are many decisions to be made, plans to be devised, as well as there being the possibility of having to start all over again. Mock-ups and wireframes are important tools that can help in the early development phase when creating simple prototypes of [...]
Static site generators: creating your own minimalist web project
Offers on the internet are characterised 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 customise the visual appearance (whole homepage or individual contents) based on events noticeably increase the added value and play an increasingly important role.
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 characterised 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:
- 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 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.
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?
|Licence||Language||Template engine||Website/project page|
|Hugo||APL 2.0||Go||Go Templates||gohugo.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.