Hie all, I am new to this but I have searched for my problem didn’t find a solution. When I run my hugo website with ‘hugo serve’ it displays as intended, but when I host it on netlify or build it on my local machine using the ‘hugo’ command, it does not seem to render the css files.
When I edit the built files to simply start with ‘css/styles.css’ with no slash or any other character as prefix, it renders correctly.
Help with this.
You need to post a link to your repo withe the site’s source code to see what’s going on.
Hello. Find below the link to the repository with the source code.
Thanks
See my reply in this post: Hugo does not build without '-t' parameter
It seems that something similar is going on in your repo.
If the above does not fix your problem let me know.
EDIT
I downloaded your repo to test locally the theme initio was missing. When I ran hugo server I got an empty page.
Don’t know how your site runs locally.
Also can you please tell me where you found the instructions about setting up your themes folder like you did? Who said that it’s enough to simply point to a Hugo theme’s Github repo and not clone it within your project (as is stated in the Documentation)?
I’m asking because this is the second time I see this set up, this week and it seems that there may be an article with wrong information and I would like to notify whoever gave such instructions that they’re wrong.
So, for the theme installation, I followed the instructions from the them repository
I think I might have mispelt the theme name in the config.toml. I wrote ‘initio’ instead of ‘hugo-initio’. However, after changing it its still not rendering.
Did you execute git clone --depth=1 https://github.com/miguelsimoni/hugo-initio.git ?
It doesn’t seem that you did.
Also you should enter the exact theme name in your config.
Yes I missed cloning it as such and naming it in the config.
I have done that now and I have built the website. The built static pages are rendering on localhost but still not rendering on netlify.
What are the contents of your netlify.toml?
If you don’t have one you really need to create it to specify a Hugo version for production.
Netlify defaults to Hugo 0.17 that is a very old version and current Hugo projects fail to deploy with that version.
I configured the netlify deploy settings directly from the UI presented in the netlify account. Do I need to create a netlify.toml manually in my repo?
No, but as @alexandros said, you need to set the Hugo version to one of the newer versions… set HUGO_VERSION env var in Netlify to 0.37.
Second point: Ensure that you commit the .gitmodules file (with path, etc of the theme submodule). That is what tells Netlify that the repo has submodules too.
I have done just that and the netlify build log has shown that Hugo Version 0.37 has been installed. My .gitmodules have the right path and naming of the theme submodule.
I still have the same problem. I don’t know what I am doing wrong.
Your site at: http://lucid-gates-dcfaea.netlify.com looks good on my end.
So I created a netlify.toml file in my repository’s root and specified the hugo version and build parameters such as publishDIR, build command, and one thing, Previously my hugo was publishing static file into the docs directory. Changed this to publish to the public directory.
Everything is now working.
Thanks @alexandros and @kaushalmodi Used your solutions.
Hie @alexandros , so the css not rendering still persist when accessing the site through https
You need to address the errors that you can see in a browser console. When I look at your site in Chrome and check the console (alt-cmd-i), I see errors about “mixed” assets. If you’re going to choose to force https, then make sure you’re loading everything else from https and, make sure you’ve not got anything in an .htaccess (or equivalent) that is blocking.
