I’ve made a site using the Hugo and the Osprey theme. I am able to deploy the site locally and it looks all good. It’s hosted here on Github.
When I tried to deploy it using Netlify, the site would generate without the CSS. After checking the Netlify website, I saw that one of the gotchas for Hugo is sites that use SASS. Which the osprey theme does use.
I have read some workarounds for this involve generating assets in the resources folder and committing that to git and then pointing your site resources there.
I have attempted following the solution steps listed in this topic.
Install the extended version of Hugo locally.
Make sure you have resources and assets folders, create them if needed.
Make sure both folders are added to your git commit.
Move resources you wish process into the assets folder. I created sub-folders in the same structure as the static folder that previously contained my css & js assets.
Adjust your templates to use the resources function. See below for some examples.
Run either hugo or hugo server to populate the resources folder.
Update your netlify.toml settings file so that Netlify uses Hugo v0.45+
Commit and sync your git repo - Netlify should now build your site just fine.
Test and enjoy!
But after moving the css files and image assets to the resource folder, when I wanted to point the templates/partials to the css in the resource folder I struggled to find where the css is referenced. I can’t find a stylesheet or a reference to main.css in the layout of the code. So this is where I’m stuck.
If anyone can help me with how I can complete this solution or use an alternative solution to get this static site hosted easily I would really appreciate that. I don’t have too much experience with web development and networking but I have hosted 3 Hugo sites on netlify with few problems.
I just really want this website up with this theme. I like it and it really works.
I look forward to hearing your responses.
In the meantime I will be attempting to deploy this on Github Pages ^_^*
If you would like to use the new SASS compilation features in recent Hugo releases (using the “extended” version of the binaries), we do not yet support that.
The good news: you probably don’t have to worry about pipes. The bad news, you are back to square one. Do you have a link to the deployed site? Maybe we can look at the CSS paths being generated and figure it out. I see the domain in your config isn’t loading.
The SASS assets are generated within the /resources/ folder once you execute hugo server locally.
One only needs to commit the above folder along with its contents for the site to be deployed on Netlify.
No need move any other files within that folder or change template references to assets.
BUT
The Osprey Theme seems to be generating its main.css in another way and it does not use the Hugo Pipes workflow at all.
So you are better off asking the theme author on GitHub for help regarding Netlify deployment.
Although I did notice that the theme’s issue tracker has similar issues to the one you opened here (like this one and particularly this one)
Unfortunately I do not have the time to troubleshoot this but the way to go about it would be to inspect your site when deployed to Netlify and look at the generated link to main.css. The wrong URL will give you a hint about how you need to construct it so that it loads properly.
In your site’s config.toml please set the baseURL parameter to the www version of your website so that the stylesheet loads properly.
EDIT
Also changed the title of the topic because this issue does not seem related to the Osprey Theme but rather it has to do with your project’s baseURL configuration.
You figured out why it wasn’t loading, that’s great! The reason the site didn’t load for me is your DNS is pointing to another server for your primary record (the ubongogamelab.com without the www sub-domain). FYI.
Everything’s working now