CODEWITHSUNDEEP
htmlcsshugo
Brad Carter
Brad Carter

Reputation: 115

Hugo page isn't rendering correctly

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 = "[email protected]"
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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="generator" content="Hugo 0.72.0" />
  <title>Personal Blog</title>
  <meta name="description" content="My Blog" />
  <meta itemprop="name" content="Personal Blog">
  <meta itemprop="description" content="My Blog">
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Personal Blog" />
  <meta name="twitter:description" content="My Blog" />
  <meta property="og:title" content="Personal Blog" />
  <meta property="og:description" content="My Blog" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="/" />
  <link type="text/css" rel="stylesheet" href="/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/css/hyde.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
    integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">
  <link href="/index.xml" rel="alternate" type="application/rss+xml" title="Personal Blog" />
</head>
<body>
  <aside class="sidebar">
    <div class="container">
      <div class="sidebar-about">
        <div class="author-image">
          <img src="/images/profile.png" class="img-circle img-headshot center" alt="Profile Picture">
        </div>
        <h1>Personal Blog</h1>
        <p class="lead">My Blog</p>
      </div>
      <nav>
        <ul class="sidebar-nav">
          <li>
            <a href="/">Home</a>
          </li>
          <li>
            <a href="/posts/">Posts</a>
          </li>
          <li>
            <a href="/about/">About</a>
          </li>
        </ul>
      </nav>
      <section class="social-icons">
        <a href="#" rel="me" title="Linkedin" target="_blank">
          <i class="fab fa-linkedin" aria-hidden="true"></i>
        </a>
        <a href="#" rel="me" title="GitHub" target="_blank">
          <i class="fab fa-github" aria-hidden="true"></i>
        </a>
        <a href="#" rel="me" title="Twitter" target="_blank">
          <i class="fab fa-twitter" aria-hidden="true"></i>
        </a>
      </section>
    </div>
  </aside>
  <main class="content container">
    <div class="posts">
    </div>
  </main>
  <footer>
    <div>
      &copy; My Name 2020
      &middot; <a href="https://creativecommons.org/licenses/by-sa/4.0" target="_blank">CC BY-SA 4.0</a>
    </div>
  </footer>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"
    integrity="sha256-MAgcygDRahs+F/Nk5Vz387whB4kSK9NXlDN3w58LLq0=" crossorigin="anonymous"></script>
</body>
</html>

Upvotes: 2

Views: 6083

Answers (2)

n m
n m

Reputation: 1791

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.

Upvotes: 3

Andrei Mustata
Andrei Mustata

Reputation: 1133

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.

Upvotes: 0

Related Questions