Beginners Guide To Static Site Generators
Beginners Guide To Static Site Generators
Beginners Guide To Static Site Generators
Contents
The Beginner’s Guide to Static Site Generators 4
Next.js 10
Gatsby 19
Eleventy 29
Hugo 37
Nuxt 43
Scully 52
Gridsome 57
Jekyll 65
Bridgetown 71
Final words 77
Setting that aside, the advantages of using static site generators are impressive, with
speed, security, and scalability among the top ones. Whatmore web developers are
already adding dynamic elements with the use of 3rd party APIs, expanding the ca-
pabilities of static sites.
But we’re getting ahead of ourselves. Let’s deal with the basics first.
The biggest difference between the SSGs approach and what is now considered the
traditional web dev approach embodied in the use of WordPress is that instead of
building a page on demand each time a user visits the site, SSG does this at build
time. Basically, an already built page, stored on a CDN, is served to the user when he
visits the website.
This way, you’ll get a website that loads fast but may lack the dynamic functionalities
expected in today’s websites. I’ll get to that in a minute.
Since you are serving only static files, you are bound to have fewer security issues
simply because the surface area for harmful attacks is reduced. And by having a
simple server-side setup, maintenance and scalability are much easier as well.
Then there are the cost-benefits of using static site generators. Besides being globally
and consistently fast and always online thanks to CDNs, serving static sites via CDN
will lower your hosting bills substantially.
While adding dynamic elements and interactivity with users within pages can be a
nuisance, there are already solutions in the ecosystem of Jamstack.
Finally, the sheer abundance of choice (I kid you not, right now there are around 600
listed SSGs) makes the decision making (which one to go for) more difficult than anti-
cipated.
Who is it for?
Once your project needs are considered, think about who’s gonna use/edit the websi-
te? Having a streamlined dev experience that usually comes with the use of SSGs is
great, but are non-technical users going to work on this site once you are done? If so,
think about easing things for them as well. Consider pairing your SSG with a headless
CMS.
Do you code in JavaScript? There are Next.js and Gatsby among the most popular
SSGs for you. Are you tired of heavy JS frameworks? Take a look at Eleventy. Do you like
to write in Go? Then Hugo is the best option. If Ruby is the language of your choice,
you should go with Jekyll. Vue is your thing? Check Nuxt.js or Gridsome.
While using preferred language or a framework can ease up the job, keep in mind
project needs first.
For the sake of clarity and ease of comparison, each static site generator
review has the same structured. First, we talk about the history and the
current state of the project.
Next, we cover the best features and strengths. Then, we focus on the
ecosystem and showcase a couple of the most popular projects.
Finally, we’ll show you how to get started and how to deploy your project
with SSG in question. And in the end, as a recap, we’ll go through the best
features and use cases.
Next.js
// pages/index.js
import React from ‘react’
export default () => <div>Hello world!</div>
I executed now in the terminal and the magic happened. Two lines of code, one com-
mand later, and my new hello world website went live. It was hard to compare that
experience to developing custom WordPress themes. Next.js and Now (currently Ver-
cel) felt incredibly easy. Almost like cheating.
A few months later, I shipped my first project using Next.js and the WordPress API. The
project had some serious performance issues. Fetching data on every request from
many API endpoints wasn’t the best idea. I probably should export those pages to
static ones, right? But it wasn’t trivial in the first versions of Next.js.
• getStaticProps to fetch data at build time, this can be content for a single
post
• getStaticPaths to specify a collection of dynamic routes, for example, a list of
blog posts
• getServerSideProps to fetch data on every request.
// pages/posts/[slug].js
// [slug] filename means it’s a dynamic parameter
// it will be passed to getStaticProps `params` object
const BlogPost = ({ data }) => <Post content={data} />
The code above fetches from the API all blog posts at build time and creates paths
array with slug for each of them. Data for each single blog post is fetched in getSta-
ticProps based on the slug param.
If you are familiar with Gatsby, you can notice that getStaticProps is a bit like cre-
atePages in gatsby-node.js. But I think Next approach is easier to understand. The
difference is that you don’t need to specify a path to a template and passing slug in
context. In Next, everything is in the same file. In this case, slug value is accessible
through a query parameter. To learn more check the Migrating from Gatsby article.
If you add a new post you need to re-build the project unless you change fallback to
true. If there is no existing HTML file on the CDN, Next.js will try to fetch content on the
client and cache it. Fallback is very useful if you have a large collection of posts that
updates frequently.
Image component
Next.js 10, among other things, has introduced a new, built-in image component
and optimization. From now on you don’t have to worry about shipping large images
for mobile devices. Next handles resizing and generates a modern WebP image for-
mat that is approximately 30% smaller than JPG. If your website has a lot of images
this can greatly reduce bandwidth and client-side performance.
Next.js approach doesn’t affect build time at all. All optimizations are done at requ-
est time. Currently, Next supports 4 cloud providers: Vercel, Imgix, Cloudinary, and
Akamai.
File Structure
├── package-lock.json
├── package.json
├── pages
│ ├ ─ ─ about.js
│ ├ ─ ─ blog
│ │ ├ ─ ─ [slug].js
│ │ └ ─ ─ index.js
│ └ ─ ─ api
│ ├ ─ ─ posts.js
│ ├ ─ ─ about.js
│ ├ ─ ─ blog.js
│ ├ ─ ─ contact.js
│ └ ─ ─ index.js
└── public
└ ─ ─ logo.png
Ecosystem
Next.js has a great, growing community. You can read some interesting conversations
and discuss RFC on Github. Vercel’s team is very clear about the framework direction
and open to community suggestions.
There is a lot of examples showing integration with different tools like Headless CMS,
CSS-in-JS, or auth.
Showcase
npx create-next-app
# or
yarn create next-app
That one command sets up the project for you. Your development environment will
be available at http://localhost:3000.
If you want to learn more, I highly recommend the official Learn Next tutorial.
It helps to understand how to navigate between pages, add static assets, and fetch
data. Once completed you will be ready to build your first Next.js application!
Deploying Next.js
The recommended platform is, of course, Vercel. Its CDN is designed at the edge to
support features like incremental static generation, where pages first are populated
into the durable store (S3), then the pathname is purged to ensure users are able to
see the most recent content.
Preview mode works seamlessly on the Vercel platform, as well as the fallback featu-
re. You can connect your repository and everything works out of the box with no ad-
ditional config needed.
If for some reason you don’t want to use Vercel, it is possible to deploy Next.js on eve-
ry modern hosting platform like Netlify, Render, AWS, DigitalOcean, and so on. Netlify
Conclusion
With Next.js you can build a full spectrum of websites and apps. From simple marke-
ting pages and blogs to eCommerce and PWA with cookie-based authentication.
It’s great for projects that require flexibility in how you build specific parts of the
website. First-world static site generator with capabilities of dynamic enhancement.
Hybrid mode is what really shines. Does it mean it’s perfect for everything? Not at all.
If you don’t need React and don’t plan to update the project frequently it might be
overkill.
Gatsby
Gatsby is the most popular static site generator build on top of the most
popular Javascript framework - React.js. It was created by Kyle Matthews
who later, together with Sam Bhagwat founded Gatsby, Inc. with a mission
to make building websites fun.
Gatsby Story
GatsbyJS was born in 2015 as a simple static site generator. During the last 5 years, it
has become the most popular solution in the market. Gatsby helped Jamstack grow
to what it is now.
In 2019 Gatsby, Inc. secured $15M in Series A funding and built its first commercial pro-
duct - Gatsby Cloud, CI platform that focuses on fast incremental builds. I’ll talk about
this a bit later. Let’s start with the SSG overview.
Content Mesh
One of the most opinionated things in Gatsby is data fetching. Gatsby creates an
internal GraphQL API. It’s a kind of middleware between the content sources and the
frontend template.
You can connect Gatsby with every popular Headless CMS. A large collection of gats-
by-source plugins makes it easy. You can mesh sources in a single GraphQL query.
Everything becomes one, big graph.
You need to learn GraphQL and Gatsby API to enjoy the mesh concept. For simple sta-
tic websites, it might be too much. Working with GraphQL can be painful, errors some-
times are weird. Debugging is hard. Some people like it, others don’t.
If you ask me, GraphQL API is a good way to unify and standardize the way we build
products at agencies like ours. No matter what CMS we pick, the way we generate
pages and fetch data is similar.
For instance, take a look at how to fetch products from Shopify and content from
Contentful:
node {
id
slug
title
}
}
}
allShopifyProduct {
edges {
node {
id
title
productType
vendor
variants {
id
title
price
}
}
}
}
}
`
You can fetch data from everywhere. Headless CMS, local filesystem, external
GraphQL or REST API, Google Spreadsheet, Airtable, and so on. You can write your own
source-plugin to create a custom integration with your backend.
GraphQL queries execute only during the build. If you change something in the CMS,
you need to rebuild the project. You can still fetch data on the client like in any other
React app. For example, using SWR or a simple fetch, but it won’t be pre-rendered.
File Structure
├ ─ ─ gatsby-browser.js
├ ─ ─ gatsby-config.js
├ ─ ─ gatsby-node.js
├ ─ ─ gatsby-ssr.js
├ ─ ─ package-lock.json
├ ─ ─ package.json
├ ─ ─ src
│ ├ ─ ─ html.js
│ └ ─ ─ pages
│ ├ ─ ─ 404.js
│ ├ ─ ─ about.js
│ ├ ─ ─ blog.js
│ ├ ─ ─ contact.js
│ └ ─ ─ index.js
└ ─ ─ static
└ ─ ─ logo.png
The first four files you have access to Gatsby API. In other words, you can modify what
Gatsby does under the hood. Add plugins, generate pages from API, adjust SSR, ma-
nage what is happening on init render in the browser, and so on. Explore full API’s ca-
pabilities reading the official docs.
Ecosystem
Over the years the community of Gatsby devs has created thousands of themes, plu-
gins, and starters. Gatsby has the biggest ecosystem in the Jamstack space. The last
time I checked the plugins library, there were more than 2400 ready to install packa-
ges.
You may like plugins or not. But there is a great possibility that someone already had
the same issue as you and published a solution for it.
A large ecosystem enhances the developer experience. This basically means boring
tasks like generating a sitemap or adding a content security policy already have a
solution.
Showcase
The fastest way to get started with Gatsby is to use one of many starters available.
To create a project from the starter, pick one from the gallery, copy its Github URL, and
run:
Deploying Gatsby
You can deploy Gatsby anywhere. The only command that needs to be executed is:
gatsby build
Everything works fines when your project contains a small amount of GraphQL queries
and images. For a larger set of images - think a few hundreds - the build tends to be
very slow. In some cases, CI/CD tool can fail with time out error.
If you want to improve the build time, the easiest solution is to switch to Gatsby Cloud.
It is designed to support fast Incremental Build and has better cache management.
Gatsby Cloud handles the building part, but to deliver the website to users, you need
to host it somewhere. It’s easy to connect projects with any of the popular hosting
providers. Gatsby integrates with Netlify, Vercel, Fastly, Google Storage, Azure, Fireba-
se, and AWS S3. Pick the one that matches your existing infrastructure best.
Conclusion
Gatsby.js is a good fit if you use many data sources and want to use one internal API
to rule them all. Gatsby, like Next, is based on React. It’s easy to create interactive
components, but it comes with JS cost. Client-side routing optimizes perceived per-
formance, especially on high-end devices.
It’s not the lightest static site generator because it requires loading a bunch of Ja-
vaScript. It might be tough to achieve a perfect Lighthouse score, but sometimes
that’s not the point. You can create a very fast website that will be very fast and ple-
asant to use for your audience.
Eleventy
Ever since Zach Leatherman created Eleventy in 2018 it is gaining more
and more followers especially from people tired of JS-heavy static site
generators. Eleventy is zero-config by default and works with any project’s
structure. It is doesn’t tie you up with any framework and supports up to
eleven different template languages. Eleventy is simple(r). Eleventy adapts
to you.
Many modern static site generators use some sort of JavaScript framework, with the
most popular ones being React, Vue, and Angular. Eleventy uses JavaScript to gene-
rate static pages. No need for a client-side framework.
It doesn’t mean you can’t use any framework. It means it’s optional and it’s up to you
if you want to use one.
Progressive Enhancement
Long time to interactive (TTI) is a common issue in JS-based static generators like
Gatsby or Next.js. The browser needs to download, parse, and execute a big chunk of
JS to hydrate the application. That comes with a cost. It ends up with TTI, and input
latency increases.
On a typical website, a lot of components are not very interactive, yet they need to
hydrate. React team works on partial hydration that should help solve this issue, but
the ETA is not clear.
In Eleventy, you can focus on providing the essential content first and add dynamic
functionality step by step. Sometimes, vanilla JavaScript and pure CSS are enough to
create things like animations and sliders.
Leaderboards update every 2 weeks and display a list of best-scoring projects. Most
of those are very simple personal websites. So take this with a grain of salt, i.e., it do-
esn’t really mean Eleventy is the fastest SSG on the market. I do believe a lot of those
pages would have similar scores using other static site generators.
File Structure
Can be as simple as:
└ ─ ─ index.md
├ ─ ─ _site
│ └ ─ ─ index.html
└ ─ ─ index.md
Let’s try to create a simple blog. The example below is based on the official eleventy-
-base-blog starter.
├ ─ ─ .eleventy.js
├ ─ ─ .eleventyignore
├ ─ ─ _data
│ └ ─ ─ metadata.json
├ ─ ─ _includes
│ ├ ─ ─ components
│ │ ├ ─ ─ footer.njk
│ │ ├ ─ ─ head.njk
│ │ └ ─ ─ header.njk
│ └ ─ ─ layouts
│ ├ ─ ─ base.njk
│ └ ─ ─ post.njk
├ ─ ─ index.njk
└ ─ ─ posts
├ ─ ─ hello-world.md
└ ─ ─ posts.json
Data Sources
Eleventy pulls data from multiple sources. The most straightforward one is Front Mat-
ter inside page or templates files.
---
title: Post title
author: John Doe
---
<h1>{title}</h1>
<span>by {author}</span>
...
To fetch data from API, you need to create a JS file inside _data folder - that way, the
data will be available globally.
If you want to fetch data and use it in a specific scope you need to create
a *.11tydata.js file inside template or directory folders.
return data
}
Ecosystem
Eleventy does have a list of starters created mostly by the community. Cool thing is
that you can see the Lighthouse scores of each started, updated daily.
Eleventy doesn’t have a lot of ready to use plugins, but there are a few that add func-
tionality like RSS, PWA, Tailwind, Table of Contents, and more.
Showcase
eleventy --serve
Conclusion
Hugo
Written in Go to deliver the fastest build time on the SSG market. Created
by Steve Francia and Bjørn Erik Pedersen the first public release was on
July 5, 2013. Currently, maintained by Bjørn. Hugo has many fans because
of its speed and flexibility that allows you to create a large website that’s
easy to scale.
Like Eleventy, Hugo encourages progressive enhancement rather than full JS hydra-
tion. It’s not tied up with any JavaScript framework.
Data fetching
Hugo supports only local flat files like markdown. If you prefer to edit content through
a nice user interface, take a look at Git-based CMSs. Popular options are NetlifyCMS
and Forestry.
To fetch data from an external API, for example, a headless CMS, use getJSON func-
tion.
<div>
{{ $posts := getJSON „https://API.DOMAIN/posts” }}
{{ range first 10 $posts }}
<article>
<h2>{{ .title }}</h2>
<div>{{ .content }}</div>
</article>
{{ end }}
</div>
File Structure
├ ─ ─ archetypes
│ └ ─ ─ default.md
├ ─ ─ config.toml
├ ─ ─ content
├ ─ ─ data
├ ─ ─ layouts
├ ─ ─ static
└ ─ ─ themes
To learn more about specific folders, check out the official docs.
Ecosystem
Because of its build performance and simplicity Hugo has gained many fans over
the years. In case you have an issue, you can get an answer pretty fast at the official
public forum.
Hugo maintains a large collection of themes. Those are not official projects. Most of
them are created by Hugo developers from all over the world. Offered on MIT license -
free to use and modify. There is a variety of categories to explore: simple blogs, docu-
mentation, landing pages, resume, and many more.
Showcase
hugo server -D
Conclusion
Hugo might feel a little bit old-fashioned for those of you who like to use modern JS
frameworks like React, Vue, or Svelte. But Hugo’s age is its strength as well. Battle-
-tested on many big projects by well-known companies gives you the confidence it
won’t disappear tomorrow.
Nuxt
What started as an e-commerce site experiment became a higher-le-
vel framework for production-ready Vue applications. The prototype was
released to the public a few weeks after the first official release of Next.js.
Nuxt was created to solve many of the same problems with building apps
for Vue as Next does for React. Today it comes pre-configured with the
most crucial elements and intelligent defaults based on well researched
best practices to give end-users the best experience.
When first introduced to the public, Nuxt was incredibly lightweight and could only be
installed as a template on top of the Vue CLI, a command-line interface to help you
develop your application. Even so, it already allowed for server-side rendering as well
as to generate a static website.
Nuxt 1.0
It was released on the 8th of January 2018 with the help of a few additional contribu-
tors and hosted on Now (Vercel). Their documentation is made with Nuxt.js itself and
at the time of this release, was already translated into 6 different languages. New
features ranged from layout transitions to improved middleware functionality.
File Structure
├ ─ ─ assets
│ └ ─ ─ README.md
├ ─ ─ components
│ ├ ─ ─ Logo.vue
│ └ ─ ─ README.md
├ ─ ─ content
│ └ ─ ─ hello.md
├ ─ ─ layouts
│ ├ ─ ─ README.md
│ └ ─ ─ default.vue
├ ─ ─ middleware
│ └ ─ ─ README.md
├ ─ ─ pages
│ ├ ─ ─ README.md
│ └ ─ ─ index.vue
├ ─ ─ plugins
│ └ ─ ─ README.md
├ ─ ─ static
│ ├ ─ ─ README.md
│ └ ─ ─ favicon.ico
├ ─ ─ store
│ └ ─ ─ README.md
├ ─ ─ README.md
├ ─ ─ jsconfig.json
├ ─ ─ nuxt.config.js
├ ─ ─ package-lock.json
└ ─ ─ package.json
This is roughly the default structure you’ll end up with when using create-nuxt-app
depending on how you answer the setup questions. Every directory contains a READ-
ME.md file explaining what should go inside and includes a link to the documentation.
Nice!
In the above structure, there is a directory called content which may seem a bit
vague, but it was only added because I chose to install the module Nuxt Content,
a git-based headless CMS. I will demonstrate how to fetch and use the content from
hello.md later.
Fetching data
Here is a basic example of how to fetch data from Contentful. First we need to install
the Nuxt module. We also need the dotenv module to manage our local environment
variables for security purposes. Nuxt has added .env to our .gitignore by default.
Next, we set up our private keys in a .env file at the root of our project:
CONTENTFUL_SPACE_ID=123
CONTENTFUL_ACCESS_TOKEN=abc
Then we let Nuxt know about them and add our Contentful configuration to
nuxt.config.js:
require(‘dotenv’).config()
export default {
env: {
CONTENTFUL_SPACE_ID: process.env.CONTENTFUL_SPACE_ID,
CONTENTFUL_ACCESS_TOKEN: process.env.CONTENTFUL_ACCESS_TOKEN
},
contentful: {
default: ‘master’,
activeEnvironments: [‘master’],
environments: {
master: {
space: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
environment: ‘master’
}
}
},
modules: [
‘contentful-module’
],
build: {
transpile: [‘contentful-module’]
}
export default {
async asyncData ({ app }) {
const data = {}
await app.$contentful.client.getEntries({ content_type: ‘homepage’ })
.then((res) => { data.intro = res.items[0].fields.intro })
return { intro: data.intro }
}
asyncData will merge its return value into the component’s local state otherwise
known as data. We then just need to display it by simply adding the following to our
<template>:
I am fetching a single field for example purposes, but already you can see the diffi-
culty you will run into when working with the Contentful data structure. It is strongly
recommended to use GraphQL and Nuxt provides a module, https://github.com/nuxt-
-community/apollo-module, to use vue-apollo for this.
Content by Nuxt
Nuxt provides its own headless CMS which is able to handle Markdown, CSV, YAML,
JSON, and XML. As you can see, fetching Markdown from the default hello.md is incre-
dibly simple:
Ecosystem
To extend the functionality you can use many available Nuxt modules. The library
contains over 140 different modules, from PWA integration to various headless CMS
like Prismic, Storyblok, Sanity, and many more.
Showcase
You will be asked a series of questions about the various options and technologies
you would like to use for this project. Once complete all dependencies will be installed
and you can navigate to your project and immediately launch it:
yarn dev
# or
npm run dev
Deploying Nuxt.js
If you navigate to the faq page and scroll the left-hand side menu you will find a
section on deployment. Deploying to some of the most popular platforms like Vercel,
Netlify, and AWS requires only a couple of steps and you’re good to go.
Conclusion
Nuxt.js is a full-service framework. You can use it as an SSG, SPA, or server-side ren-
dered app. It comes packaged with some of the most advanced features you will
find with any JavaScript-based framework. This includes the ability to run middleware
before navigating to a new route or even server-side middleware which allows you to
register additional API routes without the need for an external server! The options are
endless and the flexibility is truly impressive.
Scully
Scully is the Angular answer for Jamstack. Created by experts at HeroDevs
it is probably the only static site generator based on Google’s JS frame-
work, opening the possibilities of Jamstack for all Angular projects.
Scully is quite a fresh solution - the first commit, created by Jorge Cano, was on 12
December 2019. After a few months of work, there is a stable 1.0.0 release, which me-
ans it is production-ready for real-world projects.
Angular integration
Scully integrates with any existing Angular project - you only need to run one setup
command. This approach makes it trivial to turn your website static.
File structure
Running Scully in your project creates only a few elements and all of them are sim-
ple configuration files where you can change the project’s settings, add plugins, and
customize the tool’s behavior.
Ecosystem
Despite Scully being quite young it already provides a way of creating custom plu-
gins, integration with API, and 3rd-party scripts. There is a small library of plugins with
an in-depth description of the installation and setup of each one.
Showcase
ng add @scullyio/init.
ng build --prod
After the project is built you can run Scully using npm run scully. That’s it. A more in-
-depth description of the process, along with solutions to potential problems, you’ll
find in Scully’s documentation.
Conclusion
For now, Scully is the only static site generator made specifically for Angular. It is a
great choice if you want to turn an existing project into a static website or you just
want to try out the Jamstack approach in Angular enviroment.
Gridsome
Built for the Jamstack workflow and highly inspired by Gatsby (with a simi-
lar architecture) but in Vue.js style. Optimized for speed and ease of use.
Gridsome, while still new, is a solid choice capable of integrating with any
data source you want.
On the 10th of October 2018, the Gridsome team officially announced the first beta re-
lease soon to be published. The goal was to create a Vue.js alternative to Gatsby and
much of their popularity they own because they were able to build on and learn from
the knowledge and advancements of the Gatsby team that had already worked for
over three years.
File structure
├ ─ ─ src
│ ├ ─ ─ components
│ │ └ ─ ─ README.md
│ ├ ─ ─ layouts
│ │ ├ ─ ─ Default.vue
│ │ └ ─ ─ README.md
│ ├ ─ ─ pages
│ │ ├ ─ ─ About.vue
│ │ ├ ─ ─ Index.vue
│ │ └ ─ ─ README.md
│ ├ ─ ─ templates
│ │ └ ─ ─ README.md
│ ├ ─ ─ favicon.png
│ └ ─ ─ main.js
├ ─ ─ static
│ └ ─ ─ README.md
├ ─ ─ README.md
├ ─ ─ gridsome.config.js
├ ─ ─ gridsome.server.js
├ ─ ─ package.json
└ ─ ─ yarn.lock
If you open your gridsome.config.js file, all you will see is some comments and these
settings:
module.exports = {
siteName: ‘Gridsome’,
plugins: []
}
Another critical file to take note of is gridsome.server.js. This one allows you to hook
into Gridsome Server where you can access the various APIs, load data from local
files or external APIs or programmatically create pages.
Data fetching
Let’s see how we might fetch data from Contentful for a single page. First, we need
to install the Contentful plugin:
Next, we set up our private keys in a .env file at the root of our project:
CONTENTFUL_SPACE_ID=123
CONTENTFUL_ACCESS_TOKEN=abc
It’s important to note that Gridsome does not provide you with a Git repository, me-
aning not only you’ll need to set one up for yourself, but you must make sure to add
.env* to your .gitignore file. This is absolutely critical so that you do not share your pri-
vate keys. The reason for the * is you can have different variables for different environ-
ments. Use the filename convention ’.env.developmentand.env.production`.
module.exports = {
siteName: ‘Gridsome’,
plugins: [
{
use: ‘@gridsome/source-contentful’,
options: {
space: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
host: ‘cdn.contentful.com’,
environment: ‘master’,
typeName: ‘Contentful’
}
}
]
}
Like Gatsby, Gridsome provides us with a GraphQL data layer. If you are unfamiliar
with GraphQL there is a handy playground that you can access at http://local-
host:8080/___explore. After running gridsome develop that will pretty much auto-
complete a query for you to fetch your Contentful data. Here’s how to structure your
query in Index.vue:
<page-query>
query {
products: allContentfulProducts {
edges {
node {
id
title
}
}
}
}
</page-query>
To list our products we simply loop through the edges in our <template>:
<ul>
<li v-for=”edge in $page.products.edges” :key=”edge.node.id”>
{{ edge.node.title }}
</li>
</ul>
Ecosystem
Showcase
They do have a collection of 3 official Starters and 20 others added by the commu-
nity. I recommend you use the default starter replacing new-project with your project
name of choice:
gridsome develop
Deploying Gridsome
The Gridsome team recommends connecting a deploy service that builds your site
from a selected Git-based repository. The top services listed include AWS Amplify,
Vercel, and Github Pages. At the top of the list, however, is Netlify and the process co-
uld not be simpler as explained here.
Conclusion
Gridsome is extremely lightweight and a perfect choice for getting a simple static site
up and running quickly. It can also handle complexity and reports to be able to “ge-
nerate thousands of pages in seconds”. Gridsome could be worth considering for lar-
ge sites as well. But remember, it’s still early days for this SSG. Personally, I think Nuxt.
js is a safer bet for a Vue-based site. Keep an eye out for future improvements as the
Gridsome team works on new versions.
Jekyll
Jekyll is a static site generator written in Ruby. It uses the basics (HTML,
Markdowns, Liquid templating) to quickly create fast websites. That puts
it at a bit of a disadvantage in the current JavaScript-hungry web world,
but despite that, it is still one of the most popular and well-known SSGs.
Its popularity is high not only due to speed and simplicity, but also its
involvement and adoption in the functionality of Github Pages.
The first version of Jekyll was published on December 19th, 2008. For many people, it is
a date that started the trend towards the static web. Jekyll’s community quickly grew
and currently, there are almost one thousand contributors, not including a plethora of
free tools, plugins, and resources. In 2017 Jekyll claimed first place in the Top Ten SSGs
by Netlify, citing its popularity, speed, and great support as the reason.
Best features
The idea couldn’t be simpler: Jekyll takes your content (markdown files) and based on
defined templates (HTML with Liquid tags and CSS) generates a static website rea-
dy to be served. Its straightforwardness is great for creating blogs or small personal
projects.
File structure
├ ─ ─ _config.yml
├ ─ ─ _data
├ ─ ─ _drafts
├ ─ ─ _includes
├ ─ ─ _layouts
├ ─ ─ _posts
├ ─ ─ _sass
├ ─ ─ _site
└ ─ ─ index.html
Most of the folder names speak for themselves. In short - dynamic content is stored
in the _posts folder, and based on the information from _data, templates from _inc-
ludes and _layouts, Jekyll generates static files and puts them into the _site folder.
For an in-depth description of each folder visit this documentation page.
Ecosystem
There’s a bunch of useful plugins, themes, and resources created by the Jekyll com-
munity. It’s not as vast compared to other SSGs, but it is definitely enough for most
use-cases.
Showcase
For Windows, it is quite easy, even if it’s not an officially supported platform:
2. Run ridk install command, that will install gems, with all necessary extensions
3. Run bundle exec jekyll serve to build the website and make it available at http://lo-
calhost:4000. You will be presented with the default template website.
Conclusion
Jekyll is one of the simplest static site generators you could find. It is a great alterna-
tive to traditional CMSs, especially for websites with a lot of static content. It is also the
best SSG when you are not an experienced programmer or don’t want to deal with
high-level concepts. The huge Jekyll community provides many resources and ma-
kes the implementation of many use-cases trivial.
Bridgetown
Bridgetown was born in March 2020 as a fork of Jekyll. Web studio backing
this project was focused on creating something more appropriate to the
new Jamstack approach.
Bridgetown gets rid of all deprecated Jekyll configurations. It comes with a default
configuration of Webpack to handle building and exporting frontend assets such as
Javascript and Typescript, CSS/SCSS, and related files that are imported through We-
bpack (fonts, images, etc.)
Data Sources
Sourcing data is very straightforward in terms of local files. Default config comes with
support for posts in _posts folder. What makes making blog-aware websites very
fast.
To fetch data from an external source you need to know the basics of Ruby, as it
required writing a function (plugin in fact) which will be run during the build process,
for example:
File structure
├ ─ ─ frontend
│ ├ ─ ─ javascript
│ └ ─ ─ styles
├ ─ ─ node_modules
├ ─ ─ plugins
├ ─ ─ src
│ ├ ─ ─ _components
│ ├ ─ ─ _data
│ ├ ─ ─ _layouts
│ ├ ─ ─ _posts
│ ├ ─ ─ 404.html
│ └ ─ ─ index.md
├ ─ ─ bridgetown.config.yml
├ ─ ─ Gemfile
├ ─ ─ Gemfile.lock
├ ─ ─ start.js
├ ─ ─ sync.js
├ ─ ─ yarn.lock
├ ─ ─ webpack.config.js
└ ─ ─ package.json
Ecosystem
One of the core features of Bridgetown is that it can be extended by custom plugins.
Starting from fetching data from external API, adding support for new markup or tem-
plate language to taking full control over the build process.
Bridgetown despite being very fresh, has a pretty lively Discord community. Everyone
is welcome to ask questions or just chat.
Showcase
The build is a very simple process, you need to run only one command and the pro-
duction bundle will be created in the “output” folder which can be later pushed to any
static files hosting provider, eg: Netlify or Vercel.
Conclusion
Bridgetown is still way behind the competitors, but it’s worth keeping an eye on. Espe-
cially, if you like Ruby. It’s still in its early days but in the future, it can bring some fresh
fruit.
Final words
In a Nutshell
With static site generators, you get the benefits of using a traditional CMS, with the
simplicity and performance of static HTML. They’re reliable, scalable, can potentially
save you time and money, and can handle high volumes of traffic well.
From our own experience, if you’re seeking simplicity and a short learning curve -
you should go with Eleventy. If you are building a big site, and you want to be able to
change and add many new posts, choose Hugo. In any other case, I’d suggest you go
with Gatsby or Next.js, Gridsome or Nuxt if you are into Vue.
Stuck with a project? Not sure which one of these static site generators is best for you?
Let’s get in touch!
We’ll be more than happy to chat through your requirements and advise you on the
best path forward.