Search code examples
markdownhugo

Images acting strange in Hugo

I am currently using Hugo to build a static website. I have the following folder structure:

content
└── en
    └── docs
        ├── software-practices
        │   ├── _index.md
        │   └── Git
        │       ├── _index.md
        │       └── branching
        │           ├── _index.md
        │           └── images
        │               └── git-branching.png
        └── ...

Within content/en/docs/software-practices/Git/branching/_index.md I have the following line:

![Branching Diagram](images/git-branching.png)

I expect this to render and display the specified image on the page. However, when I start the server for the first time with hugo server, the image doesn't render and the alternative text is displayed instead. Strangely enough, if I rename the _index.md file to something else, e.g., myfile.md, the image suddenly renders. It even renders when I change it back to _index.md. However if I restart the server, the error occurs again.

Any ideas on why this might be?

Solution

  • A page that is named index.md is a 'leaf bundle'. A page that is named _index.md is the list page of a (sub)section, which is also called a 'branch bundle'. The issues you are experiencing is intended behavior.

    Source: https://gohugo.io/content-management/page-bundles/