Using href

Hi, Community I hope you can help.

I am not sure whats changed as this site used to work okay.

I use some background images on the Hugo site using

background-image: url({{  resources.Get "image/my_background_image.png" }});

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.

Many thanks.
Charles.

}

You are more likely to receive a prompt and accurate response if you post a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

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.

1 Like

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 :

Main site: thehornswatford.co.uk.

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.

Many thanks.

1 Like

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

See https://github.com/aws-amplify/amplify-hosting/issues/884

2 Likes

Hi and Thanks again.
I thought I had solved the problem about using the extended version because modules work well.

I try a fix based on adding the extended version to the build instructions.

I’ll let you know how that goes also.

Charles

Hi Mr J mooring,

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:
- ‘**/*’

Many thanks.

This item can be closed.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.