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.

Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post

We now see that objects “can be public.”

Image for post
Image for post

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>/*"]
}
]
}
Image for post
Image for post

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

Image for post
Image for post

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:

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store