Research static site generators / frameworks

[grantcodes]

I plan to research various static site generators and web frameworks to decide which one best fits the projects sustainability goals.

I want to assess based on the following criteria:

• Energy usage / carbon emmissions (during build processes, and default site generation)
• Ties to frameworks
• Package size (install & built site)
• Ease of development
• Ease of hosting
• Maintenance status
• Popularity

Frameworks to test

• [x] Astro
• [x] 11ty
• [x] Next.js
• [x] Hugo
• [x] Gatsby
• [x] Nuxt
• [x] Jekyll
• [x] Hexo
• [x] SvelteKit
• [x] Pelican
• [x] Zola
• [x] Fresh

The tests

The tests I'll be doing should not be considered scientific in any way, but hopefully should serve as a good baseline.

To assess the generators / frameworks I am going to try to install each of them and create a basic site with just a single <h1>hello world</h1> element.

All tests will be run on my personal laptop. (I use arch btw)

• Output size: Will be using du -sh on the static output directory if possible
• No JavaScript: Is determined by manually inspecting the html output
• Total folder size: Will use du -sh on the entire project folder, after dependency install and any site generation
• Dependency count: From manual inspection of any dependency management file
• Build time: using time
• Framework ties: If the generator requires the use of any JavaScript framework
• Maintenance: This will be judged mostly on vibes, looking at the project repo
• Popularity: I will list GitHub stars

[grantcodes]

Astro

Test	Result	Notes
Output size	12kb	Tiny :+1: with some manually editable html metadata and default favicon
No JavaScript	:white_check_mark:
Total folder size	129M
Dependencies size	128M	node_modules
Dependency count	1	package.json
Dependency tree count	443	npm install
Build time	npm run build 1,66s user 0,77s system 231% cpu 1,047 total
Framework ties	:x:	Has it's own templating syntax
Maintenance	great
Popularity

Misc Notes

• The default installer is cute and fun
• Templating syntax is pretty minimal and easy to pick up IMO

[grantcodes]

11ty

Test	Result	Notes
Output size	8kb	Miniscule :+1: - full html control with no default
No JavaScript	:white_check_mark:
Total folder size	37m
Dependencies size	36m	node_modules
Dependency count	1	package.json
Dependency tree count	215	npm install
Build time	npx @11ty/eleventy 0,41s user 0,21s system 156% cpu 0,395 total
Framework ties	:x:
Maintenance	great
Popularity

Misc Notes

• Markdown based by default, but has many templating options
• Basically full control of output, but always static

[grantcodes]

Next.js

[!NOTE]
Next.js has multiple ways to generate a site. In this test I deliberately switched to a static output. This is not the Next.js default.

Test	Result	Notes
Output size	708kb	Much bigger than others, does include 404 handling and some other magic
No JavaScript	:x:	Does render HTML, but JS is included
Total folder size	390m
Dependencies size	368m	node_modules
Dependency count	3	package.json
Dependency tree count	21	npm install
Build time	npm run build 10,81s user 4,53s system 228% cpu 6,725 total
Framework ties	:heavy_check_mark:	Based on react
Maintenance	great
Popularity

Misc Notes

• Has a good CLI to get started
• Multiple options for the type of output
• Very much tied to react and vercel

[grantcodes]

Hugo

Test	Result	Notes
Output size	32kb	Tiny :+1: - most of this size is from automatically created meta files (rss, sitemap etc.)
No JavaScript	:white_check_mark:
Total folder size	79m	Includes the entire hugo executable
Dependencies size	79m	standalone executable
Dependency count	1	standalone executable
Dependency tree count	1	standalone executable
Build time	hugo 0,04s user 0,02s system 186% cpu 0,035 total
Framework ties	:x:
Maintenance	great
Popularity

Misc Notes

• Seems quite blog focused
• Markdown used by default, but other options available

[grantcodes]

Nuxt

Test	Result	Notes
Output size	4kb	Small. Also includes error handling and default JavaScript
No JavaScript	❌
Total folder size	206m
Dependencies size	206m	node_modules
Dependency count	3	package.json
Dependency tree count	827	npm install
Build time	npm run generate 6,17s user 2,28s system 197% cpu 4,291 total
Framework ties	:white_check_mark:	Built on Vue
Maintenance	great
Popularity

Misc Notes

• The dev tools look amazing to me
• Install and setup are very smooth
• Personally I feel the tie in is not as high as in Next.js, as there is no default hosting provider and Vue is not controlled by mega corps

[grantcodes]

Gatsby

Test	Result	Notes
Output size	1.3m	exessive 👎
No JavaScript	❌
Total folder size	622m
Dependencies size	535m	node_modules
Dependency count	5	package.json
Dependency tree count	1447	npm install
Build time	npm run build 135,29s user 22,64s system 489% cpu 32,265 total
Framework ties	✔️	Built on react and graphql
Maintenance	good though possibly waning
Popularity

Misc Notes

• The homepage of the website is now more about a hosting site than the framework, which doesn't bode well.
• I chose markdown support in order to generate a page rather than using an external content management provider
• The output size and built times seem unacceptable to me

[grantcodes]

Fresh

Test	Result	Notes
Output size	56kb	Small for a full server
No JavaScript	❓	think it does hydration, so runs without JS but is always included
Total folder size	152kb	(Doesn't include dependencies as they are stored separately)
Dependencies size	17m	In user deno cache
Dependency count	5	deno.json
Dependency tree count	?
Build time	deno task build 0,29s user 0,10s system 113% cpu 0,342 total
Framework ties	✔️	Uses preact by default
Maintenance	great
Popularity

Misc Notes

• Requires deno, which personally I like, but is an extra step
• Found it suprisingly slow to download dependencies
• No documentation on deploying anywhere apart from the propiatary Deno Deploy server
• Doesn't seem to be able to generate static html

[grantcodes]

Zola

Test	Result	Notes
Output size	20kb	Tiny :+1: - includes 404, sitemap and robots.txt by default
No JavaScript	:white_check_mark:
Total folder size	25m	Includes the zola binary
Dependencies size	25m	zola binary
Dependency count	1
Dependency tree count	1
Build time	./zola build 0,00s user 0,01s system 113% cpu 0,015 total
Framework ties	:x:
Maintenance	good
Popularity

Misc Notes

• Feels blog focused

[grantcodes]

Sveltkit

Test	Result	Notes
Output size	100kb	Large. Includes a lot of javascript
No JavaScript	❌
Total folder size	34m
Dependencies size	34m	node_modules
Dependency count	6	package.json
Dependency tree count	57	npm install
Build time	npm run build 1,99s user 0,94s system 211% cpu 1,381 total
Framework ties	✔️	svelte
Maintenance	great
Popularity

Misc Notes

• Cli installer has a good set of starter options
• Dynamic output by default, but does have optional static support

[grantcodes]

VuePress

I have skipped testing VuePress as it is aimed towards creating technical documentation, which is not the goal of this project. VuePress actively recommend using Nuxt for applications / dynamic sites.

[grantcodes]

Hexo

Test	Result	Notes
Output size	60kb	Tiny :+1: but includes blog post & archives
No JavaScript	:white_check_mark:
Total folder size	52m
Dependencies size	51m	node_modules
Dependency count	8	package.json
Dependency tree count	213	npm install
Build time	npm run build 0,37s user 0,20s system 162% cpu 0,353 total
Framework ties	:x:
Maintenance	good
Popularity

Misc Notes

• Struggled to get it up and running more than others
• Very much blog focused

[grantcodes]

Jekyll

Test	Result	Notes
Output size	16kb	Tiny :+1: includes rss feed and 404 page
No JavaScript	:white_check_mark:
Total folder size	85k	does not include dependencies
Dependencies size	42m ?	local gems
Dependency count	8	Gemfile
Dependency tree count	34	bundle show
Build time	jekyll build 0,29s user 0,06s system 99% cpu 0,353 total
Framework ties	:x:
Maintenance	ok
Popularity

Misc Notes

• Personally I had to install Ruby just for this, including dependency and permission issues
• Feels a little outdated nowadays
• Blog focused

[grantcodes]

Pelican

Test	Result	Notes
Output size	44kb	Small :+1: but includes lots of blog related pages (tags, categories, authors etc)
No JavaScript	:white_check_mark:
Total folder size	100k
Dependencies size	?
Dependency count	?
Dependency tree count	?
Build time	pelican -t themes/sws 0,22s user 0,04s system 98% cpu 0,255 total
Framework ties	:x:
Maintenance	poor (no updates this year)
Popularity

Misc Notes

• I'm not a regular python user, so not sure the best way to measure the dependencies
• Very blog focused

[grantcodes]

At the moment I am personally leaning towards using Astro for this starter kit, as it seems to provide a good mix of modern developer experience, flexibility (particularly can be used for purely static sites or dynamic, and works with many popular frameworks), while being more efficient that similar tools based on specific frameworks.

Though the other truly static site generators (11ty, Hugo, Jekyll, Hexo, Pelican & Zola) also all look to be great options for sustainability (depending on the goal of the website / app)