Login/Register
Why is Hugo serving blank pages?
Asked Answered
Solved hugo
C

5

31

I am building a personal website using Hugo Static Page Generator, but when I do hugo serve, I am no longer seeing a page, but simply a blank page at localhost:1313.

I deleted everything and did a fresh install. But still, Hugo is serving blank pages.

In the blank page, I see the Favicon of the previous site draft I had, even though I deleted everything from the previous theme. I cleared the browser in Chrome and tried a different browser too, but it's still not working.

Not sure what information I can provide, as there are no error messages. How can I fix this?

Corneille answered 22/4, 2017 at 5:42 Comment(2)
Have you set the theme in your config.toml file? Is the theme name in your config.toml the same has the folder name you have in the themes/ folder? It might help if you post the contents of your config.toml file here. – Zellner
I had the same problem and it was all about the template – Cleat
C
29

The problem is likely to be the theme - it is either missing or broken. Hugo does not come with any default/fallback theme if you fail to provide a working one.

Debugging guide:

  1. Check the themes folder, and follow the quickstart.
  2. Try using another, simpler theme.
  3. It may only be a question of configuring the theme, you may read the hugo theme documentation too.
Cleat answered 29/4, 2017 at 9:20 Comment(1)
Yes, this sounds like the cause. @maximumdooku What theme are you using? It probably needs fixing on GitHub, so if you let us know then someone can fix it for you. – Zellner
N
10

Please verify your config.toml file points to right theme.

If following Quick start tutorial, you might have forgot to run

echo 'theme = "ananke"' >> config.toml
Nydianye answered 9/5, 2018 at 17:12 Comment(0)
F
7

I ran into the same issue after following the hugo getting-started / quickstart guide but instead of using an existing theme i created a very basic theme:

  1. Install hugo i picked install hugo on windows
  2. Create a New Site hugo new site quickstart
  3. Add a Theme
    • cloning a theme (for example the ananke-theme ) is easier <-- this is what the quickstart does and what i left out
    • instead you can create a theme with hugo new theme [your-theme-name] which adds a theme skeleton inside your site-folder for example C:\Hugo\Sites\example.com (see the screenshot)
  4. Add Some Content hugo new posts/my-first-post.md
  5. Start the server hugo server -D --watch --verbose

Hugo_myFirstTheme_files_folders

After you created a theme files and folders should be under Sites/example.com/themes/your-theme-name/. Since most of the generated files are (nearly) empty you have to edit a few of them before the quickstart sample is working.

Based on develop a Theme for Hugo i edited /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>

Basic information about hugo taken from develop a Theme for Hugo

  • Hugo configuration files (TOML, YAML or JSON) are located in the root of your site
  • Hugo default: Markdown inside content/,
    • content files contain metadata (frontmatter) and text (/markdown) --> html to public/,
    • example frontmatter attributes: date, title, description, categories, tags

  • templates under themes/ (or layouts/)

    • three types of templates: single, list, partials
    • theme templates under /themes/your-theme-name/ and then under /layouts/ for index.html and under /layouts/_default/list.html and /layouts/_default/single.html

  • HTML files will be written to the public/ directory.

You may want to read the hugo theme documentation.

Frolicsome answered 19/8, 2018 at 22:51 Comment(1)
This helped me as I didn't want to use a pre-defined template. One thing to note, though, is that for the new theme to work (and subsequently have the site build) I needed to add theme = <themeName> to the root hugo.toml config file. – Renascent
T
5

I had the same problem when I cloned my blog from Github but didn't include themes submodules. Including submodules solved my problem:

git clone --recurse-submodules https://github.com/username/your-blog
Tiro answered 26/12, 2020 at 10:56 Comment(1)
if you already cloned your repo but not the submodules, use the command git submodule update --init – Supersensual
I
0

It could be potentially an issue with the config.toml in the Hugo project directory.

I recently ran into a similar issue where I was seeing only a blank page while trying to create a custom theme with the Hugo and all you have to do is tell Hugo where to find your initial HTML page to render on the browser.

If you are trying to install a theme OR creating a custom theme, go to config.toml in the base directory and specify the theme name as given below:

theme = "${theme_name}"

If you are using the default/custom theme, the theme name will be same as the folder name under themes folder in the project directory.

Ingalls answered 29/12, 2020 at 14:13 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.