AWS Static Site Hosting

I came across this image on Twitter and it made me laugh. This is a problem that we have all run into at some point in our web development careers. How do I host a static website?

In this brief write-up, I'll explain how to easily host your Static website on AWS with the least amount of fuss. (Note that hosting your Static website is supposed to be pretty straightforward, with AWS it is ${to be determined})

The first step, as you would expect is to set up your AWS account, no worries it's free to set up.

Once your account is set up, you need to place your files in an S3 bucket, do one or two configurations, and boom your site is hosted. Easy right?

After setting up your account, the next step is to search for the S3 service in the search bar.

Click create a new bucket in the S3 bucket menu, fill in the required sections and your S3 bucket is ready. As of right now you can mostly follow the default settings in the bucket create menu. There are a couple of things to note though as you create the bucket.

First of all, your bucket name has to be unique. A common way of ensuring your bucket name is unique is by appending your AWS account ID to the chosen bucket name.

Secondly, you have to uncheck the block public access checkbox on your bucket, this ensures your bucket is publicly accessible (I believe You don't want a website that only you can see). This box is checked by default because having a publicly accessible bucket can lead to crazy security breaches (make the hackers work for it).

Now you can click create bucket, wow your bucket is almost ready to be your host. Few more configurations and you'll be there.

Congratulations, your bucket has been successfully created, now you need to ensure your bucket is really publicly accessible. Click the permissions bar and scroll to the bucket policy section.

Insert the following code block in the policy section and click save. This policy ensures that external clients can carry out get operations on your bucket, hence they can "get" your website.

"Version":"2012-10-17",
"Statement":[
 {
   "Sid":"AddPerm",
   "Effect":"Allow",
   "Principal": "*",
   "Action":["s3:GetObject"],
   "Resource":["arn:aws:s3:::your-website/*"]
 }
]
}

This is the last configuration step (seriously). Click the properties bar and click enable public hosting (its at the bottom of the page).

Finally, upload your files to the S3 bucket with the index.html file being in the root folder. There you have it your static site is ready for public use.

You can now access your bucket using the S3 bucket URL, such as, https://{your bucket name}.s3.amazonaws.com/index

Well done. You have been able to host your static website on AWS successfully. It's also important to note that you can add some optimizations for caching by using the AWS Cloudfront, and also use your own domain name using the AWS DNS system but this is a discussion for another day.

The conclusion of all this is that hosting your static website on AWS can become unnecessarily long and stressful, but when you work with multiple AWS features like Cloudfront, DynamoDB, S3, AWS API Gateway, Lambda etc. you can get the most benefit of the AWS services. If all you need is just static hosting, I think you can use an easier option like Github Pages.

Deploy Your Static Website to AWS