Caution
Microsite is no longer maintained. The partial hydration techniques pioneered in this project served as a precursor to Astro, which @natemoo-re co-created, and a number of other islands architecture-based frameworks like Fresh.
Consider this archive a reference implementation for islands architecture—may it inspire you to do more with less JavaScript.
microsite is a fast, opinionated static-site generator (SSG) built on top of Snowpack. It outputs extremely minimal clientside code using automatic partial hydration.
npm init micrositeMicrosite is an ESM node package, so it needs to run in a Node environment which supports ESM. We support the latest version of node v12.x LTS (Erbium) — see Engines for more details.
Ensure that your project includes "type": "module" in package.json, which will allow you to use ESM in your project's node scripts.
Microsite uses the file-system to generate your static site, meaning each component in src/pages outputs a corresponding HTML file.
Page templates are .js, .jsx, or .tsx files which export a default a Preact component.
Styles are written using CSS Modules. src/global.css is, as you guessed, a global CSS file injected on every page.
Per-page/per-component styles are also inject on the correct pages. They are modules and must be named *.module.css.
project/
├── public/ // copied to dist/
├── src/
│ ├── global/
│ │ └── index.css // included in every generated page
│ │ └── index.ts // shipped entirely to client, if present
│ ├── pages/ // fs-based routing like Next.js
│ │ └── index.tsx
└── tsconfig.json
- Markus Oberlehner,
vue-lazy-hydration - Markus Oberlehner, Building Partially Hydrated, Progressively Enhanced Static Websites with Isomorphic Preact and Eleventy
- Lukas Bombach, The case of partial hydration (with Next and Preact)
- Jason Miller and Addy Osmani, Rendering on the Web
- Poimandres,
valtiofor inspiringmicrosite/global