in Web 520 Words

Static site generators

I’ve recently built another static website with Jekyll, a popular static site generator. Static websites, in opposition to dynamic websites do not connect to a database or execute server-side code.

Rather they are generated on the developer’s machine from files and then published as a static site. Generators automate part of the process by creating HTML files from data and allowing for code reuse. They use special markup and can include other files, use variables and generate complete pages using only local data.

In this simple example, a code generator could reuse this HTML file multiple times substituting {{ page.title }} and {{ content }} allowing us to create many pages with the same basic structure and <head> element without having to duplicate this information on every page.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{ page.title }}</title>
<meta name="author" content="Gilles Leblanc">
	<link rel="stylesheet" href="./css/main.css">
	<link rel="shortcut icon" href="./img/favicon.ico" />
</head>
<body>
{{ content }}
</body>
</html>

In many situations a dynamic site isn’t needed and going static can save a lot of hassle. Generators even support creating blogs, where apart from the comments section, you can actually get by with a static site (and for comments there are external services available that you can embed in a static site like Disqus).

Going with a static generator has many advantages:

  • Speed. Since the site is serving plain HTML and CSS files it’s blazing fast. No need for database connections, connection pools, starting a process or interpreting any code.
  • Security. Again having no server side code or databases reduces the attack vector on a site.
  • Cheaper hosting. I use GitHub repositories to publish most of my static generated sites and thus don’t have to pay anything for hosting. There are also other free hosting solutions (like Neocities which I haven’t used). It’s also possible to pay only for a domain name and have it redirect to the freely hosted GitHub site.
  • Allows for the reuse of headers and footers. This was the reason for my first foray with static generators. I wanted to create a static site and I wanted to keep things DRY. I didn’t want to copy header and footer code on every page. Going with something like ASP.Net, Rails or PHP seemed overkill for a simple project with no need for a database.
  • Localization. Working with a static generator allows to create files with all the localized text of a Web site and then define the HTML code in a separate file. Upon generation, one page is created for each language in the localization files. That’s what I used to create a localized site for my personal consultancy NP-complet. I’ll detail the technique I used in another post.

You can use Top Open-Source Static Generators to find static generators. I can recommend Jekyll for most purposes.

Leave a comment