The roots of the web as we know it are embedded in static sites. Those static roots were the way of the way for a long time until a wall arose - they couldn't keep up with everything dynamic sites offered.

Daniel Madalisto Phiri wrote this article as part of the Write for the community program

The reign of dynamic interfaces didn't last forever, though problems and difficulties started in developing, deploying, maintaining, and scaling. Advancements in tools and web technologies were making the once-innovative dynamic web difficult to manage while creating space for static sites to come back.

On November 2nd, 2015, Smashing Mag published ‘Why Static Site Generators Are The Next Big Thing'. A couple of years later, static sites have become ubiquitous, if not nearly synonymous with front-end web development. Movements like Jamstack only help to drive static adoption further and shift the community even more towards the roots of the web with static sites.

What Exactly Is a Static Website?

For most purposes, a static site can be defined as a website sourced from static HTML files. As opposed to the limited and antiquated ways of generating static sites in the early 2000s, 2020 has spoiled web developers for choice regarding static site generators.

A static site generator takes the source files and generates an entire website - or a static site. The process is simplified, removing the need to depend on databases or other external data sources heavily. The majority of generators also help serve basic content from blogs, company sites, product documentation, photo galleries to something as complex as full-blown e-commerce platforms.

Why Care about Static Sites?

Static sites come with an array of benefits.

Less Complexity: With static sites, you only need a web server capable of serving static files. Adding in relatively basic hosting and deployment is then incredibly easy with services like Netlify and GitHub pages. You could almost say it's a joy to build static sites!

Stronger Security: There's little to no server-side functionality on most static setups which means fewer security concerns. Unless a hacker can exploit a vulnerability they find in your web server; static sites assure a more secure experience than most dynamic sites.

More Flexibility: Some static site generators require a fair amount of technical know-how. While that may mean learning a few new concepts at the start, it comes with much more freedom. Many static site generators have very refined plugins and can be extended using their core programming language.

Faster Speeds: Static site generators serve pre-compiled files (usually minified) to browsers, cutting load times by a large margin because all the web server needs to do is return a file. A good amount of optimization options can also be applied to all the files before everything is deployed.

What Are My Options?

Choosing a generator can be overwhelming at first sight if you want to build a static site. This list aims to help make it easier to make a more informed decision depending on what your circumstances are.

As a disclaimer, the word “top” is very subjective. This list consists of some of the most popular static site generators for various use cases based on my experience; everyone may not agree with the choices. That's okay!

Jekyll is probably the most widely used static site generator and has been around for quite some time - 2008, to be specific. It’s simple to use, and the low barrier to entry is sometimes cited as the source of its success in the era of newer, more modern static site generators.

Jekyll helps create static websites and blogs from plain text. With Jekyll, you’ll typically work with content in Markdown, a lightweight markup language designed for text formatting. The text content is then paired with the very popular templating engine, Liquid. One of Jekyll’s key selling points for newcomers is its wide range of importers. The series of tools enables an existing site to be easily migrated to Jekyll. Jekyll was built with Ruby, so if you’re comfortable with Ruby, you might want to check it out. Fun Fact: GitHub Pages are powered by Jekyll.

Docsify helps generate documentation websites on the fly. Unlike GitBook, it does not generate static HTML files, choosing instead to smartly load and parse Markdown files, displaying them as a website.

Docsify also allows you to write Vue components directly into Markdown files that will then be successfully parsed. Besides support for plugins and themes, it comes packed with many awesome features: progressive web app support for offline usage, a smart full-text search plugin, emoji support, and compatibility with Internet Explorer 11, to mention just a few.

Vuepress is a Vue-powered minimalistic static site generator with a markdown-centered project structure, putting the focus on writing. Created to support the documentation needs of Vue’s sub-projects, it is focused on static sites centered around content. It provides features tailored and optimized for technical documentation out of the box.

Vuepress generates pre-rendered static HTML for each page and runs it all as a single-page application once loaded. It also comes with support for themes and plugins. Keep your eyes on Vuepress because Evan You, the creator of Vue.js, seems to have something interesting planned for the project.

Probably the most talked-about static site generator today, Gatsby is based on React and leverages the power of GraphQL to pull data from different sources. That means it plays very well with many content management systems, making it easier to get sites and apps up and running.

Beyond that, Gatsby is known for its speed, taking advantage of pre-fetched resources for other pages and only loading the parts of a website that are needed at any given moment. It also has a huge plugin ecosystem and can be used for progressive single-page applications or a simple way to ensure a great offline experience.

Learn how to create a blog using Gatsby and Strapi

Docusaurus was built to save time and help keep the focus on your project's documentation or content. The idea is for people to write docs and blog posts with markdown, and Docusaurus will publish it as a set of static HTML files ready to serve. That, in turn, allows easier access to the full power of React to extend or customize a project's layout.

A very useful Docusaurus feature is documented versioning, which helps keep documentation in sync with project releases. It also supports Algolia. Docusaurus makes publishing your site really simple with options for GitHub pages or other static file hosts manually, using a script, or with a continuous integration like CircleCI.

Hugo is a static site generator written in Go. It comes with an ultra-fast build process and makes creating static websites quite seamless. It is probably the fastest static site generator available at the moment. A big 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, simpler path to getting started, with very little need for configuration and no dependencies other than the core binary. Hugo also provides full i18n (internationalization) support for multi-language sites using the same straightforward development process as single-language sites.

Eleventy uses the tagline, “a simpler static site generator”, and was created to be a JavaScript alternative to Jekyll. The idea was to opt out of the framework rat race, evident in the default zero-config setup. Eleventy is not a JavaScript framework—that means zero boilerplate client-side JavaScript. It works with your project’s existing directory structure but has flexible configuration options.

Your content is decoupled by design to make future migrations easier, just in case you decide to use something else later. Eleventy also works with multiple template languages - .html, .md, .11ty.js ,.liquid, .hbs, .ejs, .haml and .pug to mention a few. The big highlight is how you can use all supported template languages in a single project - a truly amazing concept!

Scully is the best way to build fast Angular apps and static sites. Many people refer to it as Angular's answer to JAMstack calling. Scully pre-renders each page in your app in plain HTML & CSS. That means Scully gives you the best of both worlds - you can either pre-render your entire app to the most basic form of HTML & CSS or still have a full-powered single-page application written in Angular. It’s a new and quickly evolving project, so you should keep your eyes on it and contribute if possible.

Similar to how React has Gatsby, Vue.js has Gridsome. Though it’s a relatively young project, it still boasts impressive features - progressive web app support and SEO-friendly single-page applications/static sites.

Gridsome has quite a sophisticated plugin ecosystem, too, often leaving you spoiled for choice. Its GraphQL support makes it simple and fast to build modern websites from almost any data source. Adding to its simple and safe deployment, building with Gridsome is fun. It’s worth mentioning that background or prior experience with Vue goes a long way in making your development experience better while using Gridsome.

Sculpin is a static site generator written in PHP. It converts Markdown files, Twig templates, and standard HTML into a static HTML site that can be easily deployed. If you are most comfortable with PHP, this is something you should try out! Based on PHP 7, it’s a fast and easy install using composer for that extra flexibility in whatever project you’re working on.

Honorable Mentions

There are plenty of options, and I couldn't end this article without mentioning three more static site generators. Although they can be used to create amazing and performant static sites, these honorable mentions offer more than just generating static sites.

Sapper is a framework for building extremely high-performance web apps using Svelte. Sapper, short for Svelte app maker, found its inspiration from Next.js (more on that below).

Similar to Next.js, Sapper can create server-rendered pages and define API endpoints. Interestingly, Sapper offers developers the ability to export pages as static sites. It’s a relatively new project - I’d keep my eyes on it!

Coming Soon Learn how to create a blog with Sapper and Strapi

Next.js is another amazing option built on top of React. Next.js can create progressive web apps, server-rendered apps, and static websites, among many other things. It lets you define serverless functions as API endpoints and gives developers much control over how they build and deploy their applications. Its goal is to simplify development with a smoother and less cluttered experience.

Deploy a Next.js blog using Strapi

Nuxt.js is a Progressive Vue.js Framework for building performant, modular, and fun web applications. It also lets you generate a static website based on your Vue application. Nuxt also lets you skip the server while keeping the benefits of great SEO by pre-rendering all your pages and including all the relevant HTML.

Deploy a Nuxt.js blog using Strapi

Nuxt, Sapper, and Next can all help you build web applications. Static sites are a subset of these applications, so it makes perfect sense for them to be able to create amazing static sites.

As I mentioned, the list isn’t entirely etched in stone by the gods of front-end web development. If you want to do a little more digging, StaticGen is a good resource to utilize and discover more static site generators.

If I missed your favorite generator, feel free to let me know in the comments below or on my Twitter account!

If you enjoyed the article, be sure to Tweet about it!

Get started with Strapi by creating a project using a starter or trying our live demo. Also, consult our forum if you have any questions. We will be there to help you.