DEV Community

Sanamdeep Singh
Sanamdeep Singh

Posted on

Host a Website Using AWS CloudFront, Origin Access Identity, S3 without Static Website Hosting

This Second tutorial is to host a website on AWS and Restricting Access to Amazon S3 Content by Using an Origin Access Identity.

Step 1: Register a Domain
Buy a domain of your choice. eg You can buy your domain from AWS, Google domains, Go Daddy and other providers. For the scope of this blog we will consider domain to be . You will use the domain you have chosen and replace them with the usage in below steps.
To buy domain name from AWS go to Route53 and check for available domains of your choice.
Step 2: AWS Setup
This Step involves multiple substeps.

Setting up ACM or AWS Certificate Manager.
ACM handles the complexity of creating and managing public SSL/TLS certificates for your AWS based websites and applications.
Go to AWS Certificate Manager and select “Request a certificate” > “Request a public certificate” > Under domain name enter and * . The second domain name is for all the subdomains like . > choose “DNS validation” > Review > confirm and request.
After this step if you have bought your domain from AWS then you will have to wait for 10–15 minutes while the certificate is issued. Otherwise if you have bought your domain from a third party domain provider then you will need to click on “ Export DNS configuration to a file” option inside your requested certificate and copy the DNS Name and Values to your domain settings.
Eg for Google Domain you can go to your particular domain and under DNS > Custom resource records you will add the DNS entries. Only enter unique entries.
Only after this step is completed will AWS take 10–15 minutes to issue a certificate.
Set up S3 Buckets
Go to S3 and make bucket . For the purpose of a sample website use a Hello world HTML file.
Setting up CloudFront
Now we will set up two CloudFront one for and the other for
First lets create CloudFront from
Create Distribution > Web > Get Started > Under Origin domain path you need to add S3 bucket for
Note: Select the option displayed under Origin domain path.
Upon entering the Origin domain path the Origin ID is automatically populated.
Check yes under Restrict Bucket Access. Now you will see Origin Access Identity option. If you have not created Identity before select yes else use an existing one.
Under Grant Read Permissions on Bucket choose yes. This will automatically add a bucket policy to grant permission to CloudFront to access S3 objects.
Under Default Cache Behavior Settings > Viewer Protocol Policy choose Redirect Http to Https.
Under Distribution Settings > Alternate Domain Names(CNAMEs) > enter
Under Distribution Settings > SSL Certificate >choose Custom SSL certificate and choose your certificate
Under Distribution Settings > Default Root Object type index.html
Click Create Distribution. After this CloudFront will take 20–30 minutes to be deployed.
Repeat the process for
since we created only one bucket we will use here as well.
Use as the Alternate Domain Names(CNAMEs)
enter index.html under Distribution Settings > Default Root Object for
Rest of the settings will be similar to the previous CloudFront.
Note: The purpose of this CloudFront is to redirect traffic coming to to redirect to bucket. So the settings would remain the same.
Setting up Route53
In this step Under Hosted Zones > Create Hosted Zones
Enter Domain as and click create.
Now under the newly created hosted zone you will find two automatically created record sets.
One of them will have the Name servers with four entries.
Now Click Create Record Sets >under Name put >
check Alias as yes > choose alias target as the corresponding CloudFront. Make sure to choose the right alias Target.
Create a Record Set for following the above steps.
Copying the DNS entries
For Third party providers we already copied the DNS entries from certificate manager. But for people using domain from AWS you will need to copy the DNS entries under Route53 if not added automatically.
Copying Name Servers
This step is for domains from third-party providers copy the Name Serversgenerated in Route53 and add them to the domain. Eg for google domains they can be added under DNS> Name Servers
After this step, you can open your website either by or Both will be redirected to

Changes not reflecting on website
Also in case, you make the change to your website by changing contents in S3 bucket. CloudFront can take some time before reflecting the changes automatically. A Faster way is to go to the CloudFront > Invalidations > Create Invalidation and enter /* if you want to invalidate all the files. After creating the invalidation on both and, the changes will be reflected immediately.

Top comments (2)

bugb profile image

Thank you so much for your tutorial, it is better if you include some image for more readable.

Cloudfront auto downloads and caches your static site to the edge location based on TTL, by default it is 86400 which is equal to 1 day, you can set it to lower or higher than this value.

BTW: Create Invalidation it can cost some fee, and I think better you can create auto deploy script, every time you update your website, it auto push to s3 then run this command to update Create Invalidation:

aws cloudfront create-invalidation --distribution-id <your-distribution-id> --paths '/*'

It very helpful and save your time.

sanamsoodan profile image
Sanamdeep Singh

That was very informative. I will keep your suggestions in mind next time.Will try and update the current ones as well.