Assets not being loaded in fresh Hugo skeleton page

support
1

Hi all!

I am trying to build a Hugo site based on a 3rd party Bootstrap theme. I started out by copying their HTML code and splitting it up into the various parts, starting with the template’s section.

The theme is including various CSS, JS and other files, which I placed in the assets directory:

...
assets
|- img
   |- favicon.ico
...
themes/<mytheme>
|- assets
   |- css
   |- vendor
      |- aos
      |- bootstrap-icons
      |- ...

For some reason, none of these resources are being loaded (404). Here are two examples of how I am trying to load them in the section of my page as defined in themes/<mytheme>/layouts/baseof.html:

<head>
...
<link href="{{ "assets/img/favicon.ico" | relURL }}" rel="icon">
<link href="{{ "assets/vendor/bootstrap-icons/bootstrap-icons.css" | relURL }}" rel="stylesheet">
...
</head>

I have tried

  • moving these files to the main static directory (and changing the links, naturally)
  • moving these files into just a single assets directory on both root and theme level
  • defining staticDirs explicitly
  • adding mount instructions in both the main and theme config files

I feel like I am doing something very basic wrong. I am stuck on what it might be however. Any (obvious) ideas?

5

The “static” dir is for files that you want to add as is.

The “assets” dir is for files that you need to process with Hugo in some way. Images that you resize, minify js etc. Files in “assets” are not copied over automatically. See e.g.

2 Likes
6

Oh yes, I’m dumb.
this <link href="{{ "/img/favicon.ico" | relURL }}" rel="icon"> will look into static directories. what you need is this <link href="{{ resources.Get "/img/favicon.ico"}}" rel="icon">

7

Oh well, that was basic enough :grimacing:

I did work by just moving the files to static from assets and using the

<link href="{{ "/img/favicon.ico" | relURL }}" rel="icon">

reference.

<link href="{{ resources.Get "/img/favicon.ico"}}" rel="icon"> does not appear to work.

8

resources.Get "/tmp/main.scss" with /assets/tmp/main.scss works so the code is valid. You must be doing something wrong or your browser wants nothing else than favicon.ico at the root of your website… you don’t need that link element, they automatically look for that path even with a different href indicated.

9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.