Hugo 页面未正确呈现答案

【问题标题】：Hugo page isn't rendering correctlyHugo 页面未正确呈现
【发布时间】：2020-10-09 02:57:34
【问题描述】：

我正在尝试使用 Hugo 和这些指南（here 和 here）创建一个静态博客。

我已经安装了 Hugo 并创建了一个用于测试的最小占位符博客文章。当我在浏览器中运行hugo server -D 并转到localhost:1313 时，页面会正确呈现。但是，当我使用浏览器打开public/index.html 时，页面无法正确呈现。

我正在使用我正在使用的主题附带的config file。在配置文件中，我将主题属性更改为主题名称，将 baseURL 更改为“/”，以及其他较小的字段，如作者、描述和版权。

为什么index.html 在从本地 Hugo 服务器提供服务时会正确呈现，而当我只是通过浏览器将其作为文件访问时却没有？

Here is my blog being correctly rendered through Hugo server

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

这是我的配置文件

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

这是由 Hugo 生成的public/index.html

<!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>

【问题讨论】：

标签： html css hugo

【解决方案1】：

假设您的布局文件使用relURL，¹将以下内容放入您的config.toml。

relativeURLs = true

确保...

这一行高于所有 TOML 表
字符串relativeURLs 使用这些大小写字符

这记录在https://gohugo.io/content-management/urls/#relative-urls:

默认情况下，Hugo 会保持所有相对 URL 不变，当您想让您的网站可从本地文件系统浏览时，这可能会出现问题。在站点配置中将 relativeURLs 设置为 true 将导致 Hugo 将所有相对 URL 重写为相对于当前内容。例如，如果您的 /posts/first/ 页面包含指向 /about/ 的链接，Hugo 会将 URL 重写为 ../../about/。

¹ relURL 记录在 https://gohugo.io/functions/relurl/ 并且您的主题（我认为是 https://github.com/alexandrevicenzi/soho）使用它。

【讨论】：

【解决方案2】：

您的页面中似乎没有加载 CSS 文件。很可能它们没有在 HTML 文件中正确引用，即在主题或布局中。

在您的config.toml 中，我看到您已将baseURL 设置为/，但它应该包含主机名，例如https://yoursite.com/。检查Hugo's config reference。

当使用hugo server 在本地运行时，您可以使用--baseURL flag 覆盖该设置。

【讨论】：