Assets

Introduction

This documentation provides information on how to manage and utilize assets in the Fustak website deployment framework. Assets include files such as images, scripts, and stylesheets that are essential for a website's functionality and appearance.

Assets Folder Configuration

To specify the folder where the assets will be stored, modify the assets_folder option in the .fustak/Fustak.toml file. By default, the assets are stored in the "public" folder. The public folder contains all the assets that will be uploaded to the assets database and served by the server.

Asset Naming Convention

Each file in the assets folder is assigned a name and a hashed name. The name represents the file's original name, while the hashed name includes a hash at the end to prevent caching issues. The names are relative to the public folder. For example, if the file public/img/dog.jpg is uploaded, its name will be img/dog.jpg, and the hashed name will be img/dog-<​HASH​>.jpg.

Dist Folder Configuration

Similar to the assets folder, the dist_folder option in the .fustak/Fustak.toml file determines the location where the dist folder will be stored. The dist folder contains compiled or minified assets and follows the same rules as the public folder in terms of deployment and serving.

Asset Usage in Pages

To include assets in your web pages, utilize the asset function, which returns the hashed name of the file. For example, to display the image public/img/dog.jpg, use the following HTML code:

<img src={fustak.asset('/img/dog.jpg')} alt="Dog" />

The asset function can also be used in configuration files (*.toml). For instance, to include the script file public/js/script.js, use the following syntax:

[[page.definition.scripts]]
src = 'asset(/js/script.js)'
async = true

Dist File Usage

For files located in the dist folder, employ the dist function to retrieve the hashed name of the file. For example, to include the script file dist/js/script.js, use the following HTML code:

<script src={fustak.dist('/js/script.js')}></script>

Similar to asset usage, the dist function can also be utilized in configuration files *.toml. Here's an example of including the dist script file:

[[page.definition.scripts]]
src = 'dist(/js/script.js)'
async = true

Deploying Assets

To deploy a specific asset or dist file to the server, use the command fustak assets [PATH], where [PATH] represents the file's location. If you want to deploy all the assets, run the command fustak assets without specifying a path.

After deploying a page that includes new assets or uses an Island, make sure to deploy the associated assets and dist files used on that page.

Please note that proper deployment of assets is crucial for maintaining the integrity and functionality of your website.