Godwin A. EkainuTechnical Content Writer
How to Choose the Best Static Site Generator in 2022
Static Site Generators
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.
Why Static Site Generators
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.
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
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
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.
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.
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.
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.
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
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 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
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.
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.
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
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
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.
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 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
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 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.
--- 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.
Hugo outshines many other SSGs when building large projects that are content-heavy like publications websites.
Dynamic Menu creation
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,
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
- Decoupled system
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.
How to get started with Eleventy
To get started with Eleventy, create a folder in your terminal called
Change directory to
my11tyapp and run the following command
npm init -y
npm install @11ty/eleventy --save-dev
Check if your installation was fine
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
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 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.
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.
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
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.