At the end of this post, you should be able to host a static website on Amazon S3
What you would need for this project
- AWS Account
- A domain name
- A website (A simple index.html file will do, feel free to use this one)
The services used in this project are:
- Amazon S3 ( Simple Storage Service)
- Amazon Route 53
Let’s begin.
Setup Amazon S3
Amazon S3 (Simple Storage Service) is used to store and retrieve data. Think of them as folders for the cloud. In this project, our S3 would be used to host our HTML page.
From the console, navigate to Amazon S3 and click on create bucket
Complete the following actions:
a. Enter a bucket name: choose a unique name that mimics a website (e.g. mysite.com)
b. Select an AWS region: Choose a region close to you (e.g. London region — eu.west.2)
c. Deselect Block all public access and acknowledge the warning.
d. Click on create bucket
We aren’t done, once your bucket is set up you have to ensure that it can host a website.
Click on your brand new bucket and choose the properties tab. Scroll all the way down to Static Website Hosting, click on edit, and perform the following actions:
a. Enable website hosting
b. Under hosting type, choose Host a static website
c. Under the index document enter ‘index.html’. The error document is optional, you do not have to fill it in.
d. Save changes
Next, we will set up a bucket policy
In AWS, policies are used to define permissions for resources. They regulate how users interact with resources.
Select your bucket once again and click on the permissions tab. Under Bucket Policy, click on edit.
In the space above, enter the following code (you can find this in the repository as well)
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
}
]
}Remember to enter your bucket name next to Resource. Great! The set-up for our bucket is complete.
Upload File to Amazon S3
We have a bucket, we can now store our object in the bucket. Click on your bucket and select upload
you have the option to add a file or a folder.
Drag the file you need into the area, or click on add files and select your index.html file.
Select upload to complete the process. Well done.
To test if your website has been successfully uploaded, go back to the properties tab. Scroll down to Static Website Hosting and copy your website endpoint (http://yourbucketname.s3-website.eu-west-2.amazonaws.com)into a web browser.
Awesome. Now its time to connect this to route 53 to ensure that we have a better-looking website name 😉
Setup Route 53
Amazon Route 53 is a DNS web service that routes end users to internet applications. We will use Route 53 to route traffic to our S3 bucket.
In order to do this, you have to set up a domain. If you do not know how to set up a domain on Route 53, you can read about it here: Register a Domain with AWS Route 53
Let’s begin
From the console, navigate to Amazon Route 53 and click on ‘hosted zones’
Next, we are going to create a record.
perform the following actions
- Enter a record name — this must be the same name as your bucket else it won’t work
- Choose a record type — type A
- Toggle the Alias
- From the route traffic to drop-down menu, select Alias to S3 Endpoint
- Choose a region from the drop-down menu— this should be the same region as your bucket
- Pick the bucket that comes up — this should be the same bucket you created in the previous section.
- Click on create record
Great now you have a new record, and with this web address, you should be able to view your website.
Thank you for coming along on this journey with me.
Connect with me on LinkedIn
