Host a Website in S3

References

https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/RoutingToS3Bucket.html

https://gist.github.com/bradwestfall/b5b0e450015dbc9b4e56e5f398df48ff

Steps

1- Buy the domain

2- Create a hosted zone in Route53

Create Hosted Zone in AWS

3- Grab the dns names from the hosted zone

Grab DNS names from Hosted Zone in AWS

4- Go where you register the domain and add/change the dns records

Change DNS names grabbed from AWS

5- Request a SSL certificate (if you don’t have one)

This step is only needed if you plan to have a SSL site (https). You need to use Cloudfront (it might increase the cost of usage).

https://console.aws.amazon.com/acm/home?region=us-east-1#/wizard/

Request SSL Certificate AWS

6- Validate via DNS

Validation SSL Certificate in AWS

Press “Create record in Route 53”

Then click continue.

It might take a while before the SSL is issued

You might need to refresh the page after and see this

Validation SSL Certificate in AWS

5- Create a S3 bucket with the same name as the domain.

your-blog.com
Or www.your-blog.com

6- Make it public

7- Enable static hosting

S3 Static Website Hosting AWS

Edit and add a bucket policy

S3 Edit Bucket Policy AWS

8- Go back to Route53 to your hosted zone and create an A record

Create A Record AWS

9- First test

Create a index.html file like this

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charSet="utf-8" />
	</head>
	<body>
		<h1>Hello World!</h1>
	</body>
</html>

10- Go to your bucket and upload it

Upload to your bucket the index file

11- Check in the bucket static website properties the url or your static website

S3 website URL

S3 static website URL

12- Test now your real domain

S3 external domain URL

13- Now let’s add a cloudfront distribution to enable SSL

Go to Cloudfront and create a new distribution

AWS Cloudfront distribution

Be careful: That URL I set it’s wrong (it’s a common mistake), the origin domain must be s3-website instead

AWS Cloudfront distribution

Now click on Create new OAI

Next check the Cache y other settings

AWS Cloudfront Cache Behaivor

Set Redirect http to https

AWS Cloudfront Https

Add the custom ssl certificate you created before

14- Go to Route 53 and edit the domain A record to redirect to cloudfront

Route 53 Cloudfront Set


Profile picture


Hi, I'm Leandro Merli and this is my blog where I write about Angular, AWS, Node.JS, Serverless, Wordpress and now I'm testing and using Gatsby as SSG (static site generator), the framework I used to build this blog. :) Please follow me on medium.com or contact me in linkedin