为什么 Hugo 提供空白页面?

Why is Hugo serving blank pages?

我正在使用 Hugo 静态页面生成器构建个人网站,但是当我这样做时 hugo serve,我不再看到页面,而是 localhost:1313.[=12 处的空白页面=]

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

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

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

问题可能出在 theme - 它丢失或损坏。如果您未能提供有效的主题,Hugo 将不会附带任何 default/fallback 主题。

调试指南:

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

请确认您的 config.toml 文件指向正确的主题。

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

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

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

  1. Install hugo i picked 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 theme 使用 hugo 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>

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

  • Hugo 配置文件(TOML、YAML 或 JSON)位于您站点的根目录中
  • Hugo 默认值:Markdown inside content/
    • 内容文件包含元数据 (frontmatter) 和文本 (/markdown) --> html 到 public/,
    • 示例 frontmatter 属性: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

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

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

Hugo 项目目录中的 config.toml 可能存在问题。

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

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

theme = "${theme_name}"

如果您使用default/custom主题,主题名称将与项目目录中themes文件夹下的文件夹名称相同。