Host your static website in AWS under 2 minutes with S3

Sithum Jayarathna
AVM Consulting Blog
4 min readDec 14, 2018

The easiest way to host static websites As Soon As Possible. Use your own domain to access the website. This will cost only a few cents per month.

You need a domain purchased from GoDaddy, Namecheap, any other provider or a free domain like dot.tk. Login to the relevant domain management portal and keep it ready to add a DNS record.

Login to AWS Console and Go to S3 Management Console.

Click Create Bucket button

Bucket name: Should be equal to the domain we map. Otherwise, it will give 404 Not Found Error with Code: NoSuchBucket. I use devops.mchn.tk for this example.

Region: Select the region which is closest to the website audience. All clients of my company are from Australia. In that case, I would select Sydney.

The closest region to Sri Lanka is Mumbai physically. But you should select Singapore region to get the lowest latency. That’s how the cable networks are formed. I host game servers on AWS in the Singapore region to get the lowest ping value.

Click the Next button. Bucket names are unique. You can go to the next step only if the bucket name is available. Otherwise, try changing the bucket name. Hit the Next button.

Uncheck all to give public access to the bucket. Click the Next button and Create Bucket. Click on the bucket name to open the S3 bucket.

Go to the Properties tab and Enable Static website hosting.

Add index.html or the file name of your landing page for the Index document. Copy the Endpoint without http:// and hit Save button.

Go to domain management portal you previously logged in. Add a CNAME record. Not an A record.

I use DNS Made Easy. Highly recommended for fast domain propagation

Name: enter the subdomain to match with the name of the bucket you created. In my case: devops.mchn.tk

Alias or CNAME: paste the endpoint you copied from the S3 bucket. In my case: devops.mchn.tk.s3-website-ap-southeast-1.amazonaws.com. (note the trailing [.] period is required)

Get back to the S3 management console. Go to the Permissions tab. Click Bucket Policy button.

Paste the following JSON object to Bucket policy editor. Remember to change the bucket name on theResource property with the bucket name you created.

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

Hit Save button. The bucket is ready to be accessed as a website by the public now. Go to the Overview tab and Upload your static website files. Or open your favorite text editor and paste following sample HTML page.

<!DOCTYPE html>
<html>
<head>
<title>DevOps</title>
</head>
<body>
My Website on AWS :)
</body>
</html>

Save it naming index.html and upload to the root of the AWS bucket. Go to the domain on your favorite web browser.

Optional: You might need to redirect the domain www.devops.mchn.tk to devops.mchn.com bucket. This can be done using s3 redirection feature. Create a bucket named www.devops.mchn.com and assign the same permissions from the other bucket. Then enable static web hosting with redirect requests option set to www.devops.mchn.com.

Congrats! Your website is launched in AWS S3 which costs a few cents per month.

Cleanup: Just delete the bucket you created and remove the CNAME record from the domain management console.

👋 Join us today !!

️Follow us on LinkedIn, Twitter, Facebook, and Instagram

If this post was helpful, please click the clap 👏 button below a few times to show your support! ⬇

--

--

Sithum Jayarathna
AVM Consulting Blog

DevOps Life. Enjoying creative stuff on the ☁ cloud. Simple, loves 📡researching, 📲 IOT, 🎧 music and 🎮 games. www.sithum.net