npm init microsite
Microsite'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!
Ensure that your project includes
"type": "module" in
package.json, which will allow you to use ESM in your project's
Microsite uses the file-system to generate your static site, meaning each component in
src/pages outputs a corresponding HTML file.
Page templates are
.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
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, 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