loading...
Cover image for Should I Use a Static Site Generator

Should I Use a Static Site Generator

hoangbkit profile image hoangbkit Originally published at advancedweb.dev ・4 min read

Short answer is YES. Long answer is it depends on your content and expectation in terms of performance, SEO, cost, and developer experience.

The Motivation

Originally most websites are static with only HTML and CSS, then JavaScript was added to make them more interactive. Then web development getting more and more complicated with many server-side and client-side rendering frameworks which allows you to create dynamic websites connecting with databases.

But above rendering strategies have steep learning curve and sometimes overkill for a small blog, landing page, or documentation website. That's the situation static website is a perfect fit, fast to get started, and very cheap to maintain.

Static Site Generator (SSG) is what we need to create static websites these days, it is often a framework that adopts static rendering strategy and help you generate static websites which are blazing fast and SEO friendly.

You can deploy your site to static site hosting services such as ZEIT Now, GitHub Pages, Netlify, and Render. Static sites are statically rendered so they work without JavaScript too!

The Options

There are tons of static site generators out there with different set of supported features, following are most popular ones:

SSG Github Languages Templates Best
Gatsby 42k JavaScript React Static Sites
Hugo 42k Go Go Static Sites
Jekyll 39k Ruby Liquid Static Sites
Hexo 29k JavaScript Many Static Sites
Nuxt 26k JavaScript Vue Static Sites
VuePress 15k JavaScript Vue Documentation
Docusaurus 15k JavaScript Markdown Documentation

Gatsby is actually a great point of entry. It has fantastic documentation and examples of React and GraphQL, and its structure lends itself to thinking in React and thinking in GraphQL. I think Gatsby has a great future ahead of it!

The Features

Let's look at common features that make a great static site generator:

Generating pre-rendered static HTML for each page. This is the core feature of any pure static site generator and happens at build time. With mobile-first indexing and page speed as one of the top ranking factors, it is easy to understand why lack of speed and huge load times is a disadvantage you cannot afford.

Has simple setup and fast to get started. An important selling point to those not really good at web development or non technical bloggers.

Markdown centered structure that helps you focus on writing. Static websites are perfect solutions to blog, landing page and documentation which are heavily influenced writing in markdown format.

Has support to multiple template engines. Besides popular support for React, Vue, and Markdown; SSGs might support EJS, Pug, Haml, Swig, Nunjucks, Mustache, Handlebars, Twig, Marko.

Has support to multiple content sources. Beyond local files handling, you can also load data from CMSs (Contentful, Drupal, Wordpress, etc.) or external APIs.

Hot reload in development and fast build time. Static site generators are made for developers and these are features that developers really care about. Hundreds of files should take only seconds to generate.

Has support document versioning and translation. This is key to documentation focused site generators like Docusaurus or VuePress.

Has flexible content management. A static site generator needs to extend beyond front matter and a couple of templates to be both scalable and manageable.

Has extensive ecosystem of plugins and themes. Plugins are the building blocks of features, each plugin handles its own individual feature. Themes are mostly focused on client-side, where plugins are more focused on server-side functionalities. Themes are also designed to be replace-able with other themes.

Build-in optimization for production. Enjoy the power of the latest web technologies – React.js , Webpack , modern JavaScript and CSS and more — all set up and waiting for you to start building.

Supporting Progressive Web App (PWA). Sites generated by SSG often meet three baseline criteria to qualify as a PWA as long as you run your page via HTTPS and install a plugin for the manifest and service worker.

Final Thoughts

Ultimately consider using static site generator when you are in following situations:

  • Your site is a small blog, landing page or documentation
  • You need high performance in a wide spectrum of supported devices
  • You desperately need consistent SEO and social sharing previews
  • Your budget is tight and can't tolerate unnecessary cost of server and bandwidth
  • You need a simple solution to develop prototypes or validate market
  • You need a secured and reliable website with zero to little monitoring
  • Your content is predictable, slow changes, and public available to all users

So what’s keeping you from moving to the world of static web development? It's cheap to get started, you can always switch to client-side or server-side rendering any time you want with very little effort.

Don't forget that some CSR or SSR frameworks also supporting generating static HTML as a feature. Next.js is a great example of server-side rendering framework that has support for static exporting which can be run standalone without the need of a Node.js server.


Originally published at advancedweb.dev — a tutorial site focused on creating high quality web development tutorials, books and courses

Posted on by:

hoangbkit profile

hoangbkit

@hoangbkit

I turn ☕ into {code} using #javascript

Discussion

pic
Editor guide
 

Thanks for writing this.
Docsaurus is nice, but lacks in terms of themes, at least a while ago when I played with it.
Eleventy 11ty might be a good choice. The content can be written in many formats (LIquid, Markdown, Html ..) and is super simple compared to Gatsby/Gridsome brothers.

 

What do you think about Gridsome? It's like Gatsby but uses Vue. I've really been enjoying it.

 

I've been using Gridsome on a couple of my latest projects and I absolutely love it.

 

Me, too. What've you been building?

I've been working on my personal portfolio with it, and been building a website for a local commercial landscaping company in my area. Works super well with Netlify and I am going implement the Netlify Forms features eventually.

 

My concern now is only prerendering and SPA architecture, i.e. <Link /> in Gatsby. [1] [2]

Otherwise I can use simply a couple of scripts and parcel build **/*.html. (that is, not even Eleventy.)

So, I might have to stick with the most popular Gatsby for now.

 

Great article, thanks!

I read the new version of Next.js can do everything that Gatsby can do, plus server side rendering when needed. They now support to configure SSR and SSG per route or something.

 

I love Jekyll forever

 

Gastby + netlify => Best JAMStack in my eyes 🤣

 

Netlify + Any SSR

 

Would definitely go with Jekyll