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's public API is quite stable, but I caution professional users to consider this a WIP! There are plenty of quirks and bugs (especially with dev mode) that are being ironed out until Microsite reaches a more stable v2.0.0!
Microsite 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