Save Money With AWS S3 Static Web Hosting

Keith Miller
Jun 19 · 3 min read
Photo by lucas Favre on Unsplash

As I have spent time learning and implementing AWS services over the last few years, I am always pleasantly surprised at the many faces a single service has to offer. Some of the projects I have used S3 for have been converting a Virtual Box image to an AMI, translating voice to text and using S3 as backup service for on premise machines. In this write-up I would like to focus on the steps required to serve a static web site with Amazon S3. The really nice thing about this approach is the amount of money you can save by hosting your website with S3. As an artist, this becomes a very enticing solution as it frees up funds for other projects. Let’s get into how to do this.


  1. Set Up Your S3 Bucket

Once you have created your AWS account and have logged in, navigate to the AWS console and in services select S3. For hosting a web page you will want it to match the domain you want to give the website. In my example the domain is www.mytestbucketkeith1.com. By default, your bucket will be set to private, you will want to make it publicly accessible by navigating to the permissions of your bucket and selecting the public option but we will do that through a bucket policy later.

If you are thinking that all you have to do is drop in a couple of html files and serve up your site, then you will be mistaken. It is almost that easy but there are a few options that you may have missed that we will look at that in the next step.


2. Setting Up Bucket Properties

In my first attempt to set this up, I completely missed the need for a policy and also couldn’t find the option to use your bucket as website. I’ve included a few screenshots to help navigate these steps.

  • Navigate to S3 dashboard select your bucket and then its’ properties and select “Static website hosting.”

Please take note of the endpoint addressat the top of the box because that will be your FQDN to access your website.

When you select the first option you will be given an option to select default file and default error file.

3. Don’t Forget The Policy

Another step you will need to host your S3 website is setting a policy for your bucket. Here is the policy:

{
“Version”: “2008–10–17”,
“Id”: “PolicyForPublicWebsiteContent”,
“Statement”: [
{
“Sid”: “PublicReadGetObject”,
“Effect”: “Allow”,
“Principal”: {
“AWS”: “*”
},
“Action”: “s3:GetObject”,
“Resource”: “arn:aws:s3:::<your-bucket-name>/*”
}
]
}

After adding this policy you can then add a CNAME record in your DNS management pointing to the endpoint that AWS provides. In our case it was http://www.mytestbucket1keith.com.s3.-website-us-east-1.amazonaws.com. Doing so will point your domain mytestbucket1keith.com to the AWS provided endpoint.

The next step would be to upload your static content to your bucket.


These are the basket steps needed to set up a website. In subsequent articles I will do a deeper dive into routing and making your website available across multiple AWS regions using AWS Cloud Front. I’d like to thank Kyle Galbraith on his tutorial and breakdown of this service.