How to configure and host a website on Amazon Simple Storage Service

YouTube illustration of how to configure and host a website on AWS with Simple Storage Service

I think every developer (or professional) should have a domain name and website – they are the foundation of your personal brand and your method to communicate with potential employers.

You can use your personal website to showcase your skills and portfolio of projects you have worked on. Amazon Simple Storage Service (Amazon S3) offers you a quick, easy and inexpensive way to host your static website.

What you’ll learn

How to create an Amazon S3 bucket and configure it to serve your website files
How to upload and set permissions on the static files for your website
How to configure CloudFront to distribute your website
How to access and test your website.

Prerequisite

You need an Amazon Web Service (AWS) Account.

Steps.

Log in to the console and Create an S3 Bucket.
Create bucket and name it mycomputershop-com. Allow public access to the bucket
Upload website files to the bucket
1. Get your website code, e.g. https://github.com/ugogineering/computershop3
2. Unzip. Test on local. Upload files and folders to S3 bucket.
Secure Bucket via IAM.
1. Go to Permissions tab. Scroll down to “Bucket Policy” section and enter the following policy:

{

"Version":"2012-10-17",

"Statement":[

{

"Sid":"AddPerm",

"Effect":"Allow",

"Principal":"*",

"Action":["s3:GetObject"],

"Resource":["arn:aws:s3:::your-website/*"]

}

]

}

SAVE policy

Configure S3 bucket – In buckets tab, click Properties tab and scroll down to edit the Static website hosting section.
1. Enable static website hosting
2. Enter Index document and Error document
3. Save changes
4. Retrieve website endpoint and test
Distribute Website via CloudFront. Go to CloudFront service
1. Create distribution. (paste bucket-name without http prefix)

Field	Value
Origin > Domain Name	<bucket-name>.s3-website-region.amazon.aws.com
Origin Enable Origin Shield	No
Default cache behavior	Use default settings
Cache key and origin requests	Use default settings

Leave defaults for the rest and click ‘Create distribution’.

AN ASIDE: There is an equivalent version of this demonstration that I have done on Google Cloud Store – GCP version of Amazon S3. You will find the link to the blog here: How to configure and host a static website on Google Cloud with Cloud Storage.

Once the status of your distribution changes from “In Progress” to “Deployed”, copy the endpoint URL for your CloudFront distribution found in the “Domain Name” column.

See demo website at: https://d7xbrpdjjsdb6.cloudfront.net/

Access the Website in Web Browser.
1. CloudFront distribution name:
2. Website-endpoint: http://<bucket-name>.s3-website.us-east-2.amazonaws.com/
3. Access the bucket object via its S3 object URL, such as https://<bucket-name>.s3.amazonaws.com/index.html

In practice you register a domain name, e.g mycomputershop.com and point the A records for the domain name to the static website CloudFront distribution Domain Name.

And so that is it. We have deployed a website to Amazon S3. It is easy so go try it.

If you have any questions, drop them and I will be happy to answer you. Thank you.

References