Image is not displayed after site deployment while shown locally

[EmilyGraceSeville7cf]

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

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.

[jmooring]

@EmilyGraceSeville7cf

But after deployment

What is the deployment URL?

[EmilyGraceSeville7cf]

Do u mean baseURL?

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

[jmooring]

No, I want to look at your deployed site.

[EmilyGraceSeville7cf]

Then here it is.

[jmooring]

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:

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

[EmilyGraceSeville7cf]

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).

[jmooring]

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;" >}}

[jmooring]

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/

[EmilyGraceSeville7cf]

@jmooring

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

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