Add Static Resources

Previous Step

Configure Image Variants

After setting up your basic website and configuring the required image variants, you need to add static resources before customizing templates for your web design.

Locate Static Resources

The HTML web design package (see the Introduction for the latest download link) includes several static resources. These resources fall into four categories:

• CSS style sheets
• Fonts
• Images
• JavaScript code

In the web design's folder structure, these resources are organized in the following directories:

• css
• fonts
• images
• js

In your Bloomreach Content project, you will find corresponding folders (except for images) under repository-data/webfiles/src/main/resources/site:

• css
• fonts
• js

Info: The repository-data/webfiles module stores your project's web files, which are static web application resources managed in the repository. During development, these files are automatically synchronized between your project folder and the running repository. This is especially useful for CSS and JavaScript files under active development. For this guide, store all static files—including images and fonts—as web files. In production projects, evaluate which files should be packaged as web application resources instead.

Add Static Resources to Your Project

Complete the following steps to add static resources:

1. Copy all contents from the css folder in the web design package to repository-data/webfiles/src/main/resources/site/css in your project.
2. Copy all contents from the fonts folder in the web design package to repository-data/webfiles/src/main/resources/site/fonts in your project.
3. Copy all contents from the images folder in the web design package to repository-data/webfiles/src/main/resources/site/images in your project.
4. Copy all contents from the js folder in the web design package to repository-data/webfiles/src/main/resources/site/js in your project.

If files with the same names already exist in these folders, you can overwrite them. Leave any other existing files in place.

Info: The web design package may also include a binaries folder containing images used as content (for example, images in news articles). Bloomreach Content retrieves these images dynamically from the content repository. You do not need to add them as static resources in your project.

Update the Web Files Allowlist

Update the Web Files allowlist to make the new resources publicly accessible.

Locate the allowlist file in your project. The file location depends on your Bloomreach Content version:

• v16.x & v15.x: repository-data/webfiles/src/main/resources/site/hst-allowlist.txt
• v14.x: repository-data/webfiles/src/main/resources/site/hst-whitelist.txt

By default, the file contains:

css/
fonts/
js/

Add the images folder to the list:

css/
fonts/
js/
images/

For more information, see Using Web Files.

Next Step

Adapt the Base Page Configuration to the Web Design