Hosting Static Website Using AWS S3 Bucket
There are millions of solutions for building and hosting a website, but as developer I want to have the most hands on, easy and cost effective solution. Amazon Web Services (AWS) is becoming more and more powerful with more and more solutions each day. I’ve decided to try to host a static website using the S3 buckets.
In this blog, I will provide steps and benefits for using an Amazon S3 bucket for hosting your static website. Static web pages can contain client-side technologies such as HTML, CSS, and JavaScript. They cannot contain dynamic content such as server-side scripts like PHP. AWS provides other services for hosting a dynamic website with server-side scripts using PHP, JSP, or ASP.NET which is not covered here.
Domain Purchase
First you need to buy your domain for the website. Sometimes finding the right domain name for your business or brand can be very difficult. It needs to be short, unforgettable and unique! I would also recommend .com domain, but it all depends on your overall goal.
You can purchase from many sources online, such as Google Domains, GoDaddy, bluehost,… . I personally like using Google Domains, because how easy it is to register and unregister a domain — it cost only $12 per year.
Create a Free AWS Account
Amazon provides a Free Tier account which provides free trials for many of its services. As part of the free tier, you get an Amazon S3 5GB storage free for one year. Basically you can host your static website on S3 bucket for pretty much free for the first year. After the promotional period it is only $0.023 per GB each month!
Create a new S3 Bucket
When using S3 for website hosting, the name of bucket has to follow the correct naming conventions. Depending on your Region, your Amazon S3 website endpoint follows one of these two formats.
- s3-website dash (-) Region ‐
http://bucket-name.s3-website-Region.amazonaws.com - s3-website dot (.) Region ‐
http://bucket-name.s3-website.Region.amazonaws.com
The bucket-name is your website name. For example, if you registered the domain www.example-bucket.com, you could create a bucket www.example-bucket.com, and all requests to http://www.example-bucket.com are routed to www.example-bucket.com.s3-website.Region.amazonaws.com after adding the DNS CNAME (steps below).
Make sure the bucket access is set to public to allow external connection. Go to thePermissionstab and edit the bucket policy and add the following.
Next, go to Properties tab and enable the static website hosting by clicking edit at the bottom of the page. Set the example below.
Create a new Route 53
Head to AWS Route 53 and create a new hosted zone. Make sure you select the Public hosted zone type. Click on your domain name and start creating your records. Here you need to add the DNS settings provided by the domain company which you purchased your domain from. Follow the AWS document if you not sure how: https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/migrate-dns-domain-in-use.html
After adding domain specific, it is time to route the traffic to the bucket you just created. In Route 53 click on create record to add the routing. Refer to the example below:
Now open a new tab and go to your website! You now have successfully hosted a static website using AWS S3 bucket.
Alternative Routing for The Website
Now we have completed hosting a website with www. at beginning of your linkhttp://www.example-bucket.com . Now, what if you want the traffic to still work when you just hit http://example-bucket.com without the leading www. ?It can easily be done by following the same steps for creating another S3 bucket but this time no www.in the name, justexample-bucket.com . Now open the new bucket, head to properties tab and then edit the Static website hosting. Change the settings to match below:
Congratulations! now you are successfully hosting a website using Amazon S3 bucket which works for both www. and without.
This article has covered the steps for using the S3 bucket to host a static website. There are other similar solutions such as Google App Engine, which provides a similar solution by using Cloud Storage bucket. Microsoft Azure also provides a good solution for using storage blob as static website. Basically it comes done to which cloud solution you are more comfortable with, I personally like working with Amazon Web Services and the solutions it provides. Hope these steps have help you achieve your goals.
