Minimal Framework for Static Websites

HTML, Markdown, JSX and TSX Components, JSON Data, YAML Front Matter

Get Started Install Now

New in v1.2.0

Propel your development to a whole new level!

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

Why fusion.ssg?

Plato

Philosophy

The most useful tools are those that embrace only those metaphors that directly reflect their utility.

Home

Familiarity

fusion.ssg seamlessly fuses together familiar concepts, such as templates, pages, includes, markdown, tokens, and JSX/TSX components.

Home

Productivity

No complicated tooling and configuration to stand in the way of your creativity, and the project generator gets you up and creating quickly.

Home

Minimalistic

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

Features

  • No initial project configuration is required.
  • DOMless and serverless results in very quick build times.
  • HTML document composition from markdown, HTML, tokens, .jsx and .tsx components, JSON data sources and meta data.
  • .tsx and .jsx sand-boxed execution.
  • .ts browser scripts.
  • Portfolio (multiple pages) generation via collections.
  • Generated projects provide 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 should be ignored during release builds.
  • Blogging support, including multiple categories and tags.
  • Optional cache busting during release builds for your project's assets (v1.2.0).
  • Conditional composition of includes based on build strategy (v1.2.0).
  • The reporting of works in progress during release builds (v1.2.0).
  • Additional post metadata exposed as simple tokens (v1.2.0).
  • Beautified HTML documents.

Examples

HTML Document From A Template And Page

Template with front matter with two token values:

---
tokens: {
    pageTitle: Greetings,
    greeting: Hello World
}
---

Page with two 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 Using A Component To Generates A List

team.json data source:

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

Template with a TeamMembers component tag that consumes 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" />

TeamMembers component implemented in JavaScript:

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 component implementation in TypeScript:

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>