BHDicaire

Hugo asset pipeline

Governance rules

The Hugo asset pipeline turns local source files into the CSS and JavaScript shipped by both sites. Nothing is loaded from a third-party CDN in production.

The base template owns the pipeline in layouts/_default/baseof.html.

Stylesheets#

The stylesheet bundle has two inputs:

  1. assets/css/generated/tokens.css
  2. assets/css/site.css

Hugo loads the generated token CSS first, then processes site.css through PostCSS:

{{ $tokensCSS := resources.Get "css/generated/tokens.css" }}
{{ $siteCSS := resources.Get "css/site.css" | css.PostCSS }}
{{ with slice $tokensCSS $siteCSS | resources.Concat "css/site-bundle.css" | minify | fingerprint }}
  <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}">
{{ end }}

That order matters. Tokens define reusable values such as colour, type, and spacing. Component CSS composes those values into concrete selectors, layout behaviour, focus states, and responsive rules.

Use Foundations > Tokens > Pipeline for Style Dictionary details. This page documents how Hugo ships the generated output.

JavaScript#

The site JavaScript lives in assets/js/site.js. Hugo minifies it, fingerprints it, and emits the script tag:

{{ with resources.Get "js/site.js" | minify | fingerprint }}
  <script defer src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}"></script>
{{ end }}

JavaScript should remain progressive enhancement. Tables, search, tabs, copying, and small disclosure behaviours can improve the page, but rendered HTML should keep its structure and meaning without JavaScript.

Fonts#

Fonts are local files under static/fonts/ and are preloaded from the base template:

<link rel="preload" href="/fonts/red-hat-display-variable.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/fonts/red-hat-text-variable.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/fonts/source-serif-4-variable.woff2" as="font" type="font/woff2" crossorigin />

Keep fonts self-hosted. Adding a font means adding the file locally, documenting the use in Foundations, and updating preload only when the font is used broadly enough to justify early loading.

Verification#

Before committing pipeline changes, run:

npm run tokens:check
npm run lint
npm run build:brand

Use npm run tokens:update when token values or metadata change. Use npm run build:hugo when a change could affect both the main and brand sites.