Femtosite
Extremely tiny static site generator based on TSX templates.
Getting started
We've created an easy interactive init process, start by calling the command in your favourite terminal:
npx femtosite init
The guide will now help setup the femtosite.json config file and make sure you hit the ground running.
Once you're ready to build your static site run:
npx femtosite build
# OR
npm run build
Femtosite will now transpile your TSX pages and render them afterwards, while taking care of any assets referenced with either the <StyleAsset /> or <ScriptAsset /> built in components.
Example page
index.component.tsx
import { createPage } from 'femtosite';
import { HelloWorld } from '../components/hello-world.component.js';
import { Shell } from '../components/shell.component.js';
export default createPage(async page => (
<Shell page={page}>
<HelloWorld />
</Shell>
));
shell.component.tsx
import { FemtositePageProps, Html, ScriptAsset, StyleAsset } from 'femtosite';
export const Shell = async (
{ page }: { page: FemtositePageProps },
...children
) => (
<Html lang="en">
<head>
<StyleAsset src="./assets/style.css" inline={true} />
<StyleAsset src="./scss/main.scss" />
<ScriptAsset src="./assets/app.js" inline={true} />
<ScriptAsset src="./assets/app.js" async={true} />
</head>
<body>{...children}</body>
</Html>
);
hello-world.component.tsx
export const HelloWorld = () => (
<div>
<h1>Hello World</h1>
<p>Welcome to your new Femtosite!</p>
</div>
);
