The other day, I mentioned that sending most of your HTML from the server makes your site or app faster and far less prone to breaking.
Today, I wanted to talk about a few different tools for pre-rendering your HTML. Let's dig in!
What's a static site generator
A Static Site Generator (or SSG) is a tool that let's you write content in markdown files, define templates for different types of content, and then mash the two together.
If this sounds a lot like server-side CMS's like WordPress, that's because it kind of is!
The big differences are that SSGs…
- Store content in flat markdown files instead of a database.
- Generate HTML files ahead of time instead of on-demand.
They give you performance benefits (both in the browser and on the server) of having flat HTML files, with the developer/authoring benefits of a template-based system.
Different SSG options
There are easily over a hundred different Static Site Generators, but there are a just a small handful of options that compromise most of the market…
- Jekyll, which uses Ruby for its templating.
- Hugo, which uses Go for its templating.
- 11ty, which uses Node and JavaScript for its templating.
- SvelteKit, which uses a JavaScript-like templating syntax.
- Astro, which has uses MDX for templating, and can also import Svelte, React components, and more.
So which one should you pick?
I recommend looking at the docs for each, and rolling with which ever one clicks the fastest for you, has a templating language you feel comfortable with, and "feels" right.
While they do have some meaningful differences, they're all more alike than different.
Some important nuances
There are some important differences to be aware of…
- Jekyll is the OG of SSGs. It's also not well supported anymore, and from what I understand, development on it is pretty stagnated.
- Hugo compiles the fastest of all of your options, and can generate file types other than HTML (I've use it to generate JSON, XML, RSS feeds, and even PHP files).
- The community around Hugo is relatively small, and support from its creator is… not great.
- Because it's based on Node and JS, 11ty can do things that Hugo and Jekyll can't (like generating unique HTML files from each of the items in an API response).
- 11ty has one of the most vibrant and supportive communities, and it's creator, Zach Leatherman, is incredibly kind and generous in helping people out.
- SvelteKit lets you author backend functionality along with your frontend code, and spits out mostly static HTML with a sprinkingly of JavaScript as needed.
- Astro is very similar to SvelteKit, but also lets you work with your existing React code. It will compile into mostly static HTML and vanilla JS, rather than outputting React into the browser.
- Astro cycles through major breaking versions very fast, which makes it a bit of a gamble for production environments right now.
- 11ty is very actively developed, but makes breaking major version changes slowly, prioritizing stability.
All of this is to say, if I had to choose an option for a client today in a vacuum, I'd like recommend 11ty if I had no additional context.
Cheers,
Chris
Want to share this with others or read it later? View it in a browser.
0 Komentar untuk "[Go Make Things] The different static site generators (and which one to choose)"