The avatar does not work online

[MaJialu2]

What happened?

Hugo version

ex.0.132.1

Theme version

I'm not clear about the Theme version,I through this command used it "git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack"

What browsers are you seeing the problem on?

Chrome, Microsoft Edge

More information about the browser

I'm not clear, but this problem happened also even on my mobile phone's browser, so I think it's not the issue of browsers

Relevant log output

I think the problem may is related to github action's automatic deployment,but I don't know what is it really.

Link to Minimal Reproducible Example

https://github.com/MaJialu2/MaJialu2.github.io

[MaJialu2]

The avatar can work on my localhost when I run "hugo server".However, after I deployed it on github page, my own avatar didn't display. It displayed the default avatar.

[ElastiCourse]

You have two issues:

1. The image is not found in the asset/img/my.png in your repo. Create folder img first then upload the avatar image there.

2. The syntax of hugo.toml is wrong. I converted the block for avatar from hugo.yaml to TOML and it should be as follows:

   baseURL = 'https://majilau2.github.io'
   languageCode = 'en-us'
   title = '马嘉路个人博客'
   theme = 'hugo-theme-stack'
   [params.sidebar]
   compact = false
   
   [params.sidebar.avatar]
   enabled = true
   local = true
   src = "img/my.png"

   Working example: https://elasticourse.github.io/MaJialu2.github.io/ Good luck.

[MaJialu2]

You have two issues:

1. The image is not found in the asset/img/my.png in your repo. Create folder img first then upload the avatar image there.
2. The syntax of hugo.toml is wrong. I converted the block for avatar from hugo.yaml to TOML and it should be as follows:

baseURL = 'https://majilau2.github.io'
languageCode = 'en-us'
title = '马嘉路个人博客'
theme = 'hugo-theme-stack'
[params.sidebar]
compact = false

  [params.sidebar.avatar]
  enabled = true
  local = true
  src = "img/my.png"

Working example: https://elasticourse.github.io/MaJialu2.github.io/ Good luck.

Thank you very much!

[MaJialu2]

@ElastiCourse Thanks to your help, I have made it successfully! But I am still confused about that there are tow assets folders, the one is in the root directory of the project, the other is in the folder 'hugo-theme-stack', just like the picture I have posted. In the past, I put the my.png in the latter . Why it didn't work? Similarly, there are also two config file, the one is hugo.toml in the root directory, the other is config.yaml in the folder 'hugo-theme-stack', which one works actually? Thank you again.

[ElastiCourse]

@MaJialu2 I agree with you on the confusion with having two folders. If you look at the themes folder from your repo, you will find that the stack theme is a shortcut to Jimmy's repo (this repo), so you will not be able to push your changes to it:

This is one of the issues when using submodules for themes. According to the theme author Jimmy, to make any changes you have to copy the file into your own repo, then make the modifications to it. This becomes a nightmare if you need to modify a file deep down the tree, for example: layouts/partials/article/components/details.html

Now to answer your questions:

1. Why did it work locally? because git will cache the repo locally, so when placing my.png in the themes asset folder it will be there locally, but when you do git push, the shortcut and permissions will prevent that.
2. Why are there two config files? config.yaml is useless. You can delete it. It works as a template for config file in cause you made mistakes or deleted portions of it. You only need need hugo.yaml or hugo.toml. I would advise to copy all content of the hugo.yaml, convert it to TOML then place it in your repo and customize it from there. You removed 90% of the file so your blog shows no sidebars, no search widget.. etc.

What I did to overcome this submodule issue with any theme, not just this one, based on an advice from the Hugo developers, is to copy the theme folders and files into my own repo, and remove all the confusion

If you’re not going to use the theme elsewhere, take an even easier route and eliminate the themes directory — use the project level directories (archetypes, assets, data, i18n, layouts, static) instead. For a lot of projects I find this easier, less cluttered.

It takes about 30 minutes to do this process, then I end up with a clean layout without any modules or submodules

The only con of this method is, you can't update the theme automatically, but I have notifications enabled for theme updates, in case something new got released, I can implement it manually, and discard the update if I don't like it or it's irrelevant to me.

In the future if you want to change the theme, you just need to create a new clean folder with the project level directories (archetypes, assets, data, i18n, layouts, static), and copy content folder that has all your posts/images to it. 99% of the work is done beside customization/favicon/hugo.toml ..etc

[CaiJimmy]

Thanks @ElastiCourse for the answer! I'm going to close this issue since it has already been resolved.