| 1 | <br />
|
| 2 | <br />
|
| 3 |
|
| 4 | <div align="center">
|
| 5 | <img src="https://raw.githubusercontent.com/natemoo-re/microsite/master/.github/assets/microsite.svg?sanitize=true&v=1" alt="microsite" width="375" height="101" />
|
| 6 | </div>
|
| 7 |
|
| 8 | <br />
|
| 9 | <br />
|
| 10 |
|
| 11 | `microsite` is a fast, opinionated static-site generator (SSG) built on top of [Snowpack](https://snowpack.dev). It outputs extremely minimal clientside code using [**automatic partial hydration**](/docs/partial-hydration.md).
|
| 12 |
|
| 13 | ```bash
|
| 14 | npm init microsite <project>
|
| 15 | ```
|
| 16 |
|
| 17 | [See the demo](https://microsite-demo.nmoo.vercel.app/)
|
| 18 |
|
| 19 | > Microsite is output as ESM, so it needs to run in a Node environment which supports it (node@12.19.0).
|
| 20 | >
|
| 21 | > Ensure that your project includes `"type": "module"` in `package.json`, which will allow you to use ESM in your project's `node` scripts.
|
| 22 |
|
| 23 | ## Pages
|
| 24 |
|
| 25 | Microsite uses the file-system to generate your static site, meaning each component in `src/pages` outputs a corresponding HTML file.
|
| 26 |
|
| 27 | Page templates are `.js`, `.jsx`, or `.tsx` files which export a `default` a [Preact](https://preactjs.com/) component.
|
| 28 |
|
| 29 | ## Styles
|
| 30 |
|
| 31 | Styles are written using CSS Modules. `src/global.css` is, as you guessed, a global CSS file injected on every page.
|
| 32 | Per-page/per-component styles are also inject on the correct pages. They are modules and must be named `*.module.css`.
|
| 33 |
|
| 34 | ## Project structure
|
| 35 |
|
| 36 | ```
|
| 37 | project/
|
| 38 | ├── public/ // copied to dist/
|
| 39 | ├── src/
|
| 40 | │ ├── global/
|
| 41 | │ │ └── index.css // included in every generated page
|
| 42 | │ │ └── index.ts // shipped entirely to client, if present
|
| 43 | │ ├── pages/ // fs-based routing like Next.js
|
| 44 | │ │ └── index.tsx
|
| 45 | └── tsconfig.json
|
| 46 | ```
|
| 47 |
|
| 48 | ## Acknowledgments
|
| 49 |
|
| 50 | - [Markus Oberlehner](https://twitter.com/maoberlehner), [`vue-lazy-hydration`](https://github.com/maoberlehner/vue-lazy-hydration)
|
| 51 | - [Markus Oberlehner](https://twitter.com/maoberlehner), [Building Partially Hydrated, Progressively Enhanced Static Websites with Isomorphic Preact and Eleventy](https://markus.oberlehner.net/blog/building-partially-hydrated-progressively-enhanced-static-websites-with-isomorphic-preact-and-eleventy/)
|
| 52 | - [Lukas Bombach](https://twitter.com/luke_schmuke), [The case of partial hydration (with Next and Preact)](https://medium.com/@luke_schmuke/how-we-achieved-the-best-web-performance-with-partial-hydration-20fab9c808d5)
|
| 53 | - [Jason Miller](https://twitter.com/_developit) and [Addy Osmani](https://twitter.com/addyosmani), [Rendering on the Web](https://developers.google.com/web/updates/2019/02/rendering-on-the-web)
|
| 54 | - [Poimandres](https://github.com/pmndrs), [`valtio`](https://github.com/pmndrs/valtio) for inspiring `microsite/global`
|