【问题标题】:Why is Hugo serving blank pages?为什么 Hugo 提供空白页?
【发布时间】:2017-09-19 05:20:57
【问题描述】:

我正在使用 Hugo 静态页面生成器构建个人网站,但是当我使用 hugo serve 时,我不再看到页面,而只是在 localhost:1313 看到的空白页面。

我删除了所有内容并进行了全新安装。但是,Hugo 仍然提供空白页。

在空白页中,我看到了之前网站草稿的 Favicon,尽管我删除了之前主题中的所有内容。我在 Chrome 中清除了浏览器并尝试了其他浏览器,但仍然无法正常工作。

不确定我可以提供什么信息,因为没有错误消息。我该如何解决这个问题?

【问题讨论】:

  • 您是否在config.toml 文件中设置了主题? config.toml 中的主题名称是否与 themes/ 文件夹中的文件夹名称相同?如果您在此处发布 config.toml 文件的内容可能会有所帮助。
  • 我遇到了同样的问题,都是关于模板的

标签: hugo


【解决方案1】:

这可能是 Hugo 项目目录中的 config.toml 的潜在问题。

我最近遇到了一个类似的问题,我在尝试使用 Hugo 创建自定义主题时只看到一个空白页面,而您所要做的就是告诉 Hugo 在哪里可以找到您的初始 HTML 页面 在浏览器上呈现。

如果您尝试安装主题或创建自定义主题,请转到基本目录中的 config.toml 并指定主题名称,如下所示:

theme = "${theme_name}"

如果您使用默认/自定义主题,主题名称将与项目目录中themes文件夹下的文件夹名称相同。

【讨论】:

    【解决方案2】:

    当我从 Github 克隆我的博客但没有包含主题子模块时,我遇到了同样的问题。包括子模块解决了我的问题:

    git clone --recurse-submodules https://github.com/username/your-blog
    

    【讨论】:

      【解决方案3】:

      问题很可能是theme - 它要么丢失,要么损坏。如果您未能提供一个可用的主题,Hugo 不会附带任何默认/后备主题。

      调试指南:

      1. 查看themes 文件夹,并按照quickstart 操作。
      2. 尝试使用另一个更简单的主题。
      3. 可能只是配置主题的问题,你也可以看hugo theme documentation

      【讨论】:

      • 是的,这听起来像是原因。 @maximumdooku 你用的是什么主题?它可能需要在 GitHub 上修复,所以如果你让我们知道,那么有人可以为你修复它。
      【解决方案4】:

      我在遵循hugo getting-started / quickstart 指南后遇到了同样的问题,但我没有使用现有主题,而是创建了一个非常基本的主题:

      1. Install hugo我选了install hugo on windows
      2. 创建一个新站点hugo new site quickstart
      3. 添加主题
        • 克隆主题(例如ananke-theme)更容易<-- this is what the quickstart does and what i left out
        • 相反,您可以使用create a themehugo new theme [your-theme-name] 在您的站点文件夹中添加一个主题骨架,例如C:\Hugo\Sites\example.com(参见屏幕截图)
      4. 添加一些内容hugo new posts/my-first-post.md
      5. 启动服务器hugo server -D --watch --verbose

      创建主题后,文件和文件夹应位于Sites/example.com/themes/your-theme-name/ 下。由于大多数生成的文件(几乎)是空的,因此您必须在快速入门示例运行之前编辑其中的一些文件。

      基于develop a Theme for Hugo我编辑/themes/your-theme-name/layouts/index.html

      <!DOCTYPE html>
      <html> <body>    
          {{ range first 10 .Data.Pages }}        
               <h1>{{ .Title }}</h1>
               <div>{{- .Content -}}</div>
          {{ end }}      
      </body> </html>
      

      hugo的基本信息取自develop a Theme for Hugo

      • Hugo 配置文件(TOML、YAML 或 JSON)位于您网站的根目录中
      • Hugo 默认:content/ 内的 Markdown,
        • 内容文件包含元数据 (frontmatter) 和文本 (/markdown) --> html to public/,
        • 前端属性示例:date, title, description, categories, tags
      • themes/(或layouts/)下的模板

        • 三种模板:single, list, partials
        • /themes/your-theme-name/ 下的主题模板,然后在/layouts/ 下为index.html/layouts/_default/list.html/layouts/_default/single.html
      • HTML 文件将被写入public/ 目录。

      您可能想阅读hugo theme documentation

      【讨论】:

        【解决方案5】:

        请验证您的 config.toml 文件是否指向正确的主题。

        如果按照快速入门教程,您可能已经忘记运行

        echo 'theme = "ananke"' >> config.toml
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2018-03-02
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多