
Show HN: Static Site Generator Designed to Build 10-100k Page Sites (Svelte.js) - nickreese
https://elderguide.com/tech/elderjs/
======
nickreese
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](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](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.

