This minimalistic framework for going serverless is straightforward and simple but is arguably geared more toward programmatic implementation instead of a traditional DOM scaffolding.
Let me be biased for a second and stress out how much we love Nuxt here at Snipcart. After trying out most of these SSGs out, we choose this one to build the documentation for our latest release (v3.0). You can find the justification for this decision in this blog post.
→ Nuxt tutorials:
Free Nuxt Tutorial – Vue Mastery Course
A Tutorial to Bundle Cockpit CMS & Nuxt.js in a full JAMstack
Simple Server Side Rendering, Routing, and Page Transitions with Nuxt.js
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 (it claims to be the “world’s fastest”), and 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. Oh, and you like having options when it comes to themes? Hugo has hundreds of them.
With Hugo Modules, it now supports its own dependency manager. It enables fetching of dependencies from any remote sources (GitHub, BitBucket, etc.) and even handpicking which files/directory from any given module should be merged in your project filesystem.
Its latest feature to date is called Render Hooks, which allows you to overwrite default rendering of Markdown images and links.
→ Hugo tutorials:
How to Build & Host a (Very Fast) Static E-Commerce Site
Static E-Commerce on Hugo with Product Management in Forestry.io
Tutorials for the Hugo static site generator
Making its first appearance on the official list in 2020 is Eleventy! “A simpler static site generator”.
“I recently discovered Eleventy, and I’m incredibly excited about it. I like Jekyll but never liked working with Ruby. The fact that Eleventy is Node-based is a huge win for me. Also, Eleventy is incredibly flexible.”
No doubt, it has become a genuine contender. Prepare to hear the name “Eleventy” thrown around a lot in 2020.
→ Eleventy tutorials:
Turn Jekyll up to Eleventy
Build your own Blog from Scratch using Eleventy
Video Series: Create an 11ty Theme from a free set of HTML templates
In previous versions of this post, we stuck to five picks, but it felt off sitting out Jekyll. It’s still one of the most popular SSGs with a large user base and directory of plugins.
Even though it’s not entirely keeping up with what the SSGs above are accomplishing lately, Jekyll still casts a long-lasting shadow over the JAMstack community. It’s still great for what it’s great at—smaller websites, blogs and is 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 many plugins for customization.
Plus, Jekyll 4 was officially released in 2019, featuring faster builds, faster Sass processing, cache optimizations, super-powered content transformations & more.
→ Jekyll tutorials:
Giraffe Academy’s Video Walkthroughs
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
Keep an eye on these in 2020 👀
There are three more that, even though not as well established as the ones just mentioned, deserve your attention in the months to come:
Gridsome: Gridsome is to Vue.js what Gatsby is to React. So if you’re already down with Vue, you should absolutely check this one out. Even though it’s a very young product, it still boasts an impressive number of features (PWA development, GraphQL queries, SEO-friendly SPAs, etc.). The co-creator Tommy Vedvik told us they were working on a plugin that will let you build Gridsome sites visually. It’ll feel like Webflow and use Vue components as building blocks. Interesting!
Scully: Angular was the only major framework without its own SSG before Scully stepped into the game. It’s still a small project, and there’s much work ahead feature-wise, but it’s exciting for Angular developers looking to make the transition to JAMstack-powered projects.
Sapper: Thanks to its “Sapper static export” function, it’s possible to create static websites powered by Svelte. Hard to predict to which extent the Svelte adoption will grow in 2020, but you should at least have a look at this lightweight JS framework.
3. Main considerations when choosing a SSG