Image is not displayed after site deployment while shown locally

support
1

Here is my site, and there is an image. I use it here. When I run hugo server everything looks fine:

image
image1219×824 191 KB

But after deployment I get just git man text instead of the actual image. I don’t get where things go wrong to fix it.

2

What is the deployment URL?

3

Do u mean baseURL?

baseURL: http://command-line-interface-pages.org/
4

No, I want to look at your deployed site.

5

Then here it is.

6

You are deploying your site to a subdirectory.

Visit:

https://command-line-interface-pages.github.io/site.github.io/about/

Now open your browser’s dev tools and look at the console:

image
image756×85 11 KB

The image destination in markdown is /git.jpg which is relative to the root of the server.

7

You are deploying your site to a subdirectory.

So… Is it the right way to do things or not? I mean what should I change then? I wanna just refer to images as I do now (and change something else).

8

Use page bundles.

hugo new about/index.md

content/
├── about/
│   ├── git.jpg
│   └── index.md
├── posts/
│   └── my-first-post.md
├── future.md
└── goals.md

Then use a page-relative destination in markdown:

{{< image src="git.jpg" alt="git man" position="center" style="border-radius: 4px;" >}}
9

You’ll need to contact the theme author to fix the other stuff that’s broken.

And change the baseURL in your site configuration to:

https://command-line-interface-pages.github.io/site.github.io/
10

I am not surprised that I break things at the first hours of usage, it’s a usual situation. :laughing: