Strapi blog logo
  • Product

      Why Strapi?Content ArchitectureRoadmapIntegrationsTry live demo
      OverviewContent Types BuilderCustomizable APIMedia LibraryRoles & Permissions
      Discover Strapi Enterprise EditionDiscover our partners
  • Pricing

  • Solutions

      Static WebsitesMobile ApplicationsCorporate websitesEditorial SitesEcommerce
      Delivery HeroL'EquipeSociete GeneralePixelDustBanco International
      Discover all our user stories
  • Community

      CommunityWrite for the communityWall of LoveStrapi Conf 2021
      SlackGitHubYoutubeCommunity Forum
      Meet the Strapi Community StarsDiscover the Strapi Showcase
  • Resources

      BlogStartersNewsroomSupport
      Strapi AcademyTutorialsVideosWebinars
      The Guide to Headless CMS Strapi Community Forum
  • Docs

      InstallationConfigurationsDeploymentUpdate versionContent API
      Getting StartedContent ManagerContent-Types BuilderUsers, Roles & PermissionsPluginsSettings
      Developer DocumentationStrapi User Guide

Looking for our logo ?

Logo Brand download
Download Logo Pack
See more Strapi assets
Strapi blog logo
  • Product

    Product

    • Why Strapi?
    • Content Architecture
    • Roadmap
    • Integrations
    • Try live demo

    Features

    • Overview
    • Content Types Builder
    • Customizable API
    • Media Library
    • Roles & Permissions
    • Discover Strapi Enterprise Edition
    • Discover our partners
    Features cover

    Unlock the full potential of content management

    See all features
    Strapi Enterprise Edition

    Discover the advanced features included in Strapi Enterprise Edition.

    Get Started
  • Pricing
  • Solutions

    Solutions

    • Static Websites
    • Mobile Applications
    • Corporate websites
    • Editorial Sites
    • Ecommerce

    Stories

    • Delivery Hero
    • L'Equipe
    • Societe Generale
    • PixelDust
    • Banco International
    • Discover all our user stories
    Delivery Hero team

    Delivery Hero manages their partner portal with Strapi.

    Read their story
    turn 10 studios website

    How 1minus1 delivered a creative website for Turn10 Studios 25% faster with Strapi

    Discover their story
  • Community

    Community

    • Community
    • Write for the community
    • Wall of Love
    • Strapi Conf 2021

    Resources

    • Slack
    • GitHub
    • Youtube
    • Community Forum
    • Meet the Strapi Community Stars
    • Discover the Strapi Showcase
    Strapi Conf

    The first Strapi Global User Conference.

    Register now
    Write for the community

    Contribute on educational content for the community

    Discover the program
  • Resources

    Resources

    • Blog
    • Starters
    • Newsroom
    • Support

    Learning

    • Strapi Academy
    • Tutorials
    • Videos
    • Webinars
    • The Guide to Headless CMS
    • Strapi Community Forum
    Introducing Strapi Academy

    Everything you need to know to master Strapi.

    Go to the academy
    Strapi Repository on GitHub

    Get started with the Strapi repository

    Go to repository
  • Docs

    Developers

    • Installation
    • Configurations
    • Deployment
    • Update version
    • Content API

    User Guide

    • Getting Started
    • Content Manager
    • Content-Types Builder
    • Users, Roles & Permissions
    • Plugins
    • Settings
    • Developer Documentation
    • Strapi User Guide
    Install Strapi

    Install Strapi locally or wherever you need.

    Get Started
    Migration Guides Strapi

    Using a previous version of Strapi? Migrate to the latest.

    Read Guides
Get Started
Back to articles

Top 10 Static Site Generators in 2020

Top 10 Static Site Generators in 2020
  • Share on facebook
  • Share on linkedin
  • Share on twitter
  • Share by email
Daniel Madalitso Phiri

Daniel Madalitso Phiri

May 5, 2020

Our community is looking for talented writers who are passionate about our ecosystem (jamstack, open-source, javascript) and willing to share their knowledge/experiences through our Write for the community program.

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.

This article was written by Daniel Madalisto Phiri as part of the Write for the community program

The reign of dynamic interfaces didn't last forever though with problems and difficulties starting to show up in developing, deploying, maintaining, and scaling. Advancements in tools and web technologies were making the once innovative dynamic web difficult to manage while also creating the space for static sites to make a comeback.

On November 2nd, 2015, Smashing Mag published ‘Why Static Site Generators Are The Next Big Thing'. A couple years later and static sites have become ubiquitous if not nearly synonymous with frontend web development. Movements like Jamstack only help to further drive static adoption 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 that is sourced from purely static HTML files. As opposed to the limited and antiquated ways of generating static sites in the early 2000’s, 2020 has web developers spoiled for choice when it comes to static site generators.

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

Why Care about Static Sites?

Static sites come with an array of benefits.

Less Complexity: With static sites, all you need is a web server that’s 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 less 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 a lot 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. There’s also a good amount of optimization options that can be applied to all the files before everything is deployed.

What Are My Options?

If you want to build a static site, choosing a generator can be overwhelming at first sight. The aim of this list is 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 personal experience and everyone may not agree with the choices. That's okay!

1JEKYLL

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 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 enable an existing site to be migrated to Jekyll with relative ease. 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.

Learn how to build a blog with Jekyll and Strapi

2Docsify

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 a ton of really awesome features: progressive web app support for offline usage, smart full-text search plugin, emoji support, and compatibility with Internet Explorer 11 to mention just a few.

3VUEPRESS

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 own sub-projects, it is focused on static sites centered around content and 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.

4GATSBY

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 a lot of 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 in other words a simple way to ensure a great offline experience.

Learn how to create a blog using Gatsby and Strapi

5DOCU

Docusaurus was built to save time and help keep focus on your project's documentation or content. The idea is for people to simply 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 document versioning which helps keep documentation in sync with project releases. It also supports Algolia documentation search. In general, 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.

6HUGo

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 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.

7-11ty

Eleventy uses the tagline, “a simpler static site generator”, and was created to be a JavaScript alternative to Jekyll. The whole idea behind it 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 any 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!

8Scully

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 definitely keep your eyes on it and contribute if you can.

10GRIdo

Similar to how React has Gatsby, Vue.js has Gridsome. Though it’s a relatively young project, it still boasts an impressive number of 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. It’s 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 also simply just fun to use. It’s worth mentioning that a background or prior experience with Vue really goes a long way in making your development experience better while using Gridsome.

11sculpin

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 out there 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.

12Sapper

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

Similar to Next.js, Sapper has the ability to create server-rendered pages as well as define API endpoints. Interestingly, Sapper offers developers the ability to export pages as a static site. 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

13NEXt

Next.js is another amazing option that is built on top of React. Next.js can be used to create progressive web apps, server-rendered apps, and static websites among many other things. It let’s you define serverless functions as API endpoints out of the box and gives developers a lot of control over how they build and deploy their applications. It’s overall goal is simplifying development with a smoother and less cluttered experience.

Deploy a Next.js blog using Strapi

14nuxt

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 off of 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 really a subset of these applications so it makes perfect sense for them to be able to create amazing static sites.

Like I mentioned above, the list isn’t by any means etched in stone by the gods of frontend 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!

Deploy Strapi in just 1 click

DigitalOcean

Heroku

Fastandcomfy


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

See you soon!
  • Share on facebook
  • Share on linkedin
  • Share on twitter
  • Share by email

Unleash content.

Starters
Get Started

Strapi is the leading open-source Headless CMS. Strapi gives developers the freedom to use their favorite tools and frameworks while allowing editors to easily manage their content and distribute it anywhere.

Product

  • Why Strapi?
  • Content Architecture
  • Features
  • Enterprise Edition
  • Partner Program
  • Roadmap
  • Support
  • Try live demo
  • Changelog

Resources

  • How to get started
  • Meet the community
  • Tutorials
  • API documentation
  • GitHub repository
  • Starters
  • Strapi vs Wordpress
  • The Guide to headless CMS

Integrations

  • All integrations
  • React CMS
  • Next.js CMS
  • Gatsby CMS
  • Vue.js CMS
  • Nuxt.js CMS
  • Gridsome CMS
  • Flutter CMS
  • Hugo CMS
  • Typescript CMS

Company

  • About us
  • Blog
  • Careers
  • Contact
  • Newsroom
  • © 2021, Strapi
  • LicenseTermsPrivacy