I am trying to host a Hugo website template on my local server. As mentioned in the tutorial, I downloaded the template, installed Hugo, and ran the hugo command on my machine. I got the public folder which includes index.html. When I open the index.html using my browser, it is completely messy and unstructured. However, everything was okay when I ran hugo server -D.
How can I fix this issue?
I am using version v0.115.4 of Hugo, but I also tried with the latest version and had the same problem even with the latest version.
That’s not the way to view the generated site in production. You either need a web server (like Apache or Nginx) to upload the public folder or host your site with other providers Hosting and deployment | Hugo.
When you upload your site’s files to your hosting, they will display exactly as you saw when running hugo server -D .
The thing is, the path to the site’s styles is indicated like as /css/style.css
but when opening the file on the computer, the path should be like ./css/style.css .
This is how we inform the browser that it should look for the styles in the current folder with the file.