Microsite

[!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.

</div> <br /> <br /> <div align="center"> <img src="https://raw.githubusercontent.com/natemoo-re/microsite/master/.github/assets/microsite.svg?sanitize=true&v=1" alt="microsite" width="375" height="101" /> </div> <h4 align="center"> <a href="https://github.com/natemoo-re/microsite/tree/main/docs">Read the docs</a> <span> | </span> <a href="https://examples.microsite.page">See the live examples</a> <span> | </span> <a href="https://discord.gg/QMc6R8svPY">Join our Discord</a> </h4> <br /> <br />

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

---

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.

Pages

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

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

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

Acknowledgments

• 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, valtio for inspiring microsite/global