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. :)
1 comment
[ 4.5 ms ] story [ 13.8 ms ] threadI 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.