Hugo 页面无法正确呈现

Question

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

我已经安装了 Hugo 并创建了一个最小的占位符博客 post 用于测试。当我运行 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>

Answer 1

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

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

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

Answer 2

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

relativeURLs = true

确保...

这一行在所有 TOML 表之上
字符串relativeURLs使用了这些大小写字符

这记录在 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 记录在 https://gohugo.io/functions/relurl/ and your theme, which I think is https://github.com/alexandrevicenzi/soho，使用它。

Hugo 页面无法正确呈现

Hugo page isn't rendering correctly

html

css

hugo