Hugo page isn't rendering correctly

Question

I'm trying to create a static blog using Hugo and these guides (here and here).

I've installed Hugo and created a minimal place-holder blog post for testing. The page renders correctly when I run hugo server -D and go to localhost:1313 in a browser. However, the page doesn't render correctly when I just open public/index.html with a browser.

I'm using the config file that came with the theme that I'm using. In the config file, I've changed the theme attribute to the name of the theme and the baseURL to '/', as well as other smaller fields like author, description, and copyright.

Why is index.html being rendered correctly when it's being served from the local Hugo server but not when I'm just accessing it as a file through the browser?

Here is my blog being correctly rendered through Hugo server

Here is my blog post being rendered incorrectly rendered through direct file access

This is my config file

theme = "soho"
baseURL = "/"
title = "Personal Blog" # "The World's Okayest Programmer"
languageCode = "en"
enableInlineShortcodes = true

summarylength = 10
enableEmoji = true

[params]
author = "My Name"
description = "My Blog"

## Set one of:
# gravatar = "soho@example.com"
profilePicture = "images/profile.png"

copyright = "My Name"
license = "CC BY-SA 4.0"
licenseURL = "https://creativecommons.org/licenses/by-sa/4.0"

## Set custom theme color.
# themeColor = "#fc2803"

## Set custom CSS and/or JS to override site defaults.
customCss = ["css/blog.css"]
customJs = ["js/blog.js"]

  ## Set as many as you want.
  [[params.socialIcons]]
  icon = "fa-linkedin"
  title = "Linkedin"
  url = "#"

  [[params.socialIcons]]
  icon = "fa-github"
  title = "GitHub"
  url = "#"

  [[params.socialIcons]]
  icon = "fa-twitter"
  title = "Twitter"
  url = "#"

[menu]

  [[menu.main]]
  name = "Posts"
  weight = 100
  identifier = "posts"
  url = "/posts/"

  [[menu.main]]
  name = "About"
  identifier = "about"
  weight = 300
  url = "/about/"

[taxonomies]
  category = "categories"
  series = "series"
  tag = "tags"

[markup]

  [markup.highlight]
  codeFences = true
  guessSyntax = false
  hl_Lines = ""
  lineNoStart = 1
  lineNos = false
  lineNumbersInTable = true
  noClasses = true # if false, you need to provide you own custom CSS
  style = "monokai"
  tabWidth = 4

And this is the public/index.html that is generated by Hugo




  
  
  
  Personal Blog
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  


  
    
      
        
          
        
        Personal Blog
        My Blog
      
      
        
          
            Home
          
          
            Posts
          
          
            About
          
        
      
      
        
          
        
        
          
        
        
          
        
      
    
  
  
    
    
  
  
    
      © My Name 2020
      · CC BY-SA 4.0

user_10881303 · Answer

Assuming your layout files use relURL,¹ put the following in your config.toml.

relativeURLs = true

Make sure...

this line is above all TOML tables
the string relativeURLs uses these upper- and lower-case characters

This is documented at https://gohugo.io/content-management/urls/#relative-urls:

By default, all relative URLs are left unchanged by Hugo, which can be problematic when you want to make your site browsable from a local file system. Setting relativeURLs to true in your site configuration will cause Hugo to rewrite all relative URLs to be relative to the current content. For example, if your /posts/first/ page contains a link to /about/, Hugo will rewrite the URL to ../../about/.

¹ relURL is documented at https://gohugo.io/functions/relurl/ and your theme, which I think is https://github.com/alexandrevicenzi/soho, uses it.

user_1148483 · Answer

It looks like the CSS files are not loaded in your page. Most likely they are not referenced properly in the HTML file, i.e. in the theme or layouts.

In your config.toml I see that you've set the baseURL to /, but it's supposed to include the hostname, so something like https://yoursite.com/. Check Hugo's config reference.

When running locally with hugo server, you can override that setting with the --baseURL flag.

Hugo page isn't rendering correctly

2 Answers