How to deploy static HTML webpage on AWS Amplify?

I was wondering how I can deploy static HTML website on AWS Amplify. I was able to deploy it but for some reason it is not loading assets, specially images from ./img OR ./images folder. It shows as broken images instead.

I understand that I could host this with S3 and CDN but for this use case I want to use Amplify so that I can automate the deployment with Git.

Any kind of information/help would be great!

Solution

I came across this same issue. The issue is that your assets (in your example ./images, but I just have an assets folder, that could have images/css or whatever) might not be reachable from the directory in your AWS Amplify Build settings - at least that was my issue.

Say you have the following Build Settings:

version: 1
frontend:
  phases:
    # IMPORTANT - Please verify your build commands
    build:
      commands: []
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: blog
    files:
      - '**/*'
  cache:
    paths: []

I placed my assets folder in the base directory, which allowed the index.html to read the location of the assets. For example in your index.html code:

<!DOCTYPE html>
<html lang="en">
<head>
   ... relevant meta tags etc here
   <link rel="stylesheet" href="./assets/styles.css">
</head>
<body>
</body>
</html>