femtosite
v0.0.32
Published
Extremely tiny static site generator based on TSX templates
Downloads
10
Maintainers
larsvonqualenReadme
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 initThe 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 buildFemtosite 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>
);