Skip to main content
Documentation Writing Content

Static Files

A static file is a file that does not contain any front matter. These include images, PDFs, and other un-rendered content.

You can save static files in any subfolder or directly within the source folder (src). A common place to save images specifically is the src/images folder. You can reference them from both markup and CSS simply using a relative URL (for example, /images/logo.svg).

Optionally, you can bundle images through esbuild or Webpack and reference them with the asset_path helper. Or if you’re interested in a full-featured image management solution with the ability to resize and optimize your media sizes, check out Cloudinary and the bridgetown-cloudinary plugin.

Static files can be searched and accessed in templates via site.static_files and contain the following metadata:

Variable Description

file.path

The relative path to the file, e.g. /assets/img/image.jpg

file.modified_time

The time the file was last modified, e.g. 2016-04-01 16:35:26 +0200
(also available as file.date)

file.name

The string name of the file e.g. image.jpg for image.jpg

file.basename

The string basename of the file e.g. image for image.jpg

file.extname

The extension name for the file, e.g. .jpg for image.jpg

Note that in the above table, file representes a variable used in logic such as a for loop—you can name it whatever you wish in your own code.

Add front matter to static files #

Although you can’t directly add front matter values to static files, you can set front matter values through the defaults property in your configuration file. When Bridgetown builds the site, it will use the front matter values you set.

Here’s an example:

In your bridgetown.config.yml file, add the following values to the defaults property:

defaults:
  - scope:
      path: "images"
    values:
      image: true

When Bridgetown builds the site, it will treat each image as if it had the front matter value of image: true.

Now suppose you want to list all your image assets as contained in src/images. You could use this Liquid for loop to look in the static_files object and get all static files that have this front matter property:

{% assign image_files = site.static_files | where: "image", true %}
{% for myimage in image_files %}
  {{ myimage.path }}
{% endfor %}

When you build your site, the output will list the path to each file that meets this front matter condition.

Choose Your Template Engine