https://github.com/ascorbic/impala
Very simple React and Preact static site generator
https://github.com/ascorbic/impala
Last synced: 7 months ago
JSON representation
Very simple React and Preact static site generator
- Host: GitHub
- URL: https://github.com/ascorbic/impala
- Owner: ascorbic
- Created: 2023-03-25T15:32:55.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-12-09T10:50:41.000Z (about 1 year ago)
- Last Synced: 2025-05-25T05:05:23.781Z (8 months ago)
- Language: TypeScript
- Homepage:
- Size: 199 KB
- Stars: 145
- Watchers: 4
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Impala
Very simple React and Preact static site generator
npm create impala@latest
Impala is a bare-bones static-site framework, powered by [Vite](https://github.com/vitejs/vite). It currently supports [React](https://react.dev) and [Preact](https://preactjs.com/). Features include:
- SSG-only, MPA-only. It's iMPAla, not iSPAla.
- File-based routing, with a syntax like [Astro](https://github.com/withastro/astro) and [Solid Start](https://github.com/solidjs/solid-start)
- Static and dynamic routes
- Astro and [Next.js](https://github.com/vercel/next.js/)-inspired data fetching in `getStaticPaths`, and `getRouteData`
- Route-level code-splitting
- Optionally JS-free
## Usage
## Routing
Create pages in `src/routes` and they will be available as routes in your site. For example, `src/routes/about.tsx` will be available at `/about`. You can also create dynamic routes, like `src/routes/blog/[slug].tsx`, but you'll need to add a `[slug].data.ts` file with a `getStaticPaths` function to tell Impala what paths to generate and the data to use.
You can also do catch-all routes, like `src/routes/blog/[...slug].tsx`, which also needs a `[...slug].data.ts` file with a `getStaticPaths` function.
## Data fetching
For dynamic routes you should fetch data in `getStaticPaths`. For static routes you should fetch data in `getRouteData`. For example, if you have a route at `src/routes/blog/[slug].tsx`, you should create a `src/routes/blog/[slug].data.ts` file with a `getStaticPaths` function. This function should return an array of paths to generate, and the data to use for each path.
See the demo site for more.
## FAQ
### Why did you build this?
Mainly to learn, but also because there's no statically-rendered [create-react-app](https://github.com/facebook/create-react-app) equivalent. I often want a simple React site with static rendering but no SSR. Astro is awesome, but I want something that's more vanilla React.
### Does it support SSR
Deliberately not. If you want SSR, use Astro.
### Does it support client-side navigation?
Deliberately not. If you want client-side navigation, use one of the many other SPA frameworks.
## License
Copyright © 2023 Matt Kane. Licenced under the MIT licence.
Impala logo created by [Freepik - Flaticon](https://www.flaticon.com/free-icons/impala)