This works well locally.
But when I deploy to AWS Amplify using
git add .
git commit -m “version notes”
git push
This deploys in AWS Amplify okay, but the background images are not showing.
On inspection I see that the linked index.min.css file has
.hero {
background-image:url(http://localhost:1313/image/gray.png)
Instead of my BaseURL in the config file.
My build command is simple with
build:
commands: [hugo]
baseDirectory: /public
Do you have any ideas as to how to fix his please.
Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.
If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.
Hi jmooring,
Thank you for your prompt reply.
Of course, I guess I was hoping to hear from someone that had seen and fixed a similar issue.
The repo address for the test site is :
The issue now appears to be that I am not understanding the github to amplify part of the workflow. T
his completes successfully but changes are not always reflected.
The background color / image changed eventually after many git commits and git push commands.
But I do not understand what the issue was.
But I think git is my problem because the aws amplify site is not reflecting my local server site when I do git push.
Therefore I am not sure if the Hugo community can help.
@clondon I have never used Amplify, but it appears that your Amplify configuration does not build using the extended version of Hugo. The extended version is required for (a) converting images to the WebP format and (b) transpiling Sass to CSS.
You were right that there are some version shenanigans involved in using AWS Amplify and Hugo.
I had issues with some of the builds such as my original CSS issue whereby background was not changing, and other issues where the blog page would not list blog posts.
the Go modules worked so I thought I was free of version gremlins.
It was correct that the version installed by default in AWS Amplify was not the extended version.
Using an amplify.yml config I was finally able to get a build that works well so far thanks to your suggestions.
My working amplify config file is here in case anyone suffers the same problem. The logic here is to install the hugo extended version via VERSION_AMPLIFY: 7.6.26 before the build.
(This goes in your project root and should be committed).
version: 1
env:
variables:
VERSION_AMPLIFY: 7.6.26
frontend:
phases:
preBuild:
commands:
- yum install golang -y
- go version
- hugo version
build:
commands:
- hugo
artifacts:
baseDirectory: public
files:
- ‘**/*’