Where to store assets for a Quarto website?

[maelle]

Description

Imagine I have font files and images that I want to store in my website source and publish at the root, or in a subfolder, of the rendered website. Where would I store those?

In a Hugo website, that would correspond to the static/ folder: if I have static/img/logo.png in my website https://example.com source, the logo will be at https://example.com/img/logo.png. I'm looking for the equivalent Quarto concept.

[hrbrmstr]

For a recent site I stood up, I did:

resources:
  - "data/*"

In _quarto.yml.

You can add as many dirs as you like and can reference the files in data or wherever with that dir prefix.

In: https://companion.hrbrmstr.dev/posts/2023-09-16-rbql/ , the data file is read from https://companion.hrbrmstr.dev/data/mtcars.csv.

I'd link to the repo for the site, but it's not on any social coding service.

h/t to Perplexity: https://www.perplexity.ai/search/in-a-quarto-O4GCx4BnQl.lzAeCFddmyA?s=c b/c I could not find out this info after a quick docs scan.

[maelle]

Thank you!!

[patgd]

h/t to Perplexity … b/c I could not find out this info after a quick docs scan.

I did not know about this. Thank you for sharing.

[rgaiacs]

From https://quarto.org/docs/websites/website-tools.html#site-resources

Quarto will automatically detect any files that you reference within your site and copy them to the output directory

If the auto-detect fail, you can use resources in your _quarto.yml

project:
  type: website
  resources: 
    - "*.xlsx"

or in the YAML header

---
title: "My Page"
resources:
  - "sheet.xlsx"
---

Lorem ipsum

If you are working in a Shiny project, check https://quarto.org/docs/interactive/shiny/resources.html#asset-resources.

[maelle]

Thank you!!

[mcanouil]

I usually put the assets into /assets using various subdirectory such as images, stylesheets, etc.

[maelle]

Merci ! Does this magically get recognized as resource?

[mcanouil]

Only if it is used as resources under keys such as css, logo, theme, ...
If you don't want to worry and include everything (possibly multiple times):

resources:
  - /assets

[younes-io]

I struggle to make this work for a blog. I got the image assets/background.png

The browser makes these requests:

 /blog/2023-12-15-article/background.png (404: Not Found)
 /blog/background.png (404: Not Found)

It does so because the image is defined in the html like this

style="background-image: url(background.png), url(../background.png);

[younes-io]

BTW, I defined it this way to make sure each article has its own background image..

[mcanouil]

How do you expect Quarto or the browser to find the image in assets if you don't tell it is in assets in the first place?
I might be missing something since you did not provide any concrete reproducible example.

[younes-io]

It works now, I had to do this

  resources:
    - /assets
    - /blog/**/*.jpg

It didn't "see" the images in blog/articles/ so when I reference them in the article, they're not found..
If you have a "cleaner" way of doing it, I'm all ears

[mcanouil]

I can't give you alternatives since you did not share what you did. You only shared partial pieces.