Top 5 open source static site generators

Why choose static sites?

Static sites typically take the content stored in flat files as opposed to dynamic sites where databases serve as content stores. This content is applied against templates and is used to generate a structure of static HTML files. These static files function as the website for the users.

Agreed, they lack real-time content and have limited functionalities. But these static sites come in real handy when you want to avoid the hassle of server maintenance while also keeping your pocket light. Not to mention, they are the best option available when your product doesn’t require timely upgrades.

Another important factor which contributes to their popularity is the ability to be indexed easily by Google search engines. Since Google has indicated site speed to be one of the signals used to rank pages, static sites have truly shined through. With pure HTML static websites, you have total control over your SEO, and the HTML and CSS are fully understood by search engines. Unlike dynamic websites, you don’t need a special plugin to manage your SEO or need to optimize page load time.

Static sites are fast loading, secure, and most importantly, well prepared for traffic surges. This is why their popularity is only surging with the growth of publishing content online.

Now that I have ignited your interest to make your next website static, let’s look at some frameworks for building these sites. Static site generators have exploded in popularity in recent years, with a total of more than 100,000 stars for static website generator repositories. Hence, navigating the wide range of choices can be difficult. Here are my top five picks to get you started.

Jekyll: The most mature player

Jekyll is perhaps the most mature and popular static site generator (Quite obvious from the Github stars). It is built with Ruby and is typically used for transforming plain texts into static websites and blogs. It takes a directory filled with text files, renders that content with Markdown and Liquid templates, and generates a publish-ready static website.

Jekyll comes with a big bonus of being natively supported by GitHub pages. So you can easily deploy your site using GitHub for absolutely free. It also has a huge community and wide array of plugins, making it easier for Wordpress and Drupal developers to import content.

Hugo: The fastest player

Blazingly fast, Hugo is a static HTML and CSS website generator built around Google’s Go programming language. It is optimized for speed, ease of use, and configurability. As with Jekyll, Hugo takes a directory of text files and templates, albeit written in Go, and generates them into a full HTML website.

• It is extremely fast with build times less than 1 ms per page
• It is cross-platform, with easy installation on macOS, Linux, Windows, and more.
• It renders changes on the fly with LiveReload as you develop.
• It provides full i18n support for multi-language sites.

Hexo: The One-command player

Hexo is a powerful framework built with Node.js. It offers super fast rendering even for extremely large sites. Hexo is highly extensible as it offers support for GitHub flavored Markdown and most Octopress plugins. It has a One-command deployment to GitHub Pages, Heroku, and other sites.



Hexo also features a powerful plugin system. You can install more plugins for Jade, CoffeeScript plugins and many Jekyll plugins with minor adjustments.

Gatsby: The multi-tasker

Gatsby is a static site generator for React. It is optimized for speed as it loads only critical parts for fast loading. Once loaded, Gatsby prefetches resources for other pages so that clicking around the site feels incredibly fast. Gatsby.js can also be used to generate static Progressive Web apps.

It does automatic routing based on the directory structure. The HTML code is generated server-side and additional code need not be included for configuring the router. Gatsby has a pre-configured Webpack-based build system and allows easy data integration from CMSs, SaaS services, APIs, databases, and file systems.

VuePress: The new player

VuePress, the new player in town, is a minimalistic static site generator powered by Vue.js. VuePress creates a single-page application with pre-rendered static HTML from a Markdown file. This markdown file is powered by Vue, VueRouter, and Webpack. It is composed of two parts:

• A theming system
• A default theme optimized for writing technical documentation. This default theme has a header-based search, customizable navbar and sidebar, optional homepage, auto-generated Github link and Page edit links.

VuePress also comes with integrated Google Analytics and multi-language support.

Here's a short table summarising all static site generators.

 

Apart from these, you also have Next, GitBook, Nuxt, Pelican, among others as some of the other static site generators to choose from.

Before going with your choice of static site generator, you need to first make an informed decision on whether or not a static site is right for your next project. Consider your website needs and the kind of business you’re running. If your website has too much going on, it may be killing your traffic. In such cases having a fast, secure and beautiful static site is much more beneficial than a massive, unwieldy dynamic website.

Firefox 60 arrives with exciting updates for web developers: Quantum CSS engine, new Web APIs and more [news]

Get ready for Bootstrap v4.1; Web developers to strap up their boots [news]

How to create a generic reusable section for a single page based website [tutorial]