S3 static pages without .html extension

In serving a static site off of Amazon S3, I'm wondering how to get rid of the .html file extensions for each page.

Right now I have:

mysite.com/             # works fine, serves index.html
mysite.com/mypage.html  # works fine
mysite.com/mypage       # doesn't work

The error for /mypage shows:

404 Not Found

Code: NoSuchKey
Message: The specified key does not exist.
Key: mypage
RequestId: 1089D7A26EFED9AD
HostId: Ud8cFy8Zl1mJ+oFjFOmU1Xacq9+v70KuaJfOc4nFMEPhd66AkLhr4Pj5u0QH6Gog

I have tried setting the Content-Type to text/html, as per this post, but it doesn't fix the problem for me.

How do I get /mypage to serve the file at /mypage.html on S3?

Solution 1:

I just had this problem and I'd like to share the solution:

You have to set the meta data of the file Content-type to text/html AND rename the file removing the .html of the end.

That way you will be able to reach every page without the file extension.

Solution 2:

In general on Amazon S3, to create clean URLs you can:

1. Upload the page file with a "clean" name, e.g. mypage and set the Content-Type set to text/html (as the post you linked to described). You must rename the file on your system before you upload it to have no extension, or rename it without the extension on S3 after uploading. The file's name on S3 must not have an extension.

2. Create a folder with the "clean" name and upload the page file to that folder with its name set to the default index document, e.g. index.html. You need to check what the default index document name is. This is set when you configure your bucket as a website, but can be changed later.

If you can't make the above work you can upload a new zero-byte object with the name key mypage and then set a page redirect by specifying the Website Redirect Location key with a value mypage.html in the metadata during the upload process. See Configuring a Web Page Redirect in the Amazon S3 documentation.

You could also copy the file to a new object named mypage with Content-Type set to text/html.

Solution 3:

As some have said already, delete the file extension, but then simply follow the following steps:

1. Go to your Amazon S3 bucket.
2. Select the checkbox next to the file you'd like to have linking properly.
3. Click "Properties" on the right, and a new pane will show up. It'll say "Object: filename"
4. Click the Metadata tab, change from default, which for me was "binary/octet-stream"; new value should be "text/html".
5. Save.

And as people have said, make sure your new links in your html don't contain the .html file extension anymore. This worked for me.

Solution 4:

Creating a folder at /mypage and putting index.html inside of it wasn't working for me. It turns out that this was because the Bucket's "Index Document" setting had been changed to myindex.html:

Bucket Properties --> Static Website Hosting --> Enable Website Hosting --> Index Document

This was actually being applied to all subfolders too, so that it wasn't looking for /mypage/index.html when on the /mypage route; it was looking for /mypage/myindex.html instead.

I simply changed the myindex.html setting back to index.html, and the standard folder structure works. It would have worked equally as well to use myindex.html files everywhere with that setting in place, but that seemed confusing for no real gain.

I still don't know why setting the Content-Type to text/html doesn't work -- seems like it should as that is mentioned in several places.

Anyway, the problem is solved by changing the Bucket's Index Document and all subfolders to use index.html.