<br /> <br />

css-modules, hydrated-components, hydration, microsite, partial-hydration, preact, snowpack, ssg, static-site, static-site-generator
npm install microsite@1.0.2



Read the docs | See the live examples

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 microsite <project>

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 structure

โ”œโ”€โ”€ 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