HTML File Paths And URLS

Generally speaking, there are three primary formats to use for file paths that point to HTML documents and other website assets:

absolute file paths, e.g. <img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
root relative file paths (sometimes called site relative paths), e.g. <img src="/images/picture.jpg">
page relative file paths, e.g. <img src="../picture.jpg">

For a more in-depth discussion on this topic, please see HTML File Paths for more information.

fusion.ssg supports only root relative file paths because both its {baseURL} and cache busting features rely on root relative URLS to work correctly.

So, for example, to link to an HTML document named /some-folder/document.html from anywhere in your site, you would use a root relative file path:

<a href="/some-folder/document">document</a>

When linking to your site's assets, such as .css, .js, and other media, you would also use root relative file paths:

<link rel="stylesheet" href="/css/some-folder/mysite.css">
<script src="/scripts/some-folder/mysite.js"></script>
<img src="/media/some-folder/mysite.png">

This strategy of using only root relative file paths abides with the use of {baseURL} in hrefs


<a href="{baseURL}/some-folder/document">...</a>,

and when linking to other site assets


<link rel="stylesheet" href="{baseURL}/css/some-folder/mysite.css">
<script src="{baseURL}/scripts/some-folder/mysite.js"></script>

and with fusion.ssg's support for cache busting your site.

For more information on {baseURL}, please see baseURL.

For more information on cache busting, please see cache busting.