Amazon S3 static website doesn't serve css or js files

Question

I've been trying to set up a static website on Amazon S3. I've got things set up to use my personal domain, and so far I've been able to access the content just fine. All the links work, both for pages in the "root" directory and pages in subfolders, so it seems that S3 can follow the paths I'm using.

The problem is that none of the CSS stylings is being applied to the pages (it works fine on the development server on my local machine). I've tried using relative and absolute paths, but this doesn't seem to be the problem. I can see the content just as it should be, and I can navigate the site normally, but there's just no styling.

I've tried messing with permissions on the folders, but I'm clearly not getting something right. Am I missing something obvious? Surely S3 can use individual stylesheets?

Thanks in advance for any thoughts.

Solution 1

The reason is, amazon S3 sets the content-type of css files to binary/octet-stream, follow this tutorial to solve this issue.

Solution 2

You need to select your css file and then from the Properties tab click on Metadata. This is to assign optional metadata to the object as a name-value pair. The Content-Type key must have the Value text/css

Comments

[unnamedcrewman]

Wow, spot on. That was my problem, and the tutorial worked like a charm (I happen to own Transmit, so I'm all set). Thanks a lot.

[user1158559]

The link is dead, but essentially s3cmd put -m "text/css" $YOUR_PATH s3://$BUCKET/$YOUR PATH

[naaman]

The following Gist helps out for a number of MIME types: github.com/swoodford/aws/blob/master/… (Linux/Mac)

[Flávio Costa]

guys, im getting the same problem. my JS works fine, but my CSS not ):

[Rajat jain]

@user1158559 s3cmd put -m "text/css" ```$YOUR_PATH``` s3://$BUCKET/$YOUR PATH which path is this? $YOUR_PATH

[user1158559]

You have to re-upload your CSS. $YOUR_PATH is the CSS file on your local machine.