Minimal Framework for Static Websites

HTML, Markdown, TypeScript Components, JSON Data, YAML Front Matter

Get Started Install Now

v1.0.0-beta.7

Propel your development to a whole new level!

Seamlessly fuse together HTML document using familiar technologies in one cohesive development platform.

Why fusion.ssg?

Plato

Philosophy

fusion.ssg creates resilient HTML documents and static websites and gets out of your way when you are using it.

Home

Minimal

fusion.ssg is built from the ground up to be just that and very quick too.

Home

Familiar

fusion.ssg has a very low "barrier to entry" because it seamlessly employs concepts that you are already familiar with, like templates, pages, includes, markdown, tokens, and Typescript components.

Home

Productive

No complicated tooling and configuration. fusion.ssg's project generator gets you up and running quickly.

Features

  • No initial project configuration is required.
  • DOMless and serverless, so builds are really very quick.
  • Create HTML documents using markdown, HTML, tokens, components, JSON data sources and meta data.
  • Built-in TSX component compilation.
  • Built-in JSX component compilation and TS browser scripts compilation coming in v1.0.0-beta.8.
  • Portfolio generation via collections.
  • package.json scripts for development and release builds.
  • CLI for one-off development and one-off release builds.
  • Base URL support for sites hosted in sub folders.
  • Works in progress for HTML documents that need to be ignored during release builds.
  • Blogging support, including categories and tags.
  • HTML documents are beautified.

Examples

HTML Document Creation Using A Template and a Page

A template with content and front matter that contains a simple token property.

---
tokens: {
    pageTitle: Greetings
}
---
<h1>Hello World</h1>

A page with a simple token and a template token.

<!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>

The generated 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>Greetings</title>
    </head>
    <body>
        <main>
            <h1>Hello World</h1>
        </main>
    </body>
</html>

HTML Document Creation Using A Simple Component That Generates A List Of Team Members

The team.json data source.

[
{"name": { "first": "John", "last": "Doe" }},
{"name": { "first": "Jane", "last": "Doe" }},
{"name": { "first": "Julia", "last": "Doe" }}
]

A template with a simple TeamMembers component tag that declares team.json as a data source.

---
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" />

The simple TeamMembers component implementation.

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>
    );
};

The template's associated 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>

The generated page.

<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>