Show HN: Static Site Generator Designed to Build 10-100k Page Sites (Svelte.js)

Hey HN!

I always find SHOW HN posts inspiring, so I figured I’d share a code base we recently open sourced. (My first open source project)

For the past 7 months I’ve been working on a static site generator (SSG) that could scale to build 100k page SEO sites and beyond.

The resulting project is called Elder.js - Source: https://github.com/elderjs/elderjs

This project was born out of my background in building several major SEO assets and more specifically migrating major SEO assets from -gnarly code bases- ahem legacy WordPress installs to SSGs (primarily Gatsby).

When setting out to build https://elderguide.com I tested and attempted to build basic versions of our 'city' pages with 6 different SSGs including: Gatsby, Next.js, Nuxt.js, 11ty, Sapper, and Hydrogen.js.

During this evaluation process I had 3 observations:

- 1. Fetching from multiple data sources (apis, a db, markdown files) caused major code spaghetti in all of the frameworks we tested.

- 2. Full client hydration of React/Vue is overkill for largely static sites. Sure client side routing is a sweet but browsers are already great at routing and in Gatsby I’ve lived through the hell of debugging poorly configured service workers and client side routing.

- 3. Most SSGs are built for either simple sites/blogs or for full scale "app frameworks" that have added an 'export' process added as an after thought. While the "app frameworks" were nice they caused insane build times when I began looking at generating 10-100k page sites.

In the end I chose to work with Sapper as it was backed by Svelte, but we ultimately hit some roadblocks we couldn’t overcome.

There Has to be A Better Answer

Frustrated, I whipped together some helper functions and in an afternoon built a bare bones SSG. #productionready!

Elder.js is the result of 7 months of refactors and exploring the best way to build an SSG from an SEO perspective. It features:

- A robust hook/plugin system that allows you to run arbitrary code with predictable side effects at any point in the page generation process.

- Straight forward data flow. Anything you can do in Node.js you can do in your data files. Organize it however you’d like.

- Partial Client Hydration with Svelte allows you to hydrate only the interactive parts of your site reducing html/data/bundle size.

- Parallelized builds that will scale to as many CPU cores as you can throw at it.

Today Elder.js builds our entire ~18k production website in about 8 minutes on a cheap 4 core VM where approximately 55% of the build time is waiting on the database.

I’d be happy to answer any questions people have about SSGs or SEO. :)

edit: formatting on HN is hard.