Categories
Uncategorized

Pick the Best Static Site

 

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.

Since Nuxt is a Vue framework, familiarity with Vue is strongly recommended, so developers who have worked with Vue before will feel at home. gjstatic With the continuous rise of Vue.js in the JavaScript ecosystem—and considering our collective love for it—, no wonder it ends up on this list.

→ 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
Hugo

hugo-static-site-generator

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:

Hugo Quickstart
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
Eleventy (11ty)

eleventy-static-site-generator

Making its first appearance on the official list in 2020 is Eleventy! “A simpler static site generator”.

Basically, 11ty is the equivalent of the well-known Jekyll, for JavaScript. Why do I put it before its predecessor on this list? Because I can feel a genuine excitement at the moment for what’s in store for 11ty in the JAMstack community.

Just look at these quotes from CSS-Tricks’ Chris Coyier and JavaScript-expert Raymond Camden:

“Been seeing a lot of Eleventy action lately. It’s a smaller player in the world of static site generators, but I think it’s got huge potential because of how simple it is, yet does about anything you’d need it to do. It’s Just JavaScript.”

“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:

Learn 11ty: A JavaScript Static Site Generator Tutorial
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
Jekyll

jekyll-static-site-generator

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
many-possibilities

Leave a Reply

Your email address will not be published. Required fields are marked *