Stylesheets aren't being loaded when deploying site

support
1

I’ve been building my site only using hugo server -D so far, without any issues.

Yesterday I attempted at deploying my built page to my server, but the stylesheets aren’t being loaded correctly. Apparently, only the main.css is being loaded, the other stylesheets imported with @import are all throwing 404 exceptions.

This is my page header:

<head>
    <meta charset="utf-8" />
    <title>{{ .Title | default .Site.Params.title }}</title>
    <base href="{{.Site.BaseURL}}"/>
    ...
    <link rel="icon" href="media/favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/main.css" />
</head>

And this is the start of my main.css:

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300&display=swap');
@import 'normalize.css';
@import '_index.css';
@import '_header.css';
@import '_content.css';
@import '_list.css';
@import '_single.css';
@import '_footer.css';

Is this a known issue? And if yes, how can I work around it?

2

Have you set baseURL in your site’s config file (config.toml)?

Can you share a link to your code (e.g. a git repository)?

3

I’ll mark the repository as public while we investigate the issue: https://github.com/YilianSource/ysweb
This repository contains the source files of the page.

I did set a baseUrl, as you can see in the config.json file.

4

You probably need to remove this line from /layouts/partials/head.html:

<base href="{{ .Site.BaseURL }}">

Then it should be working with

@import '_index.css';
…

or

@import '/css/_index.css';
5

That does work - for the homepage.
Every page that is inside a subdirectory doesn’t find the stylesheets now.
How could I fix that?

6

You need to use a leading slash:

<link rel="stylesheet" type="text/css" href="/css/main.css" />
7

Here a side note. If you don’t want to make things too complicated just ignore it :wink:

The @import will make CSS rather slow. This is relevant only if you have tons of CSS, of course. But you could automatically combine all CSS files like this (/layouts/partials/head.html):

{{ $CSS := resources.Match "css/*.css" | resources.Concat "css/main.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $CSS.RelPermalink }}" media="all">

(The resources.Match method for assets was introduces to Hugo 0.57. Yet, if the order of the files is important you need to use the slice function.)

Then take out all @imports from main.css—apart from Google fonts.

Finally you would need to move the /css/ folder into an /assets/ folder.

8

Sweet, thanks about the heads-up about @import’s speed!

Unfortunately, now it attempts to load the styles from D:/css/main.css, and not from the relative path.
Obviously just when testing the built site, when running with hugo server -D on localhost it will find the files.

9

Yes, that is clear. It only works from a server—Hugo’s built in server or a web server.

If your site really should work online and ‘offline’ from your hard drive, the approach would be different.

10

I’ve deployed the site again, but the same errors when loading the stylesheets occur.

I might update to Hugo 0.57 to use the code you sent.

11

For some reason your CSS (apart from main.css) files seem to be missing:

sc
sc.png1534×260 66.3 KB

Could you try this:

  • Delete your local public folder.
  • Delete your local resources folder
  • Deploy the site using the command hugo.
  • Check whether there are all relevant CSS files in the public folder.
  • If yes, re-upload your site.
12

I probably know why your CSS files are missing: GitHub pages does not allow leadings underscores.

Everything you did above is correct, but you need to rename your files, e.g. _index.css --> index.css and the @imports accordingly.

As it’s a GitHub specific behaviour everything worked on my server.

13

Oh my, I wish I knew that earlier. Everything works now!
Thanks for your help!