Static Site Generators (SSGs) are a new emerging trend in the web-development world. For many decades, developing, publishing and editing content on a website required HTML skills. This made publishing a website beyond the capabilities of the average user.

The emergence of Content Management Systems (CMS) such as Wordpress, Joomla, and Drupal alleviated the challenges of relying on technical support to modify web content. These convenient and user-friendly CMSs enabled non-technical users to manage their own content on the web and take control of a website’s design and content.

However, over time, CMSs have gained much notoriety for their limitations. CMSs can be slow and cumbersome to work with, and struggle with scalability and security issues. This has set the stage for the return of static site generation as an answer to these problems.

Static site generators have grown greatly in popularity in recent years due to their simplicity, security benefits, and ability to quickly serve content. They offer a number of benefits such as speed, freedom and flexibility, development workflow - to name a few.

If you are thinking of building a website using a static site generate, which one should you pick? Let’s have a look at the 5 most popular static site generators in 2020 to help you make your decision.

Jekyll (Ruby)

Jekyll is considered as the most widely used static site generator and has been around since 2008. Jekyll was first released by Tom Preston-Werner, who is better-known as the founder and former CEO of GitHub. Jekyll is built with Ruby, and is most often used for blogs and personal projects.

This is partially due to its close integration with GitHub. GitHub has a feature called GitHub pages which allows you to build a Jekyll website have have it hosted and automatically rendered using GitHub infrastructure. It’s a free service (although it does have traffic limits), which has made it a popular method for hosting personal sites. My own blog is hosted using Jekyll on GitHub pages!

Jekyll generates a publish-ready static website by taking a directory filled with text files and then rendering that content with Markdown and the Liquid templating language (an open-source project developed by Shopify). It provides a wide array of plugins that make it a great starting point for bloggers coming from the world of WordPress and Drupal, making it easy to import content from those formats and more.

One of Jekyll’s key advantages for newcomers is its range of importers. It provides a series of tools to enable existing websites for easy migration to Jekyll

Here is a summary of the pros and cons of Jekyll:

Pros of Using Jekyll

  • Easily configuration with GitHub pages
  • Learnability and simplicity of its core concepts
  • Huge community support availability
  • A wide range of plugins for various tasks

Cons of Using Jekyll

  • Jekyll requires pre-installed a Ruby environment
  • Ruby is (arguably) not among the top trending programming languages anymore, so some developers might find it outdated

Gatsby (JavaScript)

Gatsby is another SSG that has become popular among the developer community. It is based on React and GraphQL and one of its attractive features is that it allows you to pull data from different CMS such as Wordpress. This feature of Gatsby makes it a great choice if you want to access data from multiple sources in an easy and consistent way.

Gatsby is also known for being optimized for speed. It only loads the parts of the website which are needed at that exact moment. Gatsby also pre-fetches resources for other pages. This means that navigating between pages on the sites built with Gatsby feels incredibly fast.

Unlike a few other SSGs I’ll talk about in this article, Gatsby comes with a plugin system that allows for additional functionality. These plugins enable using multiple features such as sitemap, robots.txt files, image manipulation, and more.

Here are some of the major pros and cons of Gatsby:

Pros of Using Gatsby

  • A wide range of plugins available
  • Data can be pulled into Gatsby using GraphQL
  • Fast static HTML pages with prefetching capabilities
  • Huge community support available

Cons of Using Gatsby

  • Solid knowledge of JS, React, and GraphQL is necessary to use Gatsby. Said differently, it is more technically demanding than some of its simpler counterparts.

Next.js (JavaScript)

Next.js is another amazing option that is built on top of React. It is also extremely popular in the developer  community and is basically the other de facto static site generator (along with Gatsby) that uses React.

Next.js is not only  a static site generator, it is also the first and foremost solution that supports server rendering. You also can define serverless functions as API endpoints. This gives you lots of control over how you build and deploy your Next.js applications. Some of the significant features of Next.js are:

  • Server rendering
  • Automatic code splitting for faster page loads and file system based routing
  • Fully extensible with complete control over Babel and Webpack

Here are some pros and cons associated with Next.js

Pros of Using Next.js

  • It comes with its own configuration. All you need is to run “npm run dev” and start building your website or application
  • Very easy to get started
  • Zero configuration so it’s possible to start quickly and easily

Cons of Usin Next.js

  • Basic understanding of JS and React is necessary
  • No integrated plugin system is available

Hugo (Golang)

Hugo is a static site generator written in Go. It comes with an ultra-fast build process and makes the creation of static websites quite seamless. It is arguably the fastest static site generator available at the moment. A significant benefit of using Hugo is that it comes with a theme library containing more than a hundred themes you can use to build a website.

Another key benefit of Hugo is its quicker and simpler path to getting started, with very little need for configuration and no dependencies other than the core binary. Hugo also provides full support for multi-language sites using the same straightforward development process as single-language sites provide.

Have a look at pros and cons before you make a choice:

Pros of Using Hugo

  • The building process is super fast
  • A system with a lot of themes and available templates
  • Flexible framework structure with the support of various content types

Cons of Using Hugo

  • In order to use Hugo, you will need an understanding of the Go programming language which is not so common in the current web development world

Nuxt.js (JavaScript)

Nuxt.js is a progressive, opensource, Vue.js framework. It includes a bundle analyzer and lots of opportunities to fine-tune an app or website. Nuxt.js has a powerful modular architecture that allows you to choose from more than 50 modules to make your development faster and easier. This framework bundles the following: Vue 2, Vue Router, Vuex, Vue Server Renderer, and vue-meta.

Some of the pros and cons of Nuxt.js are discussed below:

Pros of Using Nuxt.js

  • Based on Vue.js framework
  • Very easy to learn and understand
  • Various build options available

Cons of Using Nuxt.js

  • Not limited to generating static sites
  • Requires understanding of Vue.js framework

Conclusion

In this article, I have discussed top 5 static site generators in 2020. The choice of which static site generator to use depends upon your required features and preferred programming languages. In my opinion the best way to select a proper static site generator for your website is to simply get started!

This article was a guest contribution by Nick McCullum. Nick is an independent Python and JavaScript developer that lives in New Brunswick, Canada. He likes long reads, long runs, and is passionate about open source software.