We are working very hard to bring you the best documentation possible.
GETTING STARTED
Synopsis
HTML Document Creation - A High Level View
If you are new to fusion.ssg, it is advantageous for you to have a high level conceptual understanding of how it seamlessly fuses together your project's templates, pages, components and tokens to create HTML documents.
The discussion below focuses on the creation of a single HTML document.
fusion.ssg looks for a property named page declared in the template's YAML front matter whose value points to a page file located in the project's src/pages folder. If fusion.ssg doesn't find the property, it defaults to using the src/pages/default.html page. The page file provides the overall structure for the generated HTML document as well as any content of its own. If the template has its own content to contribute to the HTML document and the page's content contains a {{template}} token, fusion.ssg will replace the page's template token with the template's content. At this point, we have a developing HTML document.
fusion.ssg then searches the developing HTML document for component tags (e.g., <MyComponent />) and if found, each component is called and their corresponding tags are replaced by the HTML they return.
fusion.ssg then searches the developing HTML document's content for simple tokens (e.g., {title}) and, if found, replaces them with their matching token values found in either the template's YAML front matter or fusion.json, the project's configuration file.
Step 4 - Serialize The HTML Document
The HTML document is now complete and its content is serialized to its respective path in the project's build folder.
While the actual process that fusion.ssg uses is quite a bit more complex than what this high level overview provides, you should now have a very good conceptual understanding of how fusion.ssg goes about its business of producing HTML documents.
The remaining documentation relies heavily on examples. It assumes that you have some working knowledge of HTML, markdown, YAML front matter and JavaScript or TypeScript components.