CODEWITHSUNDEEP
csshugostatic-site
Rajiv Singh
Rajiv Singh

Reputation: 3937

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:

Upvotes: 17

Views: 7138

Answers (5)

anthonyjdella
anthonyjdella

Reputation: 623

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.

Upvotes: 0

handsomeyang
handsomeyang

Reputation: 301

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

Upvotes: 0

Olivier
Olivier

Reputation: 809

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

Upvotes: 0

octothorpe_not_hashtag
octothorpe_not_hashtag

Reputation: 460

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.

Upvotes: 8

Bit33
Bit33

Reputation: 358

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.

Upvotes: 0

Related Questions