Static Site Generators Icon

Static Site Generators

Jekyll, Hugo, Gatsby, and anything that generates a static site from a set of inputs.
19 Stories
All Topics

Changelog Interviews Changelog Interviews #509

A new batch of web frameworks emerge!

This week we’re talking fresh, faster, and new web frameworks by way of JS Party. Yes, today’s show is a web framework sampler because a new batch of web frameworks have emerged. There’s always something new happening in the front-end world and JS Party does an amazing job of keeping us up to date. So…what’s fresh, faster, and new?

The first segment of the show focuses on Deno’s Fresh new web framework. Luca Casonato joins Jerod & Feross to talk about Fresh – a next generation web framework, built for speed, reliability, and simplicity.

In segment two, AngularJS creator MiÅ”ko Hevery joins Jerod and KBall to talk about Qwik. He says Qwik is a fundamental rethinking of how a web application should work. And he’s attempting to convince Jerod & KBall that the implications of that are BIG.

In the last segment, Amal talks with Fred Schott about Astro 1.0. They go deep on how Astro is built to pull content from anywhere and serve it fast with their next-gen island architecture.

Plus there’s an 8 minute bonus for our ++ subscribers (changelog.com/++). Fred Schott explains Astro Islands and how Astro extracts your UI into smaller, isolated components on the page, and the unused JavaScript gets replaced with lightweight HTML — leading to faster loads and time-to-interactive.

JavaScript zachleat.com

The many definitions of Server-Side Rendering

Zach Leatherman breaks down what SSR means in various contexts (component frameworks, app frameworks. Here’s the gist, but the details are good to so def read Zach’s full post:

Application frameworks most often define SSR as the alternative to SSG (static site generation). A runtime server is used to render the components on request.

Component frameworks define SSR as generating static HTML from a component definition. They offer no preference as to whether this should or can happen at build time or at request-time.

JS Party JS Party #217

Going full-time on Eleventy

Zach Leatherman recently announced he will now be working on Eleventy – his simpler static site generator – while continuing to work at Netlify. What makes Eleventy special? How’d he convince Netlify to let him do this? What does this mean for the project’s future? How many questions in a row can we type into this textarea? Tune in to find out!

JavaScript zachleat.com

Eleventy v1.0.0, the stable release

Eleventy creator, Zach Leatherman:

This project would not be possible without our lovely community. Thank you to everyone that built something with Eleventy (Ɨ476 authors on our web site!), wrote a blog post about Eleventy, contributed code to core or plugins, documentation, asked questions, answered questions, braved The Leaderboards, participated on Discord, filed issues, attended (or organized!) a meetup, said a kind word on Twitter ā¤ļø.

Congrats to Zach and the entire Eleventy community on the big 1.0! šŸŽ‰

Rust github.com

A fast static site generator in a single binary with everything built-in

Lots to like here:

Zola comes as a single executable with Sass compilation, syntax highlighting, table of contents and many other features that traditionally require setting up a dev environment or adding some JavaScript libraries to your site.

And here:

The average site will be generated in less than a second, including Sass compilation and syntax highlighting.

I’d love to see some build time benchmarks on a site with many pages.

CSS-Tricks Icon CSS-Tricks

Comparing static site generator build times

Sean C Davis writing on CSS-Tricks:

A colleague of mine built a static site generator evaluation cheatsheet. It provides a really nice snapshot across numerous popular SSG choices. What’s missing is how they actually perform in action.

Sean set out to test 6 of the most popular SSGs on the market today. The results are somewhat expected (Hugo is the super fast), but there are some surprises in there as well (Hugo scales poorly, but it doesn’t matter so much because it’s super fast)

Comparing static site generator build times

Rust github.com

A tiny, full-text search engine for static sites built with Rust and WASM

A Rust/WASM port of the Python code from the article ā€œWriting a full-text search engine using Bloom filtersā€. This can be seen as an alternative to lunr.js and elasticlunr.

The idea is to generate a small, self-contained WASM module from a list of articles on your website and ship it to browsers. tinysearch can be integrated into the build process of generators like Jekyll, Hugo, zola, or Cobalt.

Kick the tires on the author’s blog.

GraphQL github.com

Mordred brings Gatsby's "source data from anywhere" idea to the rest of us

One of Gatsby’s greatest virtues is how it normalizes all data sources through its source plugin architecture. This is cool because it gives you a unified access layer for everything from the file system to 3rd-party APIs to headless CMSes.

Kevin Titor must’ve liked the idea enough that he’s bringing it to other frameworks that support static site generation (Next.js, Nuxt.js, Eleventy, etc.). The main thing missing from Mordred is a community creating plugins for popular CMSes and services; a great way to get involved!

JavaScript simplabs.com

How to over-engineer a static page

Marco Otte-Witte:

When we set out to rebuild our own website simplabs.com in 2019, we wanted to use that project as an opportunity to ignore all economic considerations (and reason you could say) and dive deep into what was technically possible. Doing so would allow us to build something that was super customized for our specific needs and highly optimized for performance. We ended up spending a lot of time and effort but are quite pleased with the result.

While we cannot recommend anyone following our example as your time is most likely better spent elsewhere, this post explains the approach we took. I will be covering topics like static pre-rendering and client-side rehydration, advanced bundling and caching strategies as well as service workers.

Highlights added by me because this is a fun read (and no doubt a fun experiment for them), but I also cannot recommend you follow their example. šŸ˜‰

JavaScript github.com

A Next.js site demonstrating SSG support with a Notion-backed blog

I’m not sure which is more interesting: the fact that Next.js is getting in to the static-site generation game or the fact that Notion is becoming popular enough amongst devs that people would use it as a back-end for their blog.

The Notion aspect, while interesting, comes with a big disclaimer:

since it is using a private API and experimental features, use at your own risk as these things could change at any moment.

Go github.com

A static website "generator" that lets you use servers and frameworks you already know

The scare quotes around generator are there because Staticgen doesn’t actually generate a static site for you. Instead, it downloads your dynamic site and produces a static version of it. A slightly new twist on an old idea:

If you’re unfamiliar, you can actually use the decades-old wget command to output a static website from a dynamic one, this project is purpose-built for the same idea, letting your team to use whatever HTTP servers and frameworks you’re already familiar with, in any language.

It is not without its caveats (no JavaScript rendering is a big one), but this could be useful in many circumstances you may find yourself in.

Sara Soueidan sarasoueidan.com

Migrating from Jekyll and GitHub Pages to Hugo and Netlify

Sara Soueidan:

My site is relatively small, I’d say. I have less than 100 blog posts. Less than 60 at the time of writing of this article, actually. And only a few static pages. I don’t use heavy JavaScript. In fact, I barely need to use any JavaScript. And yet, Jekyll still choked every time it had to compile it.

I’ve seen more and more people jump ship from Jekyll due to performance. Paul Robert Lloyd migrated over to Eleventy, even I’m contemplating something else. Interestingly enough, the static site generator comparisons mostly have to do with developer ergonomics because they all essentially do the same thing: output static HTML.

Player art
  0:00 / 0:00