My feedbacks about Static Site Generator

Introduction

I’m looking for an Static Site Generator (SSG) to build my blog. My priorities are cost minimization, easy website maintenance, multilanguage support, and seamless JavaScript integration. I’ve researched various SSGs and would like to share my experiences and feedback on each.

Jekyll

https://jekyllrb.com/

Jekyll, established in 2013, was one of the earliest and most well-known static site generators (SSGs). It is the default choice for GitHub Pages, offering simplicity and ease of use. Built in Ruby, Jekyll comes with a plethora of community-made themes.

However, I didn’t choose Jekyll because there is no clear separation between content and styles. When a user theme is updated, dealing with Git merges can become hard to maintain.

While users have reported performance issues with Jekyll when handling more than 10,000 pages (which isn’t the case for me), it remains a reliable choice, though not the most modern solution.

https://nextjs.org/

Next.js, a React/JavaScript framework, is often claimed to be a static site generator. However, it’s essential to note that it is primarily designed for server-side rendering (SSR). While it does support static site generation (as of 2023), certain critical features like i18n and next/Image are not available. (https://github.com/vercel/next.js/issues/36431)

Moreover, the strong ties with Vercel’s ecosystem services discouraged me, and I prefer seeking more independence.

Gatsby

https://www.gatsbyjs.com/

Gatsby is a popular choice among developers due to its elegant architecture and extensive plugin ecosystem. However, some users have reported performance issues, especially with larger sites. Additionally, integrating internationalization (i18n) can be challenging as Gatsby lacks an official plugin for it. (https://www.gatsbyjs.com/docs/how-to/adding-common-features/localization-i18n/)

Eleventy

https://www.11ty.dev/

Eleventy is a versatile SSG that offers great flexibility. However, it doesn’t support ECMAScript modules (esm), which could limit its usability for me because I want to work with tools like MermaidJS.

Despite this drawback, Eleventy remains a strong contender for simpler projects.

Nuxt

https://nuxt.com/

Nuxt, built on VueJS, offers an excellent developer experience, especially for VueJS enthusiasts. However, during my testing, version 3 had several bugs (as of 2022) that hindered my experience.

I couldn’t initialize a project with tools like Tailwind, and I was unable to launch a development web server. These issues were due to the project being very young.

As a result, I was unable to fully utilize Nuxt for my project.

Hugo

https://gohugo.io/

Hugo, a static site generator written in Go, stood out as an excellent choice during my testing. Its philosophy of being “one big binary” ensures it comes with an extensive set of features, including LiveReload, RSS, image resizing, Markdown support, and table of contents. Hugo is incredibly fast due to its Go implementation.

However, its lack of extensibility is a drawback for me. For example, working with Mermaid is a little challenging, especially if you don’t want to add it to every page automatically. There are solutions like GoAT, but I don’t like the syntax. It is too framework-dependent. (https://gohugo.io/content-management/diagrams/)

AstroJS

https://astro.build/

AstroJS is a promising option that offers a balance between content-centric and rich user interface capabilities. You can integrate frameworks like React, Vue, or Svelte. It uses JavaScript (which I am more comfortable with) and allows me to develop functionalities with TypeScript. While I may not need these functionalities (since I only want a static site), having the ability to add more complex animations with ThreeJS in the future is a valuable feature.

Conclusion

Hugo impressed me with its speed, making it my top recommendation for most projects like documentation. However, if you need more control over your website and prefer using a JavaScript framework, AstroJS is better adapted.