How to host a static website on an Amazon S3 bucket

Amazon S3 is an inexpensive and powerful way to host a static website — no web server required! S3 provides high availability so you don’t have to worry about automatic scaling or unexpected spikes in user demand. It also provides virtually unlimited storage.

Start off by cloning this github repository to a folder on your laptop. It’s a bare-bones webpage example. Then update index.html and other files as you like. https://github.com/austinlasseter/simple-website

Once you’re happy with the way your simple website looks, upload all the contents of your folder to an S3 bucket. Start by clicking “create bucket” in the S3 console.

Give it a name, and then unselect “block all public access”. In another tutorial, I’ll show you how to prevent public access while still making your content available with a username/password login. But for right now, let’s make our bucket open to the whole world, just to keep things simple. Select “create bucket”.

We now see that objects “can be public.”

In order to actually make the objects fully open to the public, we also need to add a bucket policy. Click on the bucket, and then click on ‘Permissions’ and then ‘Bucket Policy’ and insert the following json code. Then click ‘save’.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid":"PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": ["s3:GetObject"],
            "Resource": ["arn:aws:s3:::<YOURBUCKETNAMEHERE>/*"]
        }
    ]
}

Now I’ll upload all the files from my folder, using the ‘upload’ button in the top left of the Overview tab.

On each of the screens, just click “next” and then “Upload”. When you’re finished, you should see all of your files in your bucket, like this:

Now the final step is just to enable static website hosting properties on this bucket. Go to “Properties” and then “Static website hosting.”

Select “Use this bucket to host a website” and also supply the names of the two html files, index.html and error.html. Make a copy of the website endpoint, and then click “Save”.

The endpoint is ugly but it works. You use Amazon Route 53 to give your website a more attractive or user-friendly DNS name, but that’s not essential. Here’s my endpoint: http://simple-static-website.s3-website-us-east-1.amazonaws.com/

That’s basically it; you’re done. You can paste the website endpoint into your browser and you should see your website. It costs virtually nothing, is highly scalable and available no matter the spikes in user demand, and it was easy to set it up. Congratulations!