The world of static websites

In the world of complex frameworks and CMS platforms a new trend is gaining popularity. More and more people prefer a completely static site to a dynamic one, whether it’s a simple homepage, a blog or a portfolio.

What is a static site?

A static site brings us back to the good old times where people used FrontPage and Dreamweaver to just put together their simple homepage. When you needed a new news item, you’d duplicate an existing one, replace the contents, update the news list page and upload the new site via FTP. This was a plain and simple flow that was manageable to almost everyone and didn’t require any special programming skills. The site was fast and secure and didn’t rely on databases or PHP running on the server.

In essence, the same applies to a modern static site. The only difference is that the manual work needed for updating a modern static site has been significantly reduced by templating and data files.

Who are static websites for?

A static site is an option worth considering for those who want a relatively simple homepage or a blog that doesn’t require complex search, dynamic content or forms but needs to be fast and secure. While most static site frameworks have their simple online editing interfaces as well (similar to WordPress), the truth is that static sites need a bit more technical knowledge, both for setting up the site and for updating the content. Depending on the generator the content manager may need to have basic knowledge of Ruby, Python, Node.js or some other technology and feel comfortable using the command line to generate the site and manage its plugins.

The main reasons to go for the static site is speed and security, as mentioned before. Dynamic sites fetch their data from databases and generate pages to display to the visitor on the fly. All this takes time and can cause an overload in case of a sudden peak in traffic. If a site uses a mainstream CMS, you can be sure that it’s a target to malicious hackers trying to attack it through security holes.

Using a static site means the server only has to serve static html files and there is no database to drop or forms to use for submitting malicious code. A static site doesn’t depend on packages, libraries and plugins that require constant updating and may not be compatible with each other or the webserver. It’s much more complicated to exceed server limitations on a static site as it doesn’t connect to databases.

Another benefit for static sites is the ease of version control and collaboration. For most mainstream CMS platforms all site-specific configuration and content is stored in the database and versioning that is a difficult mission. Even though you have the capability of creating regular backups it isn’t comparable to having whole configuration and content in Git, including news, blog posts and whatsoever. There is no need for expensive and yet not bulletproof tools to merge databases from development environment to live environment.

What are the limitations?

The biggest argument against using a static site is that it’s static. This means it’s not capable of having any real-time data. So static sites are not a solution for booking systems, e-commerce, trending data based on visitors’ behaviour on sites, advanced recommendation systems, etc.

Visitors to a static site can’t add their own input: comments, logged-in user areas or even simple contact forms can turn out to be a challenge.

As described earlier, managing a static site requires somewhat more technical skills and knowledge. Many static site generators fetch their data from Markdown files (text content) or as JSON objects (configuration, structure, looping elements’ data). This may be scary in the beginning but it is not overly complicated.

While setting up the static site development environment might not be the most user-friendly process, it’s a one-time job. The generation process is usually much easier.

How to create a static website?

There are 50+ tools to use for static site generation. Just as it was a trend to have your own CSS grid framework created at some point, it seems that nowadays it’s a must to create a static site generator. When choosing a static site generator, it’s worth considering several factors:

Static site generators

Most static site generators use Node.js, Ruby or Python for installation, running it locally and generating the site. A few rely on Google’s Go, Elixir, React or Erlang. While it’s possible to set up any of the generators on Windows, Linux or Mac, some tools are optimised for a certain OS and it’s often Windows that isn’t officially supported.

The main focus of the generator

Some static website generators have a small niche to focus on. For example, DocPad and Slate are for generating documentation, Expose and Sigal are for photo galleries. Some generators introduce themselves as a tool for blogging but just like WordPress they can be “abused” to create complex websites.

Quality of documentation and community support

Making a static site generator fit to specific requirements can be a tricky task that requires some out-of-the-box thinking skills. In the search of technical solutions, it’s helpful to have good, detailed documentation with code examples at your hand. Less thorough documentation can be compensated for to some extent by a strong community. If there’s a community support forum, Slack channel or users answering related questions on Stack Overflow, there’s a good chance you won’t be alone with your own questions.

Extensibility

If you plan to use a static site generator for something more complex, you might find yourself in a position where the tools provided won’t bring the results you need. For those cases it’s good to know if there are any third-party plugins available or how complicated it would be to create your own plugins. Some generators even support plugins originally meant for another generator with or without any modifications to the plugin itself.

Selection of static site generators

Jekyll

Jekyll is one of the first and definitely most popular static site generator right now. It is built in Ruby by GitHub itself. Jekyll targets itself to bloggers and smaller companies. One of the biggest projects that use Jekyll is probably GitHub’s Official Teaching Materials. Its biggest bonus is wide selection of plugins and strong community. That makes it easy to fit it to any type of project.

Jekyll also has many spinoff tools like Jekyll Admin and Jekyll now to make setup and management easier for the beginner users. Just as many other generators Jekyll uses Markdown files for storing text content. Jekyll will be soon celebrating its 10th birthday. One of the biggest drawbacks for Jekyll is potential issues on Windows. It’s possible to set up Jekyll on Windows 10 but can be a challenge on older versions. Also, it’s worth noting that making Jekyll multilingual requires a bit more templating and configuration compared to other generators.

Hugo

Hugo has been on the Static Site world half the time than Jekyll but it has taken a great leap in becoming the second most popular tool. It is built with Google Go programming language and just as Jekyll has tons of plugins, templates and snippets to use and a large library of premade themes to download and use as is or as a starting point to your own theme.

Hugo was chosen as the static site generator for Smashing Magazine after giving up WordPress. Like Jekyll, it uses Markdown for text content. In comparison to Jekyll, Hugo officially supports Windows as well.

Hexo

Hexo is the same age as Hugo: both have been on the market since 2013. While Jekyll uses Ruby and Hugo uses Go, Hexo is a build tool created with Node.js. Its main focus is blogging but the flexible templating patterns and configuration options make it suitable for any kind of project.

The biggest weaknesses of Hexo are its less-than-thorough documentation and a far less active community compared to Hugo and Jekyll. Its simplicity and reliability on all operating systems, however, make it a strong competitor and currently the third most popular static site generator.