'Hugo not rendering the public folder locally

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.
csshugostatic-site


Solution 1:[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.

Solution 2:[2]

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).

enter image description here

Solution 3:[3]

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

Solution 4:[4]

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.

Solution 5:[5]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 octothorpe_not_hashtag
Solution 2 Olivier
Solution 3 handsomeyang
Solution 4 Anthony Dellavecchia
Solution 5 Bit33

Related Questions