My website is based on Hugo Academic theme.
I added a background image to my website by following the instructions here and it worked perfectly in localhost. However when I generated the public folder after running hugo and uploading them to Netlify, in my hosted website I can’t see the background image in my home section. However I am able to see background images in other sections where I added them. I have appended the following to my custom.css file -
Since you’re deploying your site to netlify, your theme needs to be added as a git submodule. Else, netlify doesn’t “know” about your theme, since it isn’t cloned along with your site repo.
So, remove the contents of your theme folder, then from the root of your site do:
@zwbetz I am not sure if I understand that. The thing is in the documentation it says that once you are happy with how your site looks (localhost) and you want to deploy it you have two options i.e using continuous integration with Git or run hugo -> get a public folder and upload the contents of the public folder to Netlify. I did the second one because of certain things beyond the scope of discussion here. In that case do you want me to add the contents of theme inside public folder and then upload the new public folder to Netlify? I fail to see how this will work, maybe I am missing something?
I see. I didn’t realize one could manually upload files to netlify. The way I’m familiar with: one connects their repo to netlify then it’s cloned and built. So since you’re doing the manual copy method, disregard.
I actually just use the GUI. From my dashboard I goto Deploys and at the bottom you can see a place to upload your public folder and a list of previous deployments as follows -
Now i haven’t tried uploading the whole folder. Presently I just upload public. I am not sure of uploading the whole thing would make any difference. Docs about deployment.
Your current process should work fine as-is. I’m not sure what Hugo version Netlify uses by default (I think an old one, like version 0.17), so try explicitly setting it:
Hmm, on 2nd thought, that makes sense. Sorry, it’s late for me. (Specifying Hugo version would only be for continuous deployment, but that’s irrelevant since you’re just uploading the generated files).
So I tried cloning and building your site, but I get these errors:
Building sites … WARNING: make non-relative ref/relref page reference(s) in page "/post/managing-content.md" absolute, e.g. {{< ref "/blog/my-post.md" >}}
WARNING: make non-relative ref/relref page reference(s) in page "/post/getting-started.md" absolute, e.g. {{< ref "/blog/my-post.md" >}}
WARNING: make non-relative ref/relref page reference(s) in page "/post/writing-markdown-latex.md" absolute, e.g. {{< ref "/blog/my-post.md" >}}
WARNING: make non-relative ref/relref page reference(s) in page "/post/migrate-from-jekyll.md" absolute, e.g. {{< ref "/blog/my-post.md" >}}
ERROR 2019/01/07 22:49:12 Please complete the installation of Academic by following the steps at https://sourcethemes.com/academic/docs/install/
ERROR 2019/01/07 22:49:12 render of "page" failed: "/Users/zwbetz/Development/Sites/FlipWebsite2017/layouts/teaching/class.html:5:5": execute of template failed: template: teaching/class.html:5:5: executing "teaching/class.html" at <partial "header_imag...>: error calling partial: Partial "header_image.html" not found
ERROR 2019/01/07 22:49:12 render of "page" failed: "/Users/zwbetz/Development/Sites/FlipWebsite2017/layouts/teaching/class.html:5:5": execute of template failed: template: teaching/class.html:5:5: executing "teaching/class.html" at <partial "header_imag...>: error calling partial: Partial "header_image.html" not found
ERROR 2019/01/07 22:49:12 render of "section" failed: "/Users/zwbetz/Development/Sites/FlipWebsite2017/layouts/section/teaching.html:4:3": execute of template failed: template: section/teaching.html:4:3: executing "section/teaching.html" at <partial "header_imag...>: error calling partial: Partial "header_image.html" not found
ERROR 2019/01/07 22:49:12 render of "section" failed: "/Users/zwbetz/Development/Sites/FlipWebsite2017/layouts/section/publication.html:4:3": execute of template failed: template: section/publication.html:4:3: executing "section/publication.html" at <partial "header_imag...>: error calling partial: Partial "header_image.html" not found
Total in 63 ms
Error: Error building site: failed to render pages: render of "page" failed: "/Users/zwbetz/Development/Sites/FlipWebsite2017/layouts/teaching/class.html:5:5": execute of template failed: template: teaching/class.html:5:5: executing "teaching/class.html" at <partial "header_imag...>: error calling partial: Partial "header_image.html" not found
Oh wait, that github link I sent you, that is someone else. I was just following the steps that the professor performed to be able to add a watermark or background image. Since then he has changed his website repo https://github.com/fliptanedo/academic-flip but the steps for watermark remain same. His website looks amazing btw. I wanted to achieve the same background thing. I don’t have my website on Github as of now. Maybe I can do it tonight. But in my localhost you can see this -
Okay. I will put my code on Github tonight. Maybe we can continue this tomorrow. Meanwhile I will try to see if i am making any mistakes too. Thanks a ton for the effort.
@zwbetz I configured Netlify to publish my website from my git repo. Still the same issue. No watermark in aboutme section, however the other two watermarks show. You can use this repo for my website and hugo-academic or my fork of hugo-academic https://github.com/armsp/hugo-academic for the internal theme.
The contents of my netlify.toml are -
Thankyou so so much !!