Pages in public folder do not display correctly. They do work in Hugo server

support
1

I am having a TON of problems getting my Hugo Fuji site working. Everything renders correctly in the Hugo server.

But when I build the pages, they no longer have CSS. The page looks somewhat correct when opened from the public folder, but it is missing style.

When I deploy it to my Netlify site it looks completely broken. Style/formatting is not correct.
Imgur
This is what the top of my config.toml file looks like:

image

I have tried doing baseURL = "/" and baseURL = "https://nickplatt.dev/", but that still does not work.

I get 404 errors in the console for all of the CSS and JS files.

I do not know why this is happening because I drag and drop my files directly from the public folder to my website’s deploy files.

I am not sure why domain/asses/css/fuji.min.css is not working when I can see the folders/files where they need to be. I am also not sure why this isn’t working when just opening the index.html files from the file explorer.

Why does it work flawlessly in the Hugo server, but does not run correctly at all either from file explorer or on my domain?
Link to files: blog/blog at main · tpbnick/blog (github.com)

2

The theme you are using has a bug in:

Remove “assets/” from the target path so it becomes “css/fuji.min.css” and it works.

3

Hi, frjo!

Thanks for the reply. I tried taking assets/ out of that code and the problem persists.

This is how it looks after removing the assets/:

{{ $options := (dict "targetPath" "css/fuji.min.css" "outputStyle" "compressed") }}

It still looks like this:
image

Removing assets/ also broke the iconfont logos (notice the squares):
image

Here is a link to my files:
blog/blog at main · tpbnick/blog (github.com)

4

When I go to your site https://nickplatt.dev/ the link to the stylesheet looks like this:

<link rel="stylesheet" href="https://nickplatt.dev/assets/css/fuji.min.css" />

It still has “assets” in the path.

6

This shouldn’t matter because both the CSS and JS files are inside the assets folder:

image
image733×387 21.9 KB

I think something bigger is wrong because all posts I click on error out. They all say “Page not found” when the URL, for example, https://nickplatt.dev/post/pythonpuzz/ does not work, but /post/pythonpuzz/ does have an index.html file in the file explorer. I am just unsure why nothing works after running the hugo command to build the HTML pages but works completely fine in the hugo server.

7

You seem to be deploying with Netlify.

  1. Check your Netlify settings (no guarantees you get help from the Hugo forum about Netlify specifically). Note the Hugo docs on deploying with Netlify: Host on Netlify | Hugo
  2. Is there any particular reason you are drag and dropping your public files instead of having Netlify build them?

Once you run hugo, the URLs referencing your assets will be relative to your baseURL. Since they don’t exist online/on the server yet, they 404.

BTW as of time of writing, your website at https://nickplatt.dev is 404.

8

I was wrong about the “assets”.

First thought was that assets folder is not copied over to public by Hugo. But with targetPath Hugo will create a separate “assets/…” folder structure in public, nothing to to with the actual “assets” folder in Hugo.