🏝 San Blas

A flexible, component-first static site generator.

Use modern tools to build fast, mostly-just-HTML websites with islands of rich client-side behaviour.

What you get

  • Build React components in Storybook
  • Fela for dynamic, component-centric CSS & generated atomic classes
  • Webpack for module bundling & asset revving
  • Babel so you can write JSX and ES2030
  • Serve for a straightforward dev server
  • React Helmet Async for <head> management
  • Independent client and prerender entrypoints:
    • Prerender (aka server-render aka snapshot): Build HTML files and other assets from pages entrypoints
    • Client: Progressively enhance prerendered HTML. Mix and match React components (isomorphic or client-only) with vanilla JS and other libraries
  • San Blas withIsland() higher order component for easy and targeted isomorphic React

Remember, San Blas is just a template repo. Not feeling these defaults? Change them! Want to add more? Do it! See the recipes for common extensions & tweaks.

What you don't get

  • hot module reloading 🙅‍♀️ (except in Storybook)
  • code splitting 🙅‍♀️
  • lazy loading 🙅‍♀️
  • "instant" client side route transitions 🙅‍♀️
  • Progressive Web App™ 🙅‍♀️
  • isomorphic 🙅‍♀️ (not the automatic full-page kind you're used to anyway)
  • graphql 🙅‍♀️
  • workers 🙅‍♀️
  • "blazing fast" or "zero config" 🙅‍♀️

Why?

Those things are great for some projects. San Blas just has different priorities.

🚀 Great performance can be simple.

Complex performance optimisations can be useful for some sites and benchmarks, but come with their own tradeoffs. Often the basics are enough.

♻️ Rethink isomorphic JS.

Component reuse across environments is valuable, but mostly-content websites usually don't need to re-render the entire page on the client.

⚛️ Components are best developed in isolation.

Build components in a dedicated component development environment and drastically simplify the main app's dev server.

🧬 Write meaningful, expressive styles & ship atomic classes.

All the benefits of atomic CSS. No new DSL to learn.

🛠 Prefer a flexible starting point over out-of-the-box functionality.

Avoid a configurable black box or plugin system. Keep it simple enough to understand and hack directly.

Architecture decisions

Read more detailed rationale for San Blas' architecture in the architecture decision records.

Get started

Read the docs or get the template repo on GitHub

Who built this?

Hi there! I'm Ben, I've been building websites for a while now. I've worked on the industrial-strength static site tooling behind Envato Sites and Milkshake & have experienced enough 💩 internet connections around the world to have opinions about web performance.