[SOLVED] Any reason why hugo server is serving to localhost:1313/projectname/?

New Hugo site is serving to localhost:1313/projectname/ and not localhost:1313

Is there any reason why this happens? I might have done something wrong by accident when creating it:

  • Had an already existing folder /projectname/ with some files in it
  • Created the new Hugo site in that folder, in its own folder /projectname/
  • Then moved all the Hugo files up one level and deleted the sub folder, everything is now together

Is it possible to use localhost:1313 on its own?

Any help or advice appreciated!

If you’re able to, provide a link to your git repo, or create a sample repo so that we can attempt to reproduce your issue. If you can’t do either of those, take a screenshot of your project structure and post it.

Thank you. Here’s a screenshot of the folders. The extra folders & files (/day01-10/, /img/ and index.html in the root) are in the process of being templated. Does having extra content in the Hugo folder affect where it serves to?

I’m having difficulty now referencing the static assets on the local server because the file paths are wrong due to the extra folder path.


What folder are you running hugo server from?

I’m inside the /javascript30/ folder

Show how you’re referencing static assets

I need to do a couple of things with stylesheets, which has got a little messy and is failing. Please bear with me while I try to accurately explain.

Firstly, all pages, regardless of depth, need to reference a main stylesheet.

I have <link rel="stylesheet" href="/css/main.css" type="text/css" /> in baseof.html.

On both localhost:1313/javascript30/ and localhost:1313/javascript30/day01/ the console gives the error:
Refused to apply style from 'http://localhost:1313/css/main.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

So it’s looking one folder too high, as well as this other error.

Removing the preceding slash on css/main.css in the tag causes it to then render correctly on the index but not on /day01/ - on /day01/ that then gives:
Refused to apply style from 'http://localhost:1313/javascript30/day01/css/main.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Secondly, each ‘day’ needs to reference an additional page-specific, stylesheet (will add in through a block on the ‘day’ layout). Not got that far yet due to the problems above! Any help appreciated.

See if piping your CSS file to absURL makes a difference:

{{ $mainCSS := "css/main.css" }
<link rel="stylesheet" href="{ $mainCSS | absURL }" type="text/css" />

That’s worked - thank you. Both the index and the day page are using that stylesheet correctly. I checked the docs and I think I understand what absURL is doing.

I’ll try that approach on the day-specific stylesheet as well.

If it weren’t serving into /javascript30/ would that then not be needed? I’m still completely lost why it’s doing that.

Not sure. I’d have to see your full project layout to troubleshoot (preferably as a git repo).

Very sorry I can’t share repo.

I’ve found out what’s going on.

The baseURL was set to “https://mygithubname.github.io/javascript30” - which is the URL the site would be at. In otherwords, it’s within a sub-folder there. Clearing the baseURL and restarting the folder has served to localhost:1313.

So the inclusion of a subfolder in the destination URL forces the localhost to mimic that. If anyone knows the benefit/reason for this would be great to know. I’m guessing I need to keep the URL accurate so will leave it in there.

It just does what you tell it to. Sometimes it’s desirable to have the main folder of a site be a subfolder under a domain, and Hugo allows for this.

Yes! I just wasn’t expecting the subfolder to be represented in the localhost too. It’s definitely made referencing the static assets a little more confusing (not helped by my own lack of understanding, though).