S3 static pages without .html extension

Question 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.

Question 2

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

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.
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.

Question 3

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

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

Question 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.

Question 5

I was able to get a Cloudfront function to work. Its much cheaper then the lambda solution provided and you don't need to serve html files with no extension. This is a very slight change to a chunk of code to get subdirectories working in CF.

'use-strict';
function handler(event) {
    var request = event.request;
    var uri = request.uri;
    if (uri.endsWith('/')) {
        request.uri += 'index.html';
    }
    else if (!uri.includes('.')) {
        request.uri += '.html';
    }
    return request;
}

Caveat, I don't have a remove trailing slash solution figured out just yet but this chunk of code will fix your problem.

Question 6

With the AWS CLI:

Assuming that you have removed the extension from the filename and set up AWS CLI with your account, you can set the meta data of the file by running this command in your console:

aws s3 cp /path/to/file s3://yourwebsite.com --content-type 'text/html' --acl public-read

Question 7

In a multipage web app (say 12 pages), the accepted answer will be inefficient since manually editing the file extension and format is required on every upload.

An automated and worry-less strategy is to use AWS Lamda@Edge. It solves this completely.

First, create an AWS Lambda function and then attach your CloudFront as a trigger.

In the code section of this AWS Lamda page, add the snippet in the repository below.

https://github.com/CloudUnder/lambda-edge-nice-urls/blob/master/lambdaRewrite.js

Content delivery will still be as fast as you can blink your eyes.

PS: Note the options in the readme section of the repo above

Question 8

The reason it works without the trailing slash on the root domain is because you have this structure for your main index:

mysite.com/index.html

Then the server goes and servers the index default page, showing:

mysite.com/

If you don't want the traling slash for all your pages you should do the same for all your html files. Instead of

mysite.com/mypage.html

Do

mysite.com/mypage/index.html

Then the server will show the default index file for the mypage folder, showing in the url

mysite.com/mypage/

Question 9

Very Simple and Tested Solution. :

Rename file, Remove Extension (.html) from file name. (ex. change gallery.html to gallery).
Edit Properties of File. Add Metadata key (Content type = text/html and content language = html).
Save and test from browser url like websiteurl.com/gallery.

Question 10

Another possible solution is to use Lambda@edge power, documentation reference here.

Question 11

If you want to upload json file. Save the json file without extension in your local machine.

From AWS CLI use below command :

  aws s3 mb s3://<s3bucketname>

  #output 
  make_bucket: s3bucketname

  aws s3 cp path\to\local\file s3://<s3bucketname>  --content-type 'application/json' --acl public-read

  #output
  upload: .\<filename> to s3://<s3bucketname>/<filename>

now you can access the file using url:

https://<s3bucketname>.s3.amazonaws.com/<filename>

Question 12

I added some automated script example to remove *.HTML extension and uploaded to s3 by added content-type of meta-object. I use javascript to create sh file, I run sh file.

const recursive = require("recursive-readdir");
const fs = require("fs");

(async (params) => {
 let buffer = "aws s3 cp ./out s3://www.Example.com \n";
  await recursive("out", [
    "css",
    "_next",
    "images",
    "static",
    "svg",
    "*.ico",
    "*.txt",
    "*.xml",
    "index.html",
    "404.html",
  ]).then(
    (files) => {
     
    
      for (const file of files) {
        const path = file.substring(file.indexOf("\\") + 1);

        buffer += `aws s3 cp --content-type 'text/html' --metadata-directive REPLACE ./out/${path}  s3://www.example.com/${path} \n`;

        const removeExtension = file.replace(/\.[^/.]+$/, "");

        fs.rename(file, removeExtension, function (err) {
          if (err) console.log("ERROR: " + err);
        });
      }
   
    },
    (error) => {
      console.error("something exploded", error);
    }
  );

  


  fs.writeFileSync("deploy.sh", "echo 'copy your files' \n");
  fs.appendFileSync("deploy.sh", buffer);

  fs.appendFileSync("deploy.sh", 'echo "Invalidation cloudfront"');
  fs.appendFileSync("deploy.sh", 'aws cloudfront create-invalidation --distribution-id XXXXXXX --paths "/*" ');





})();

Question 13

Set the meta data of the file (Content-type to text/html) using the AWS interface AND rename the file, removing the .html from the end.

Note that if you go to the "Properties" tab and enable "static website hosting", the Content-Type should be set to html on any HTML files by default.

If you want to automate the renaming, here's a bash script that will help with it. You can run this right in the AWS dashboard using the AWS CloudShell terminal.

#!/bin/bash

bucket_name="<your-bucket-name>"

# list all objects in the bucket
aws s3api list-objects --bucket "$bucket_name" --query 'Contents[].{Key: Key}' --output text |
while read -r key; do
  # check if the key ends with ".html"
  if [[ "$key" == *.html ]]; then
    # remove the ".html" extension from the key
    new_key="${key%.html}"
    
    # copy the object to the new key without the ".html" extension
    aws s3 mv "s3://${bucket_name}/${key}" "s3://${bucket_name}/${new_key}"
  fi
done

Then serve the website from a CloudFront distribution.