|
1 |
| -# Hyperstatic |
| 1 | +<div align="center"> |
| 2 | + <h1>Hyperstatic</h1> |
| 3 | + <p>Hyperapp based static site generator</p> |
| 4 | +</div> |
2 | 5 |
|
3 |
| -## ℹ️ Hyperstatic V2 is underway, featuring way faster rendering speeds, SSR, per-component data fetching methods and more. Stay tuned! |
| 6 | +Hyperstatic is a thin code-splitting and navigation layer on top of hyperapp that creates fast and SEO friendly static sites. It's goal is to be a simpler, lighter and faster GatsbyJS, that uses Hyperapp instead of React. |
4 | 7 |
|
5 |
| -Hyperstatic is a Hyperapp based static site generator with a code-splitting and navigation layer. It's goal is to be a simpler, lighter and faster GatsbyJS, that uses Hyperapp instead of React. |
6 |
| - |
7 |
| -It's codebase also has an inherently smaller footprint by using Puppeteer for pre-rendering and Parcel for code-splitting. |
| 8 | +It's codebase also has an inherently smaller footprint by using Puppeteer for pre-rendering and [dynamic imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports) for code-splitting. |
8 | 9 |
|
9 | 10 | See the demo site here: https://hyperstatic.dev/
|
10 | 11 |
|
11 | 12 |
|
12 |
| - |
13 | 13 | # Starter template 🚀
|
14 | 14 |
|
15 | 15 | To easiest way to get started is to use this [starter template](https://github.com/loteoo/hyperstatic-starter).
|
16 | 16 |
|
17 | 17 | ---
|
18 | 18 |
|
19 |
| -#### Installation in an existing Hyperapp 2.0 project: |
| 19 | +#### Installation in an existing Hyperapp project: |
20 | 20 |
|
21 | 21 | 1. `npm i hyperstatic`
|
22 | 22 |
|
23 |
| -2. Create a `routes.js` file with your routes in it. |
24 |
| -[Example](https://github.com/loteoo/hyperstatic-starter/blob/master/src/app/routes.js) |
| 23 | +2. Create a `routes` object with your routes patterns in it. |
| 24 | +[Example](https://github.com/loteoo/hyperstatic-starter/blob/master/src/main.tsx#L8-L15) |
25 | 25 |
|
26 | 26 |
|
27 | 27 |
|
28 | 28 | 3. Replace hyperapp's `app` call with `hyperstatic`. Add the extra `routes` attribute that is needed.
|
29 |
| -[Example](https://github.com/loteoo/hyperstatic-starter/blob/master/src/app.js#L18) |
| 29 | +[Example](https://github.com/loteoo/hyperstatic-starter/blob/master/src/main.tsx#L24) |
30 | 30 |
|
31 | 31 |
|
32 | 32 |
|
33 | 33 | 4. Link to your pages using the `<Link>` component.
|
34 |
| -[Example](https://github.com/loteoo/hyperstatic-starter/blob/master/src/app/view.jsx#L7) |
35 |
| - |
36 |
| -5. (Optional) For pre-rendering, create a `render-pages.js`, list your URLs and call `renderPages` with them. |
37 |
| -[Example](https://github.com/loteoo/hyperstatic-starter/blob/master/render-pages.js) |
| 34 | +[Example](https://github.com/loteoo/hyperstatic-starter/blob/master/src/components/core/Header/index.tsx#L11) |
38 | 35 |
|
39 |
| -Then add this helper command in your package.json scripts: |
| 36 | +5. For prerendering, add this helper command in your package.json scripts: |
40 | 37 |
|
41 | 38 | ```
|
42 | 39 | "scripts": {
|
43 |
| - "render-pages": "npm run build && node ./render-pages.js" |
| 40 | + "prerender": "npm run build && hyperstatic" |
44 | 41 | }
|
45 | 42 | ```
|
46 | 43 |
|
47 |
| - |
48 | 44 | #### That should be it!
|
49 | 45 |
|
| 46 | +For more info, see https://hyperstatic.dev/ |
50 | 47 |
|
51 |
| -Pull requests are welcome! |
52 |
| - |
53 |
| - |
54 |
| -## Roadmap / planned changes |
55 |
| -- Once an official hyperapp router is available, use it internally and build on top of it. |
56 |
| -- Add "hooks" for animating page transitions (run effects before / after navigating). |
57 |
| -- Move away from pupeteer. Do SSR straight from node.js. New APIs will be available to fetch data at build time, similar to [Next.js](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) |
| 48 | +Pull requests are welcome! ❤ |
0 commit comments