Picking the Best Static Site Generator for Your Next Project
June 14, 2018
So.
Many.
Static site generators.
Even for us who've done 15+ (and counting) demos & tutorials with them, it can get quite overwhelming.
I can't believe what it must be like for a developer just learning about the JAMstack and static web ecosystem.
To try and help them, we decided to synthesize our knowledge into one comprehensive piece.
By the end of this post, you should be able to find the best static site generator (SSG) for any particular project.
Here's what you'll learn about SSGs:
- What they are (and why you should use them).
- What are the best static site generators, today.
- Considerations to keep in mind before choosing the one.
1. Static site generators, what are they?
If you're here looking for the right SSG, I assume you have a decent understanding of what they are. Still, a bit of context can't hurt.
Static sites aren't new. They were what we used to build the web way before dynamic CMS (WordPress, Drupal, etc.) took over.
What's new, then? The modern tools—static site generators, mainly—that came out in the last years expanded the capabilities of static sites.
Simply put, a static site generator takes your site content, applies it to templates, and generates a structure of purely static HTML files ready to be delivered to visitors.
This process brings its share of benefits when compared to traditional CMSs.
Why use them?
→ Fast load times.
Having to dynamically pull information from a database every time a visitor hits a page on a content-heavy site can result in delays that cause frustration and bounces.
SSGs serve already compiled files to the browser, cutting load times by a large margin.
→ Security & reliability
One of the biggest threats of developing with a dynamic CMS is the lack of security. Their need for bigger server-side infrastructures opens the way for potential breaches.
With static setups, there's little to no server-side functionality.
→ Flexibility
Opinionated and cumbersome traditional CMSs are constraining. The only way to scale is with existing plugins and customization is limited to available theming platforms. That's cool if you're a non-technical user, but developers quickly find themselves hands tied.
SSGs might ask for more technical skills but will reward developers with freedom. Most of them also have plugin ecosystems, theming and easy to plug third-party services. Plus, extendability using their core programming language is limitless.
→ Their weaknesses are... disappearing.
With an ever-growing ecosystem surrounding static site development, many of its main issues are finding answers through new tools.
Content management and administrative tasks can be challenging for end users who don’t have a technical background. Good news is there's an impressive number of headless CMSs out there ready to complete your SSG. The difference between headless and traditional CMSs being that you'll use the former only for "content management" tasks, not templating and frontend content generation. I bet you'll find one fitting your needs.
Some static site CMSs support SSGs straight up. For instance, Forestry for Jekyll & Hugo or DatoCMS for many of them.
As for dynamic features necessary for a great user experience? There's a bunch of awesome services available:
- Serverless or Webtask for backend functions,
- Netlify for deployment,
- Algolia for search,
- Snipcart for e-commerce,
- Disqus or Staticman for user-generated content.
These are just a few examples of what's out there.
Sell the JAMstack and static site generators to your clients by translating these development advances into business benefits. Read this guide to know more.
2. Which static site generator should you choose?
Knowing what static site generators are and why you should use them is one thing, knowing which one to adopt is a whole other endeavour.
There are over 400 of them roaming the web these days. If you're only starting with static web development, what follows will help your decision-making process!
I'll cover some of the best ones out there, but remember that it's still a small portion of all existing SSGs. For a complete list, I suggest you visit staticgen.com.
2.1 Best static site generators in 2018
In this section, I present the ones I consider you SHOULD know and that will answer the needs of most projects. These choices are based on general popularity but also on our team's experience building dozens of JAMstack demos.
Still the most popular SSG, with a large user base and a big directory of plugins. It’s great for blogs and also widely used by e-commerce sites.
One of Jekyll’s key selling points for newcomers is its wide range of importers. It enables an existing site to be migrated to Jekyll with relative ease. If you have a WordPress site, for example, you can switch to Jekyll using one of them.
Jekyll then allows you to focus on the content without worrying about databases, updates, and comment moderation while preserving permalinks, categories, pages, posts, and custom layouts.
It’s built with Ruby and integrated into GitHub Pages, so there’s a much lower risk of getting hacked. Theming is simple, SEO is baked in, and the Jekyll community offers a lot of plugins for customization.
→ Jekyll Tutorials:
- Static Site E-Commerce: Integrating Snipcart with Jekyll
- CloudCannon CMS for Jekyll: Building a Multilingual Site
- Staticman for User-Generated Content on a Jekyll Static Website
Gatsby brings static pages to frontend stacks, leveraging client-side JavaScript, reusable APIs, and prebuilt Markup. It’s an easy-to-use solution that creates an SPA (Single Page Application) with React.js, Webpack, modern JavaScript, CSS, and more.
Gatsby.js is a static PWA (Progressive Web App) generator. It pulls only the critical HTML, CSS, data, and JavaScript so that your site can load as fast as possible.
Its rich data plugin ecosystem lets a website pull data from a variety of sources, including headless CMSs, SaaS services, APIs, databases, file systems, and more.
Gatsby has a wide range of applications and is a solid choice for sites that need to utilize data from many sources. It's on its way to the top, don't be surprised if it becomes the number one SSG in the next few months.
Oh, and it might also fix one of the biggest dev pains with SSGs: (long) atomic builds. Creator Kyle Matthews recently created a company on top of his open source project. Gatsby Inc. will build a cloud infrastructure for Gatsby sites that might enable incremental builds—a game changer for SSGs.
→ Gatsby Tutorials:
- ReactJS E-Commerce With No Backend Using Snipcart & Gatsby
- Grav as Headless CMS Tied to Gatsby with GraphQL Schema
- Static Forms, Auth & Serverless Functions (Gatsby + Netlify Demo)
An easy-to-set-up, user-friendly SSG that doesn’t need much config before you get the site up and running.
Hugo is well-known for its build speed, while its data-driven content features make it easy to generate HTML based on JSON/CSV feeds. You can also write your own shortcodes and use the pre-built templates to quickly set up SEO, comments, analytics, and other functions.
In addition, Hugo provides full i18n support for multi-language sites, making it easy to reach an international audience. This is particularly useful for e-commerce merchants who want to localize their websites.
Plus, they recently announced an advanced theming feature that offers a powerful way of building Hugo sites with reusable components.
→ Hugo Tutorials:
- How to Build & Host a (Very Fast) Static E-Commerce Site
- Static E-Commerce on Hugo with Product Management in Forestry.io
- A Great, Fast Static E-Commerce Experience with 6 Easy Tools
While not necessarily an SSG per se, Next.js is a lightweight framework for static and server-rendered React applications.
It builds Universal JavaScript apps, meaning that JS runs both on client and server. This process has boosted these apps' performances in first-page load and SEO capabilities. Next.js' set of features includes automatic code splitting, simple client-side routing, webpack-based dev environment and any Node.js server implementation.
JavaScript is everywhere nowadays, React being the trendiest JS frontend framework as of today, so it's definitely worth a look.
→ Next.js Tutorial:
- Next.js Tutorial: SEO-Friendly React E-Commerce SPA
- Introducing Build a Server-rendered ReactJS application with Next.js
Similar in name and purpose to Next.js, Nuxt is a framework for creating Universal Vue.js Applications. It enables UI rendering while abstracting away the client/server distribution. It also got a deployment option called nuxt generate to build static generated Vue.js applications.
This minimalistic framework for going serverless is straightforward and simple but is arguably geared more toward programmatic implementation instead of a traditional DOM scaffolding.
Since Nuxt is a Vue framework, familiarity with Vue is strongly recommended, but developers who have worked with Vue before will feel right at home. With the quick rise of Vue.js in the JavaScript ecosystem—and considering our collective love for it—, no wonder it ends up on this list.
If you're a Vue.js fan, you could also check out VuePress.
→ Nuxt Tutorials:
- A Tutorial to Bundle Cockpit CMS & Nuxt.js in a full JAMstack
- Simple Server Side Rendering, Routing, and Page Transitions with Nuxt.js
2.2 Main considerations
This section will take another approach in helping you discover your soul mate SSG. You'll find a few new ones here I haven't mentioned in the last section.
Here are some questions you should ask yourself before choosing the right tool:
1. Do you need lots of dynamic features & extensions out of the box?
There are two schools of thoughts here.
-
Pick a static site generator offering a great number of features out-of-the-box. You won't need tons of plugins or build everything by yourself. In that case, Hugo presents a huge set of built-in functionalities with which you can get straight to work. Gatsby also fits the bill here.
-
Pick an SSG that comes with fewer features, but offers a wide plugin ecosystem that allows you to expand and customize your setup as needed. This probably represents one of Jekyll's greatest strengths. The fact that it has been so popular for so long has translated into a large community and a wide array of plugins. To push this notion even further, Metalsmith or Spike leave all manipulations to plugins, making them highly customizable and able to build anything. The trade-off here is that this asks for a higher level of technical proficiency to handle use cases. But this might be a silver lining if you're trying to learn the language your SSG is running on!
2. How important is your build & deploy time?
As I've already mentioned, static sites, in general, are a great improvement for speed, but some SSGs push the bar further.
The clear winner here is Hugo. It's well-known for its blazing fast build times. It can put together a simple site from markup and templates in milliseconds and go through thousands of pages in seconds.
Reactive frameworks such as Nuxt are also great for performances & SEO purposes.
This is one area where Jekyll actually looks bad—many developers complain about its build speed.
3. What is the type of project you want to handle with an SSG?
Consider your project's end goal. Not all generators are created for the same results, and you'll save a lot of pain by choosing one that is specialized for what you're trying to achieve.
→ Blog or small personal websites:
Jekyll is the obvious one to mention here. It presents itself as a blog-aware SSG abstracting everything that could get in the way of what really matters on a blog: the content. Hexo is another one you should consider for building a simple blogging platform. Ultimately though, most SSGs will do the job in this area.
Also check out: Hugo, Pelican, Gatsby, Eleventy.
→ Documentation:
GitBook makes it easy to write and maintain high-quality documentation and is easily the most popular tool of this kind. VuePress is growing real fast though. This one was built to support the doc needs of Vue's community sub projects.
Also check out: Docusaurus, MkDocs.
→ E-Commerce:
You can also easily integrate a shop on most static site generators (as seen in previous tutorials). E-Commerce can be tricky though, as many aspects come into consideration. Think about user-experience related aspects such as speed and UI customization. SEO is also something you don't want to disregard when developing a business online.
For larger stores where you might need a CMS for product management, ask yourself which SSG will be the better fit for the headless CMS of your choice.
With these in mind, drawing from our own experiences we suggest looking at reactive frameworks like Gatsby & Nuxt. But it doesn't mean you should put aside friendlier options like Jekyll or Hugo if you need to keep everything simple.
→ Marketing website:
One I still haven't mention yet is Middleman. What differentiates this one from the bunch is that it aims to provide the flexibility to craft any type of site, instead of being heavily geared towards a blogging engine. It's great for advanced marketing websites and companies like MailChimp and Vox Media have used it for their own.
Also check out: Gatsby, Hugo, Jekyll.
4. If you're willing to modify the site and/or generator yourself, do you need it to be in a particular language you're well-versed in?
If so, here's where you should look at for the following languages:
- JavaScript: Next.js & Gatsby (for React), Nuxt & VuePress (for Vue), Hexo, Eleventy, GitBook, Metalsmith, Harp, Spike.
- Python: Pelican, MkDocs, Cactus.
- Ruby: Jekyll, Middleman, Nanoc, Octopress.
- Go: Hugo, InkPaper.
- .NET: Wyam, pretzel.
5. Are non-technical users going to work on this site?
After the development part is done and the website is built, who is going to run it and edit its content? In most cases, this falls in the hands of non-technical users who'll have a hard time navigating through code repos.
Here's where you should strongly consider pairing your SSG with a headless CMS. Not only the choice of CMS is important, but also finding the right SSG to attach on the frontend is crucial.
Some content management systems also allow for integrated static site generation, such has Publii. Learn more about it here.
Gatsby has pushed this thinking forward with one of their latest feature, a GraphQL implementation. I won't go into explaining what GraphQL is, but in short, it enables faster less-bloated data queries.
6. Is community and help from peers important to you?
If so, consider one of the top static site generators listed earlier. These are the most popular right now and are backed by the most active communities spawning plugins, case studies, and resources of all kinds.
Remember that modern static sites and the JAMstack are still part of a relatively new ecosystem, and if you start with less known tools you'll rapidly discover the lack of help available.
Closing thoughts
I won't end this post by telling you which static site generator is the best and which one you should choose. Primarily because I simply don't have the answer, but also because you should now have enough information to make that call yourself.
All you need to do now is go out and explore every possibility that seems attractive to you. One thing's for sure, it's that you should have fun doing it as SSGs finally give freedom and flexibility back to developers.
What static site generator would you recommend? What's next for the JAMstack ecosystem? I really want to hear from you, so join the discussion in the comments below!
If you've enjoyed this post, please take a second to share it on Twitter.
