Lost css

Can someone help me with the path for my css?

as normal, in the public folder there is

/404
/fonts
/css
etc

and when I add the homepage index.html it is fine. however when I add other single pages, it cannot see the css from the folder it creates for the new post. ie in

/post

the original css path in the template is css/style.css, but that is obviously wrong for the new post.

I have tried …/css/style.css but that isn’t finding it.

Can you provide more details around what your static directory looks like?

erm, yes:
it has subfolders:
/css
/fonts
/images
/js

the style.css is a file in the /css subfolder

Can you try

/css/style.css

I think the problem is that the template is calling the js as well as the css - but I can’t work out what the path should be, so it isn’t displaying

I have tried /css/style.css and …/style.css and …/…/style.css but none of them seem to work. Maybe I’ll have to abandon this template! any html in the main /public folder seems to work when …/public/css is used, but nothing seems to work when there is an index.html file in a subdirectory like /post

<script src="../../public/js/jquery.min.js"></script> 
        <script src="../../public/js/jquery.dropotron.min.js"></script> 
        <script src="../../public/js/skel.min.js"></script> 
        <script src="../../public/js/skel-layers.min.js"></script> 
        <script src="../../public/js/init.js"></script> 
        <noscript> 
            <link rel="stylesheet" href="../../public/css/skel.css" /> 
            <link rel="stylesheet" href="../../public/css/style.css" /> 
            <link rel="stylesheet" href="../../public/css/style-desktop.css" /> 
        </noscript>

maybe I’ll just try putting all of the scripts directly inside the head.

public shouldn’t be in your path at all. If you have your css/ stowed in the static/ directory, Hugo will copy it into public/ automatically. But public is the “root” of your site - it’s not part of it.

Have you tried {{ .Site.BaseURL }}js/query.min.js in your template?

By a process of elimination, I have been able to work out that it is the js init.js which is causing the problem - it is what is making the site dynamic so determining which css to load.

I have been able to load it hosting the js and css elsewhere, but I will try your path suggestion…

it says Error while rendering homepage: template: index.html:14:23: executing “index.html” at <.Site.BaseURL>: BaseURL is not a field of struct type *hugolib.SiteInfo

I have set the baseurl as file///path/to in config but I’m not sure what this should be in this instance.

Here’s a full example of BaseURL:

<a class="blog-logo" href="{{ .Permalink }}"><img src="{{.Site.BaseUrl}}{{ .Site.Params.logo }}" alt="Blog Logo" /></a>

What does it look like in your index.html file?

In the config.toml, this is what it should look like:

baseurl      = "http://www.example.com"
languageCode = "en-us"
1 Like

hum. well I found that one of the problems was that canonifyurls was set to true. So Site.BaseUrl works now, but obviously I need to put in something else other than example.com

Great, I have it working now. unfortunately I don’t think this will work in the js, but finally some progress! thanks for your help.

Any ideas how I can get the css and js files to path back to root? I have tried to use …/ as they are not going to be moving, but that doesn’t seem to have the desired effect.

done - I wasn’t going far enough back with the /path