Bengal processes your CSS, JavaScript, images, and fonts with optional minification and fingerprinting.
How Assets Flow
flowchart LR
subgraph Sources
A[static/]
B[assets/]
C[Theme assets]
D[Page bundles]
end
subgraph Processing
E[Collect]
F[Minify]
G[Fingerprint]
end
subgraph Output
H[public/]
end
A --> E
B --> E
C --> E
D --> E
E --> F --> G --> H
Asset Locations
| Location | Copied To | Processing | Use For |
|---|---|---|---|
static/ |
public/ |
None | Files that don't need processing |
assets/ |
public/ |
Full pipeline | CSS/JS needing minification |
Theme'sstatic/ |
public/ |
None | Theme's static files |
| Page bundles | public/ |
Scope-limited | Page-specific images/data |
Quick Reference
toml
# bengal.toml
[assets]
minify = true
optimize = true
fingerprint = true # main.css → main.a1b2c3.css
kida
{# Basic asset URL (function syntax) #}
<link rel="stylesheet" href="{{ asset_url('css/main.css') }}">
{# Fingerprinting is automatic when enabled in config #}
{# Outputs: /assets/css/main.a1b2c3.css #}
{# Images #}
<img src="{{ asset_url('images/logo.png') }}" alt="Logo">
kida
{# Access assets co-located with current page #}
{% for image in page.resources.match("*.jpg") %}
<img src="{{ image.rel_permalink }}" alt="{{ image.title }}">
{% end %}
Tip
Fingerprinting adds a hash to filenames (main.a1b2c3.css) for cache-busting. Enable it in production for optimal caching.
Icons
Bengal includes a comprehensive Icon Reference powered by Phosphor Icons. Use inline icons in content with{icon}name`` syntax:
markdown
{icon}`check:24:icon-success` Task complete!
For custom icons, place SVG files in themes/your-theme/assets/icons/. See the Icon Reference for the full gallery and customization options.