S3 Static Website Only Displays Index.html (but not other dependent files)

Question

I've been messing around with AWS lately and it definitely great. As a first test I'm trying to host the most basic static website via S3. The site is simply just one html file and a few javascript, css and image files.

Whenever I load the static URL the only thing that loads is the index.html file, its contents and for some strange reason the only image that loads is my avatar, yet all the images are stored in the same folder. All of the css, js and image files are also written as relative links too of course.

I've made sure all the files and folders permissions are set to "world" multiple times.

I also looked at the network tab in dev tools and its giving me 200's on every GET request.

I'm completely stumped as to why this is happening. Does anyone have an idea of what I'm missing?

The url is available at http://www.mikefisher.io.s3-website-us-east-1.amazonaws.com/

I should add that the site works perfectly locally as well as on a traditional web server.

Thanks

EDIT: I checked my browser console and it gives me this error which I think might have something to do with it.

'Resource interpreted as Stylesheet but transferred with MIME type binary/octet-stream:'

Answer 1

Fixed it!

The issue I was having is the metadata for the CSS files in Amazon S3 were set to 'binary/octet-stream' by default.

The way I fixed this was selecting the individual files in the bucket, clicking the properties tab, then in the meta-data section typing in 'text/css' as the value.