How to Choose the Best Static Site Generator in 2024

Static site generator is a package used to automate the task of writing HTML pages based on sets of assets, templates, and content, this is where Contentrain comes in as our product works well with all SSG. Content is delivered to static site generators using markup languages like Markdown, HTML, and data in JSON, YAML, or TOML formats.

Content management, generating web pages, and implementing templates (Template is a reusable web page content usually designed by developers to avoid rewriting formats. These templates are mostly web design and layouts) can be achieved by static site generators.

Static site generators can be built with any programming language, so developers will have to consider what language the static site they want to use is built on so in case there is a need to create a native plugin, it would be easy since the developer is already familiar with that language rather than learning a new language. This consideration will save the developers time and increase their productivity. In this article, we will be talking about some of the most popular static site generators (SSGs). The static site generators we will be talking about are built on javascript and ruby

Why Static Site Generators

Years ago, web servers would send out HTML, CSS, and Javascript files, all combining content, data, loops, and logic to render a view when a particular page is requested by the end-user. Static site generators do the exact same thing, the only difference this time is that the pages are pre-rendered and cached in a CDN (A content delivery network is a distributed server that works together to deliver pages faster).

Static site generators give developers the ability to build static web pages and pull/retrieve content from any API or database, unlike the traditional CMS that holds the developer within the confines of the fields it provides. Layouts can be separated from logic, templates can be created and used, and content is completely customizable.

Which SSG should I use for my next project?

If you care about a secure, more performant website, then a static site generator is the best choice. While taking this decision, you should also consider the programming language that works for you. In this session, we will discuss some of the most popular static site generators, including Gatsby.js, Next.js, Eleventy, Gridsome, Hugo, and Nuxt.

Gatsbyjs

Gatsby is an open-source static site generator whose core is javascript, directly built on the React.js framework. Gatsby is written just the way you would write a native React component. It binds the best part of React-router, React-Dom, webpack, and every other front-end tool in react in one. Gatsby allows developers to consume data from any source (CMSs, Markdown, or API) with the help of QraphQl for its data layer (GraphQL is a query language for your API). When thinking about gatsby, think of Jekyll and create-react-app as two flavors mixed together where jekyll gives the feel of prefetching all pages before time and react gives developers an environment that is already used to them to programmatically write and use assets to build performant web apps.

Why you should use Gatsby

Great Documentation

Gatsby has one of the best documentation as everything is well explained and organized. I wasn't so sure until I built a simple blog with it and had to do research for a particular plugin I needed.

GraphQL

According to Gatsby documentation, Gatsby uses GraphQL to enable page and staticQuery components to declare what data the React components need and Gatsby makes the data available in the browser when needed by the component. Avoiding the use of GraphQL makes you miss the essence of Gatsby. Many developers shy away from learning GraphQL but with the Gatsby documentation, you will learn it easily.

React Community

Gatsby is built with one of the most popular javascript libraries “React”. React has been around since 2015, this means that the community is strong and solutions to some problems have been made available and are readily available when you have issues. Gatsby is built on react, so you can build plugins for your project if needed.

Gatsby Plugins, Starters and React Packages

Gatsby has a great community and they have invested a lot in building plugins to suit almost every need while using Gatsby. Furthermore, you can also use the NPM package you have used in your React project since Gatsby was built on react.

Gatsby has beautiful web starters that can help you start building immediately depending on what site it is you want to build.

Image Resizing

Handling images manually while building responsive and performant applications can be very difficult, with the Gatsby plugin image, different sizes of an image and formats are made for you.

Life can be seamless with Gatsby in the picture.

How do I get started with Gatsby?

The above-listed reasons are just a few of what Gatsby can do. If you would like to try out this developer life seamless-making tool, you can navigate to their official website where you can start learning immediately with their rich documentation.

Jekyll

In 2008, Jekyll was first released by Tom Preston-Werner after which was later taken over by Packer Moore, who was now the new maintainer of the project. Jekyll has been there for a long time and is still one of the most popular solutions for static web pages today. Jekyll was originally made for personal websites like blogs, as it is described as a “blog-aware” static site generator. Jekyll uses markdown, Liquid (Liquid is a template language created by Shopify) to generate complete static websites. It supports loading content from YAML, JSON, CSV, and TSV files. blog-aware Jekyll can be connected to our headless CMS contentrain that can efficiently generate content for your Jekyll projects and can be deployed to GitHub pages at no extra cost.

Jekyll is even very friendly to developers and non-technical individuals who only want to update content on their personal blog but can also be used with other front-end products

With markup languages like Textile and Markdown, you are ready to use Jekyll to build your own personal blog. Markdown is generally easy to learn, it might not seem easy for a non-developer but within a few days, you should be able to start using it and you might also need to learn to use GitHub commands. With the help of Liquid, the markdown will be templatized and the completely compiled website is ready to deploy.

How to get started

To get started, you need to have a working knowledge of Git but if you do not have any knowledge of Git, you can make a tutorial on youtube or head on to CodeAcademy.

Linux/Unix is the more preferable kernel that makes installing Jekyll easy, but if you use Windows, you can check their documentation. To install Jekyll on your local machine, you need to install Ruby 2.0 and above, if you don’t have it already installed. To check the version of Ruby you installed, run the following command ruby -v.

To install Jekyll, run the following command $ gem install Jekyll bundler Once the installation is complete, you can use Jekyll to create a project like the below:

$ jekyll new projectname
$ cd project
$ bundle exec Jekyll serve

Once the above command is done, a preview of your website will run on your local server at port 4000.

You can start making changes to your website and push to GitHub. You can create a different branch while building your website and later merge to master from here. You can also take more lessons from Jekyll's official documentation.

Nuxt

Nuxt is a Vue.js framework, this tool is both an SSR and SSG as it gives developers the ability to choose where to render a particular page. Nuxt has the following advantages

Nuxt apps are fast
Standard file structure using best practices,
Automatically does routing
Nuxt is SEO friendly
Universal app setup
Seamless project setup

Nuxt apps are fast

Upon initial loading, Vue apps can be slow due to a lot of server-side rendering which means every page is built on the request of that particular page. With Nuxt, the HMTL pages are already pre-rendered whether or not you choose to render pages universally or statically.

Standard File structure

Projects become very complicated when they get large and so arranging them might become a bit tedious which makes the developer leave developing and start looking for a way to structure the projects so components can be easily sorted out when next the project is open or when a co-worker is onboarded. Nuxt solves this problem by coming up with a standard to and this makes the developer even more focused on developing.

├─ pages
│  └─ index.vue
├─ static
│  └─ favicon.ico
└─ store

Automatic Routing

In Vue, routing is done manually and is really stressful and can be wrongly done sometimes, but Nuxt only requires writing the file name in the page directory, and the route is automatically generated without hassle.

SEO Friendly

Nuxt makes it easier to add SEO tags to make certain pages of your app to make that page easily indexed by the web. This is where static pages come in because the faster a page loads, the better the SEC.

Universal App

Most javascript frameworks focus on SPA (single page application) where pages are rewritten based on user interactions. These pages are only loaded ones and the changes feel like a real native mobile application. Still, there are disadvantages involved because there are still load time delays and google finds it difficult to crawl for SEO purposes because there will be no content when it is rewritten.

The universal app includes SPA but this time, instead of empty index.html files, pages are pre-loaded, and rendered HTML is sent as a response to a browser request for every route.

With Nuxt, setting up universal apps is seamless as it exposes component properties like isServer: and isClient: that can help you easily tell Nuxt if you are rendering a particular page on the server-side or client-side.

Seamless project setup

When creating your project, Nuxt has a starter that asks about what dependencies you’d be needing in your application. what test package to use, what UI framework, where you will get your content from, and much more. It takes all these answers and sets up what you need to develop your application without doing the whole setup yourself. The image below shows me selecting Git-based headless CMS because I will be using contentrain for my content.

How to get Started with Nuxt

To get started with Nuxt, you should have node.js, the latest stable version. Node.js comes with an NPM package with yarn and npx installed by default. To create a new Nuxt project, you can use the command below:

yarn create nuxt-app <project-name>

To launch the app in the preview phase, use the command

cd <project-name>
yarn dev

Next.js

Next is a high-level language built by Vercel on the React ecosystem. Next is a hybrid framework, which is both an SSR and an SSG. The need for very performant tools to build the web cannot be underestimated because it is very crucial to the client and reduces the burden of the developer. The traditional stack had so much to do on the client-side that over time, browsers had to do so much to render content to users, javascript bundles became large, and google was no longer happy because it could not get what particular pages were about for SEO as those metadata were all in the large javascript bundle and this called delayed loading.

The solution to this problem was to render the page on the server and then serve the client-side with just HTML documents which mean browsers still had to load to perform some javascript manipulations to allow user interactivity but not slow this time as the load has been significantly pushed away from the client-side. There are pages where the pages are on-demand page, so these pages should not always be loading, so SSG came in which does the pre-rendering and displays on the rendered page to the user. Static sites are fast and no loading is required.

Why should I use Next

TypeScript Support: A lot of developers love Typescript because of the checks it makes while coding as it will help you discover bugs on time before building. Typescript makes code easier to read and understand why certain codes are buggy as static typing is available.

Better search engine optimization: With the invention of SSG, SEO optimization is very possible and even better than before as the large javascript bundle has reduced and the google crawlers can gather information about a website easily.

Server-Side Rendering:

Next gives a component property called getServersideRrops() which when defined tells Next that this particular page is supposed to be fetched from the server on request time. This makes sense as you can always define which page should load or not.

Pre-rendering (SSG):

Pre-rendering is a selling point for Next as pages are rendered before requesting these pages which are usually done at build time which is part of the CI/CD pipelines. With this rendering power in place, routing is also made automatic which is defined by the getStaticPaths().

Backend Support:

With API Route, you can optionally decide to create your backend or endpoint with Next.js alone.

Incremental Static Regeneration:

With this ability, static pages can be updated easily. Static pages are only built on at build time which is usually part of your CI/CD pipeline and if a static page is rendered, what is rendered is cached but with the revalidate another build can be triggered in the background.

Hugo

Hugo is a static site generator built with Go. It was created by Steve Francia in 2013 and its fame has grown over the years in a very short time. There is no doubt that Hugo’s advantage over other SSGs is its speed.

Similar to Jekyll, your content is stored in your project files but this time in Hugo, it is stored in the content folder. Hugo supports TOML, YAML, and JSON for front-matter data.

Developing with Hugo is a better experience because of the fast build and its live reload on localhost compared to Jekyll. There is an asset pipeline that can process your sass file or better still the CSS file most developers are used to. With Babel, your javascript can be transpiled using resources.Babel.

---
title: "My First Post"
date: 2019-03-26T08:47:11+01:00
draft: true
---

Various formats can be used with Hugo for content like Markdown, and Org Mode, and you can also use natively written HTML.

Why should I use Hugo?

What makes Hugo really shine is the built-in features like menus, sitemaps, and more. These features make websites get ready in the shortest time possible with a seamless experience

Third-party data support

Hugo supports third-party data from sources like Rest API and headless CMS like contentrain. Other external data can be stored in the data folder in JSON or CSV sources.

Build Speed

Hugo outshines many other SSGs when building large projects that are content-heavy like publications websites.

Hugo has an inbuilt menu template that can help the developer customize their menu easily, this does not mean it is concerned with how your HTML is structured, it only provides every function you might possibly need to build and customize your menu however you want.

Theme and Templates

With the ever-growing community of Hugo, awesome themes are made to meet different layout needs. You can install themes using the command line interface and it is just direct to the point.

How to get started with Hugo

Installing Hugo is pretty easy, unlike Jekyll who needs you to set up a Ruby environment to use Jekyll. Hugo has a detailed way of installing their SSG here.

To install on Linux, use Homebrew

brew install hugo

To create a new project, use the following command

 hugo new site web1.domain.com


cd web1.domain.com
// open it in vs code
code .

Download the theme for your Hugo project To download a theme, you can visit here. To use the template, click download and you will be directed to a git repository. Clone the repository

cd web1.domain.com/themes
git clone https://github.com/CaiJimmy/hugo-theme-stack.git

To use the theme, go to your config.toml file and add the following line

//Theme name
theme = "hugo-theme-stack"

To run the Hugo Server,

hugo server

Eleventy (11ty)

According to Eleventy documentation, it was built to be a javascript alternative to Jekyll. Jekyll was built with Ruby which was a pain to developers because of its setup on machines, especially windows. Eleventy’s population has grown so much that it was made to build simple things like blogs or personal sites but because of its community, you can use Eleventy to build even some more large-scale products.

Why should I use Eleventy?

With Eleventy, live rendering is possible even without webpack or Gulp. Eleventy is built to solve three major issues :

Template flexibility
Javascript ecosystem
Decoupled system

Template Flexibility

If you develop a website for your client using the Liquid template but the client later requests for a change to Nunjucks, it is very easy to change the template when using Eleventy or some other static site generator. It is possible to use different templates for both your layout and content. Eleventy supports HTML, Markdown, Liquid, Nunjunks, Handlebars, Mustache, EJS, Haml, and Pug.

Javascript Ecosystem

Javascript has a large community and there are just so many npm packages out there that can potentially help increase the functionality of your Eleventy website.

Decoupled system

Eleventy uses javascript to transform templates into content but does not require you to use any client-side javascript like Nuxtjs and Nextjs but you can use it according to your requirements. Most static site generators are tightly coupled to a framework, but Eleventy allows you to use or does not need them at all. Client-side frameworks like React, Vue, Next, and Nuxt have to download and parse lots of data before hydrating. To solve this problem, vanilla javascript is enough to create functionalities.

How to get started with Eleventy

To get started with Eleventy, create a folder in your terminal called my11tyapp so mkdir my11tyapp. Change directory to my11tyapp and run the following command

npm init -y

Install Eleventy

npm install @11ty/eleventy --save-dev

Check if your installation was fine npx @11ty/eleventy Open my11tyapp on your favorite code editor. I am using vs code. Inside the index.html, you can start writing your template To preview your app locally, run the code below

npx @11ty/eleventy --serve

GridSome

The focus of this open-source generator is to build real fast web applications by adding the following features: code splitting (code splitting is the process of splitting code into bundles or components that are loaded or processed on demand), asset optimization, progressive images, and link prefetching. GridSome is the same as your Vue applications but this time when uploaded, static HTML files are being uploaded which encapsulates all the written logic. GridSome has a similar architecture to Gatsby, just like Gatsby is optimized for speed on React, same for Gridsome.

This is suitable for Vue developers who already know Vue. They can easily jump on it without so many worries.

Why should I use GridSome

GraphQL

GraphQL is inbuilt in GridSome just like Gatsby, which is used to pull the needed data into various vue components. GridSome accept data from any source ranging from headless CMS like contentrain, contentful or even databases like mongodb etc.

The PRPL Pattern

PRPL is a pattern for structuring and serving Progressive Web Apps (PWAs), with an emphasis on the performance of app delivery and launch by GridSome

PRPL stands for

Preload the most important resources
Render the initial route as soon as possible
Pre-cache remaining assets
Lazy load other routes and non-critical assets

This pattern is an optimization solution developed by the google team to make the web faster. The bigger picture is that it works for phones with low networking or are offline or in data saving mode. So GridSome has this technique built inside which means better performance. You can read this detailed article to better understand this concept further.

Pre-fetching Link

Prefetching is a browser mechanism for fetching documents that a user might visit in the future. Prefetching basically means it downloads that page and caches it and it does this by looking for or following a hint, usually link tags which in GridSome is <g-link>. So browsing is insanely fast and smooth.

Vuejs SPA

With GridSome accessing the Vue ecosystem after GridSome generated high-performance static sites, Vue has taken over to hydrate the website in a full single page application. This means the page does not have to be reloaded.

How to get started with GridSome

Learning QraphQl should not be the scare off because you can easily learn why building. To install GridSome CLI :

yarn global add @gridsome/cli

Use the command below to create a new GridSome project

gridsome create my-gridsome-site

To preview changes on localhost, use the command below

gridsome develop

Conclusion

In this article, we have explored different static site generators and the features they offer, and how to get started with them. The above-mentioned SSGs all work well with Contentrain because we are SSG agnostic. Contentrain is git-based which makes integration easy and storage less expensive. Contents are served from text files which means you do not need any database to fetch data from. Easily manage contents from one place and also get others involved with specified roles easily with one click.

We hope you have learned new and relevant information that can help you with what SSG to pick for your next project.