CSS location in new theme?

support
1

Hi,

I’ve just started using Hugo, created a new site and a theme.

Why do css files need to be placed in themes/mytheme/assets folder, not themes/mytheme/static?

I’ve edited themes/mytheme/layouts/partials/head/css.html like you can see below. But Hugo seems to only be looking css up in themes/mytheme/assets.

{{- with resources.Get “css/normalize.css” }}{{- if eq hugo.Environment “development” }}
{{- else }}{{- with . | minify | fingerprint }}
{{- end }}{{- end }}{{- end }}
{{- with resources.Get “css/bettertext.css” }}{{- if eq hugo.Environment “development” }}
{{- else }}{{- with . | minify | fingerprint }}
{{- end }}{{- end }}{{- end }}
2

having any file in the static folder results in:

  • hugo will automatically copy the file from /static to /public. using the same folder structure.
  • you cannot use hugo pipes to process it
  • you will have to take care
    • delete non needed files in public cause hugoonly adds/updates them (it never deletes)
    • add the correct links (src/href) in your templates

You seem to want minify and fingerprint. The right choice for the css is to store it in assets.

3

Thanks! Regarding –

add the correct links (src/href) in your templates

Manuals I’ve found seem to be outdated, as some paths and filenames have changed. Is there a newer manual on this?

Also, is there a way to get Hugo to fully refresh public?

4

{{- with resources.Get “css/normalize.css” }}

Does this mean that Hugo looks up both in themes/mytheme/assets/css/ and themes/mytheme/static/css/?

5

No - only in assets: assets/css and themes/mytheme/assets/css/ (in that order)

1 Like
6

the most recent documentation is here

for specific problems you will have to provide specific questions incl context: see Requesting Help

just give the docs a try: Hugo CLI

and ofc a search in the forum will reveal some topics on that

7

Thanks, this seems to be the solution.

The static directory contains files that will be copied to the public directory when you build your site. For example: favicon.ico, robots.txt, and files that verify site ownership. Before the introduction of page bundles and asset pipelines, the static directory was also used for images, CSS, and JavaScript.

(source)

As for refreshing public, this command $ hugo server -w --cleanDestinationDir did nothing. I. e. after I moved themes/mytheme/static/css/normalize.css etc. to themes/mytheme/assets/css/, the site look was not updated, also not in another browser. I removed public contents manually, after which the site look did refresh.

1 Like
8 
$ hugo help

--cleanDestinationDir   remove files from destination not found in static directories

That means you must have a static directory, even an empty one, for –cleanDestinationDir to work.

9

I definitely do have empty static dir in both the main website dir and themes/mytheme/.

10 
no static directory
content/
├── posts/
│   ├── post-1.md
│   └── post-2.md
└── _index.md

$ hugo

public/
├── posts/
│   ├── post-1/
│   │   └── index.html
│   ├── post-2/
│   │   └── index.html
│   └── index.html
└── index.html

$ rm content/posts/post-2.md
$ hugo --cleanDestinationDir

public/
├── posts/
│   ├── post-1/
│   │   └── index.html
│   ├── post-2/           <-- it's still there from the previous build
│   │   └── index.html
│   └── index.html
└── index.html

$ mkdir static
$ hugo --cleanDestinationDir

public/
├── posts/     <-- post-2 is now gone
│   ├── post-1/
│   │   └── index.html
│   └── index.html
└── index.html
11

Could you try renaming a css file within themes/mytheme/assets/css? Will it still refresh?

12

You are raising two very different concerns:

That is not true. It clears the public directory when a static directory exists as shown in my previous comment. And the -w flag is superfluous; it can be removed.

When running hugo server there are several known issues related to automatic page refresh. Whether you are running into a known issue is impossible to know without more information (i.e., access to your project repository).

13

Like I said, I am new to Hugo and may have very well done something wrong.

But this is the dir with the project. All I’ve done was – create a new site and a theme. Next, I tried to add my own css and remove the default one. I very much appreciate your help.

I use stock Fedora Linux. Hugo version: hugo v0.142.0+extended linux/amd64 BuildDate=2025-01-24T00:00:00+00:00 VendorInfo=Fedora:0.142.0-4.fc42.

14

your css problem is solved - at least your provided repo loads your custom stuff. I consider that as soved and closed.

If your last post is another question, please open a new issue.

hints:

common usage for a theme is to provide layout and styling, so I would move the content folder to the root of your repo to separate “UI” and content

If you start from scratch, I would use an up to date hugo v0.145.0 - last one using the old widely spread template organization (with many web resources)

for cutting edge and the new template system use the latest (currently v0.148.2).

15

I think I should learn with the newer version right away.

If changes to css are refreshed without issues in public, it must be something wrong on my side.

Appreciate the help.

16

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