How to mask all URLs for static site hosted on S3?

Question

I have a static site, consisting of 3 pages (home, about and contact). This was a wordpress site exported as html and uploaded to s3. When i access the site home page url shows domain name correctly but after clicking on about link, it shows s3 path in the address bar instead of domain name. eg. expected output : example.com/about current output : s3-region.amazon.com/example.com/about/index.html

I am using Route53 and Cloudfront along with S3.

Answer 1

the paths were absolute paths for the s3 objects. Modified the href tag to relative paths(relative to index.html) and it worked.

Note: The cloudfront caches the content so you may not see the changes even after clearing the browser cache. Hence, to see the changes, use s3 url for index.html and then click on the links (about, contact us, etc)