Philosophy
The most useful tools are those that fully embrace the functionality that directly reflects their purpose and ignores all others.
Create resilient static websites
Minimalistic
fusion.ssg is built from the ground up to be just that, making it quick to learn for anyone who already has experience with HTML, JavaScript and CSS.
Productivity
No complicated tooling and configuration to stand in the way of your creativity, and the project generator gets you up and creating quickly.
Really Fast
Capable of generating 100s of HTML documents in under a second.
Features
- Easily create new projects (*** batteries included ***).
- Zero initial project configuration.
- DOMless and serverless for really fast site generation.
- Component compilation and sand-boxed execution.
- Bulk HTML document generation.
- Fully scripted development and release builds.
- Beautified HTML and CSS documents.
- Cache busting for release builds (optional).
- Blog posts, tags and categories support.
- Works In Progress (WIPS) support.
- Base URL support for sites hosted in sub folders.
- Informative metrics reporting after every build cycle.
Examples
HTML Document
From A Template And A Page
Template with token value declarations
---
tokens: {
pageTitle: Greetings,
greeting: Hello World
}
---
Page using tokens
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{pageTitle}</title>
</head>
<body>
<main>
<h1>{greeting}</h1>
</main>
</body>
</html>
Generated HTML document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Greetings</title>
</head>
<body>
<main>
<h1>Hello World</h1>
</main>
</body>
</html>
HTML Document
With A List
From A Component And JSON
team.json data source
[
{"name": { "first": "John", "last": "Doe" }},
{"name": { "first": "Jane", "last": "Doe" }},
{"name": { "first": "Julia", "last": "Doe" }}
]
Template with TeamMembers component
---
tokens: {
pageTitle: Team Members
}
---
<h1>Team</h1>
<p>Thanks to our team our rollout has been a huge success.</p>
<h2>Contributors</h2>
<TeamMembers datasources="team.json" />
TeamMembers.jsx component
function formatName(member) {
return `${member.name.first} ${member.name.last}`;
}
export const TeamMembers = function({ team }) {
return (
<ul>
{team.map(member => {
return <li>
<p><{formatName(member)}</p>
</li>;
})}
</ul>
);
};
TeamMembers.tsx component
interface TeamMember {
"name": {
"first": string,
"last": string
}
}
interface Props {
team: TeamMember[]
}
function formatName(member: TeamMember): string {
return `${member.name.first} ${member.name.last}`;
}
export const TeamMembers = function({ team }: Props): string {
return (
<ul>
{team.map(member => {
return <li>
<p><{formatName(member)}</p>
</li>;
})}
</ul>
);
};
Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{pageTitle}</title>
</head>
<body>
<main>
{{template}}
</main>
</body>
</html>
Generated HTML document
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Team Members</title>
</head>
<body>
<main>
<h1>Team</h1>
<p>Thanks to our team our rollout has been a huge success.</p>
<h2>Contributors</h2>
<ul>
<li><p>John Doe</p></li>
<li><p>Jane Doe</p></li>
<li><p>Julia Doe</p></li>
</ul>
</main>
</body>
</html>
