Hugo not rendering the public folder locally

Question

When I use the command hugo, it generates the index.html in the Public folder. When I open index.html, the site load like this:

But when I use the hugo serve command locally, it generates the link http://localhost:1313/, and the site load properly. It loads like this:

I think the problem is because of the not proper rendering of files or anything similar.

My approach:

• I added the code relativeURLs = true and uglyURLs = true at top of the config.toml file but still it does not rendered properly.
• I had set baseurl = "/" in config.toml file but this also does not work.

Answer 1

Your theme might be loading CSS using {{ .Site.Baseurl }}.

For example:

<link rel="stylesheet" href="{{ .Site.BaseURL }}css/style.css">

In that case, make sure that the BaseUrl defined at the top of your config.toml file is set to http://localhost:1313, which will allow your local server to find the CSS file.

Answer 2

You're CSS file is not loading properly. This can have several reasons, for example:

• http url on an https website.
• wrong "integrity" hashes on you css file.
• css file is not deployed or not on same location on the server.

Google developer tools plugin might help here. If you right click on your web page, click "inspect" and go to console. You can see any loading errors.

Answer 3

You can install Web Server for Chrome and choose the /public folder of your Hugo website. Your site should now render correctly at the url configured (http://127.0.0.1:8887 in the example screenshot).

Answer 4

You might want to set baseURL to the absolute path of the public folder.

Answer 5

Fixed this by configuring baseUrl in config.toml.

If you're deploying using GitHub pages, you'll want to make your baseUrl equal to your github pages domain.