GraphCMS is no stranger to the vast ocean of Static Site Generators (SSGs). These tools promise speed, both in development and performance, scalability, and stability. From React, to Vue, to Ruby on the Rails, every community seems to have at least one SSG to match. In fact, staticgen.com lists hundreds. So we decided to compile a list of some of the top players in the SSG sphere and the rising stars that are quickly developing traction.

Our Top SSGs:

Gatsby

Gatsby is one of the leading static site generators beloved by devs and non-devs alike as a product that embraces the microservice mindset.This SSG uses React and Webpack to compile modern JavaScript and GraphQL into static HTML and CSS, re-hydrating the application after loading in the browser to maintain the feeling of a SPA (single page application).

Gatsby has an ever-growing community which leads to rapid development and a high quality product. Gatsby combines client-side Javascript, the pre-rendered static HTML, and robust APIs to create a hybrid between a static-site generator and a progressive web application (PWA). It is a common choice when building marketing websites that will easily scale or smaller projects like personal blogs and portfolio sites. Gatsby sites are optimized to load as fast as possible by first loading only the most important HTML, data, CSS, and Javascript and leveraging the best parts of the PRPL pattern.

Their robust plugin network gives developers the flexibility to customize their project to their exact needs and even create new plugins if those needs haven’t been met yet. Plugins range from adding responsive images to pulling data from headless CMSs to integrating Google Analytics.

Gatsby has a plethora of recipes that walk you through how to build a variety of websites and apps by integrating several different products or services. If you need something more generic, the tutorials are rich with information and walk-throughs that will help someone using Gatsby for the first time or a developer hoping to test out a new feature.

Gatsby and GraphCMS work extremely well together given both are built on the foundations of GraphQL. To experience this for yourself, we’d recommend testing the GraphCMS Gatsby eCommerce starter.

Gridsome (Rising Star)

Launched in 2018, Gridsome is one of the newcomers to the SSG scene. It aims to do what Gatsby did for React but with Vue.js instead. Gridsome generates static HTML and rehydrates into a Vue SPA when it is loaded in the browser. This allows you to create either static websites or dynamic apps using Gridsome.

Having a Universal GraphQL layer that pulls data from headless CMSs, databases, APIs, or Markdown sources, Gridsome generates static PWAs. All of this means that websites are optimized for speed and SEO out of the box. The rich plugin ecosystem allows for customization and flexibility depending on your project without losing the benefits of the core product. Users can also create their own plugins, giving them endless possibilities of connecting new systems.

Gridsome hopes to take advantage of the diverse, loyal JAMStack community to carve its place in the SSG spotlight. It has a rich collection of starters that will get developers up and running quickly for a variety of projects from ecommerce sites, to event pages, to portfolios. Keeping in mind that Gridsome is still very new, it already possesses some competitive features for the Vue.js community. It would not be surprising to see this user base grow throughout 2020 and beyond.

Learn more about how GraphCMS fits into the equation as a Headless CMS for Gridsome projects.

Hugo

Hugo is another popular static site generator that was launched in 2013. Written in Go, Hugo offers exceptionally fast page builds, extensive theming system, and the ability to output content in multiple formats as some of its many exciting features.

Hugo is extremely user friendly and it does not take much configuration before you have the site up and running. Its speed has led to a very enthusiastic community around the project leading to a well maintained code base with quick development of new features.

Some more standout features include its full i18n support, shortcodes for Markdown, and built in templates which can be used to set up Google Analytics or SEO. The ability to preview your website using the live reload server, and simple resizing of images all and all leads to a great developer experience.

Its feature heavy tendency makes it enterprise ready; however, it does not have plugin support which limits customization. Hugo is well equipped to create fast content heavy marketing websites, ecommerce websites, as well as mobile apps.It can be connected with a headless CMS to satisfy the needs of both a technical and non-technical team member.

Next.JS

Next.js is a static site generation framework for static and server-rendered React applications. This tool has seen rapid community and enterprise adoption from companies such as Netflix, twitch, and ticketmaster. This is due to building Universal JavaScript apps and strong features like Node.js server implementation and complete control over Webpack and Babel.

Next.js empowers developers to create highly performant sites, both in terms of speed and SEO, with a number of optimizations to offer exceptional lighthouse scores out of the box. Next.js enables you to build websites, ecommerce sites, and blogs where content will grow over time. Next.js is highly customizable and has a wide breadth of features from hot reloading to built in Sass Support. The team over at Vercel is rapidly developing new features and improving on the framework with great velocity. It is easy to connect a headless CMS to Next.js which will give more power to content editors to quickly update content to your site without compromising developer experience.

It would be remiss to discuss Next.js without discussing Vercel (previously known as Zeit), a cloud platform for static sites which provides support for Next.js deployments. Next.js was built by the Vercel team and has seen huge community adoption and speedy feature development.

To get an understanding of how NextJS, GraphCMS, and Vercel work together, take the latest blog example for a spin, or view our Examples repo to work with GraphCMS as a NextJS Headless CMS.

Nuxt.JS

Nuxt.js focuses on creating the best developer experience possible through creating a faster, easier, static site generator. Based in Vue.js, and using developer tooling like Webpack, node.js, and Babel.js, Nuxt.js uses a powerful, modular architecture to quickly connect to headless CMSs, REST or GraphQL endpoints or CSS frameworks. If the development team enjoys working with Vue.js, this is an obvious choice for projects like documentation, company blogs or small marketing websites.

Nuxt.js supports server side rendering out-of-the-box, making your website faster, more SEO performant and a stronger user experience. It allows for plugins, increasing the customizability of your web application. PWA and AMP support is also possible through Vue Modules.

Nuxt.js can generate a static website based on your Vue application, giving you the benefit of a universal application but without a server. The team behind Nuxt.js claims this creates the “best of both worlds as you don't need a server but still have SEO benefits because Nuxt will pre-render all pages and include the necessary HTML.”

Launched in 2016, Nuxt.js is extremely popular in the JAMstack community and is often compared to Next.js; however, Nuxt.js is based on Vue instead of React.

Given the versatility of Nuxt, it’s worth exploring how GraphCMS works as a NuxtJS Headless CMS.

Jekyll

Jekyll is one of the mainstays out of the SSG options. Launched in 2008, Jekyll is the most popular SSG for a variety of reasons. Its simplicity enables developers to quickly create websites and is most often used for marketing sites, personal projects or ecommerce sites.

Written in Ruby, Jekyll takes content, renders Markdown or Textile and Liquid templates, and produces a static website. It can also be linked to a headless CMS so that content editors can enter and edit content without needing to know how to code or asking the development team. The goal of Jekyll is to maintain its simplicity while still being flexible enough to create modern web experiences. Jekyll can attribute some of its popularity to being integrated with Github Pages, making Jekyll the preferred choice for many smaller, personal projects. Paired with its extensive plugin directory developers find Jekyll to be flexible and efficient.

With the release of Jekyll 4 in 2019, the company was able to create some exciting buzz promising faster builds, upgraded content transformations, and up-to-date techstacks.

11ty

11ty is a simple, flexible SSG that was launched in 2017 with the goal of being Jekyll for Javascript. Since its launch, 11ty has developed a loyal community following that advocates for its flexibility and efficiency.

11ty promises simplicity by being customizable, quick to start, and only ships the code you write in browsers. It works with the project’s existing project directory structures and compiles them into HTML. 11ty can work with multiple template languages using its incredibly flexible templating system; however, there are no pre-installed themes or configurations. Because it is written in Javascript, you can take advantage of the entirety of npm to use in your project.

While the bare bones nature of 11ty may seem a little overwhelming to beginner developers, there are a wide range of starters that will help get you on your way. It is easy to connect a headless CMS or other API to 11ty and get your site up and running quickly. As of now, 11ty is used primarily for small marketing websites and personal blogs, but because of the velocity of the JAMstack community, 11ty is likely to be a growing player in 2020.

Pelican

Launched in 2010, as a simple SSG written in Python for blogs and personal sites. Pelican can import existing content from popular blog formats such as Wordpress, Tumblr API and RSS/Atom feeds, among others. It allows you to connect the content editor, such as a headless CMS, and write content in reStructuredText or Markdown. Pelican users can create themes, publish content in multiple languages, and integrate with Disqus to create a commenting system. Like most SSGs it promises fast build times due to content caching. If you want to quickly create a blog in Python, Pelican is a great option. In fact, German ecommerce giant, Zalando just relaunched their Engineering blog using Pelican.

Documentation SSGs (SDGs)

Docusaurus (Rising Star)

Docusaurus is one of the many SSGs that is intended specifically for quickly creating documentation. These SSGs are sometimes also called Static Documentation Generators (SDGs). The most popular tools in this space are Gitbook and VuePress but we would like to highlight another up-and-coming player in the field, Docusaurus. Launched in 2017, Docusaurus created an easy way to build open source documentation websites. Docusaurus is built with React.js and thus has acquired quite a bit of traction from this community. In fact, React Native, Redux, and the Create React App are all using Docusaurus for their documentation.

Docusaurus balances simplicity with essential integrations such as Algolia DocSearch, Markdown, and translations using CrowdIn. Its simplicity does not mean that core features are lacking; versioning, page customization, and navigation tools are all there. Docusaurus lets you get the structure up and running quickly, allowing you to focus on creating great documentation. 2020 could be an exciting year for Docusaurus. With the launch of Docusaurus 2 last year, the product has matured and it is now evolving into a performant static site generator for content-driven websites.

Slate

Slate is another star of the SDG space. Inspired by Stripe’s and Paypal’s API docs, its clean appearance and ease of use makes it a popular choice for developer documentation. Launched in 2014, Slate enables developers to create content using Markdown while also allowing you to write code in multiple languages. Slate automatically generates scrolling Table of Contents and keeps all of the content on a single page to improve user experience. Slate documentations are by default hosted in a public Github repository; however, if you want to host your docs elsewhere that is also possible.

Slate also maintains the importance of keeping things simple but powerful. With companies and organizations such as NASA, Sony, and Clearbit all trusting Slate for their documentation. This straightforward framework continues to be a mainstay of statically generated documentation.

MkDocs

MkDocs is a static site generator built in Python that focuses on creating documentation. Launched in 2014, MkDocs has gained traction in the community quickly as the quick-to-set-up, easy to use, SDG. One thing that is different from other documentation generators is you do not have to write any CSS, HTML, or JS. Instead, your documentation source should be written in regular Markdown files which will be configured with a YAML config file.

MkDocs has a plethora of themes that allow you to create a custom feel for the documentation. Changing between themes is straightforward and easy to do. Using the built-in dev-server you can preview your documentation as you are working. The preview will automatically reload whenever you save changes to your MkDocs project. While MkDocs has been around for a while, I accept because of its simplicity and usability that it will continue to be a popular option to quickly set up customized documentation.