hyperapp based fast site generator

✔️ Routing

declarative route patterns

🤖 Prerendering

fast loads and SEO friendliness

⚡ Prefetching

no waiting after slow APIs

✂️ Code splitting

light bundles on a per page basis

Get started Read the docs

Hyperstatic is a small navigation layer on top of hyperapp that helps create fast and SEO friendly static sites.

It's goal is to be a simpler, lighter and faster Gatsby, that uses hyperapp instead of React, with a runtime of ~9kb. (hyperapp + hyperstatic, gzip)

It's TypeScript codebase has an inherently small footprint by using Puppeteer for pre-rendering and dynamic imports for code-splitting.

Sites built with hyperstatic are meant to be deployed on static hosting services like Netlify or Github Pages, but can be hosted on any static file server.

Getting started

🚀 Starter template

The easiest way to get started is to use the starter template from loteoo/hyperstatic-starter.

Use the template

Installation in an existing hyperapp project

⚠ Your environment (browser or bundling setup) needs to support dynamic imports.

Steps

Install hyperstatic

npm i hyperstatic

Replace hyperapp's app function call with hyperstatic. Remove the node prop. Provide a <div> with the id hyperstatic in your HTML.

hyperstatic({
  init: {},
  view: (state) => h('h1', {}, text('Hello!')),
})

<body>
  <!-- ... -->
  <div id="hyperstatic"></div>
  <!-- ... -->
</body>

Make sure you have pages that you want to route in your project, each with it's own file. Each file should export a view function as the default export. More info on pages
Add routing for your pages with the extra routes object that is needed. The keys are your routes patterns and the values are the page dynamic imports.

hyperstatic({
  //...
  routes: {
    '/': import('./pages/HomePage'),
    '/counter': import('./pages/CounterPage'),
    '/items/:id': import('./pages/ItemDetails'),
    '/:splat*': import('./pages/NotFoundPage')
  },
  //...
})

Add the hyperstatic Router component that will render the pages somewhere at near top of your app view

import { Router } from 'hyperstatic'

// Hyperscript
const RootView = (state) => (
  h('div', {}, [
    Header(),
    Router(), // <-- Here
    Footer(),
  ])
)

// JSX
const RootView = (state) => (
  <div>
    <Header />
    <Router />{/* <-- here */}
    <Footer />
  </div>
)

Link to your pages using the Link component.

import { Link } from 'hyperstatic'

// Hyperscript
h('div', {}, [
  Link({ href: '/other-page' }, [
    text('Link to other page')
  ]),
])

// JSX
<div>
  <Link href="/other-page">
    Link to other page
  </Link>
</div>

For prerendering, add a helper command like this in your package.json scripts:

"scripts": {
  "prerender": "npm run build && hyperstatic"
}

The hyperstatic command should run after a normal static build of your site with your tooling of choice.

Hopefully that was enough to get you started! Checkout the docs for more info!

About this site

This is site acts as documentation for hyperstatic but also as a demo of it's capabilities. Since each page is prerendered so it should work even with JS disabled.

Feel free to play around with network throtling to better see how the runtime reacts to slow network conditions.