How to Connect a Free Domain Name To AWS Web Hosting?

For connecting a domain to AWS we hosting we will be creating an S3 bucket and uploading files on it.

1. First go the AWS website and select S3 service.

2. You will land on this page. Now click on “Create bucket”.

3. Now you can see this type of Interface where you have to fill details like bucket name, bucket region etc. It is advised to set the bucket name same as your domain name.

4. Also you have to uncheck the box and allow public access. Also check the acknowledgement box.

5. Now click on the “Create bucket” button.

6. Now you will land on the page containing your created bucket and you can see the message above in green part that “Successfully created bucket “naukarisamachar.live”.

7. Click on the created bucket and then upload your website files. In our case we are just uploading an index.html file to S3 bucket. After that you will get a success message indicating that file has been uploaded.

8. Now go the properties of your bucket.

9. At very last, you will see a section as “Static website hosting”. And at extreme right click on the “Edit” button.

10. Now check the enable option and select “host a static site”.

11. You will now find an option of Index document in which you have to fill your index.html as your file name. This file will be rendered when someone will open your domain name such as “naukarisamachar.live”. This file will act as the default homepage for your website. If you have some other file then you have to write the name of that file in as Index Document.

If you have any error page file or 404 page file then you have to write the full name of that file in Error document field.

Then click on “Save changes”.

12. Now you will see your website hosted on url as –

If you open that url in the browser then you will see a 403 error. It means that the web server understands the request but refuses to authorize it. This is because we have not specified permission for that bucket.

13. Now go to the permission section of your bucket and there you will find a “Bucket policy” section. On the extreme right click edit button.

Now copy the code from here and in the Resource field you have to enter your bucket ARN. In our case ARN is arn:aws:s3:::naukarisamachar.live and after that you have to write /*.

{
    "Version": "2012-10-17",
    "Id": "Policy1697450465124",
    "Statement": [
        {
            "Sid": "Stmt1697450464245",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "ENTER-YOUR-ARN/*"
        }
    ]
}

The /* at the end of the ARN arn:aws:s3:::naukarisamachar.live/* indicates that the ARN refers to all resources within the naukarisamachar.live S3 bucket, including the bucket itself and all of its objects.

Now you can see your website hosted on amazon’s domain.

Wait, it is hosted on amazon’s domain and even don’t have SSL. So now we will go to Amazon’s Certificate Manager to get SSL certificate and create a Cloudfront distribution for connecting our domain.

14. Now go the AWS’s Certificate Manager for requesting a public certificate for your domain.

Click next and enter both versions of your domain with www or non-www. In our case we have entered – naukarisamachar.live and www.naukarisamachar.live.

Then ignore other fields and click “Request” at the bottom.

15. Now you can see a certificate has been issued by Amazon but its status shows as Pending. So we need to verify it.

Click on the certificate and you will land on Interface showing certificate details.

In the above image you can see the status as pending. We need to enter the CNAME name and CNAME value provided by Amazon to our domain’s DNS settings.

16. You have to create these CNAME records from the domain registrars from which you have bought the domain.

In our case we got domain for free from name.com under Github Student Developer Pack. So we would have edited the CNAME records there but we have intergrated our domain with cloudfare so we will create those records there and fill the values provided by AWS Certificate Manager.

In case your domain is on Namecheap, Godaddy, Namesilo, Porkbun, Domain.com etc. you have to create the CNAME records there in DNS settings.

In the above images you can see that we have entered the names and values provided by AWS in DNS records in cloudfare.

Now wait for sometime, it can take hours of verification, but in our case it took only 15 minutes. Remember that if you enter wrong names or values by mistake then verification status will be forever pending. You can see now our domain is verified.

16. Now go to Cloudfront and create a cloudfront distribution.

Choose your domain name from which you had static hosting enabled. You can manually enter that domain here.

Now scroll below ignoring other things, In the viewer section select “Redirect HTTP to HTTPS”. Using this when someone tries to open that website with http protocol he is automatically redirected to https version of website.

Scroll below, then you will find Alternate domain name field. Here enter your domain name both www and non www version.

Now from Custom SSL certificate option choose your generate SSL certificate from the dropdown.

You can also select Firewall option from these, but we have selected “Do not enable security protections”.

Now click on create distribution and you can see the success message in green part as a new distribution created.

17. Now copy the distribution URL and enter in the browser.

After sometime you will see the website on the cloudfront URL.

18. Now we have to just point our domain to this cloudfront url from domain registrar like earlier we had created the CNAME records.In the target field remove the https and / slashes from cloudfront url and enter just domain name d35hz6xhvj6u76.cloudfront.net.Also turn off proxy for both www and non-www versions.

From the above images you can see we have created appropriate CNAME records to point our domain to that cloudfront URL.But now there is a problem. Our website is opening on both URLs ie. on both www and non-www version.

19. We now have to redirect one of the urls to www or non-www version. We will use cloudfront functions for this redirection.

20. Now click here on “Create function”.

21. Give a name and description to your function and click “Create function”.

22. Now you can see a code here which have to be replaced by a function provided by us.

23. Replace the function with this code with your domain name.

function handler(event) {
    var request = event.request;
    console.log(request.headers["host"]);
    if (request.headers["host"] && request.headers["host"].value.startsWith("www")) {
        var response = {
            statusCode: 301,
            statusDescription: 'Moved Permanently',
            headers: {
                'location': { value: 'YOURDOMAIN'+event.request.uri }
            }
        };
        return response;
    }
    return request;
}

We have chosen non-www version of domain. If you want to keep www version than you should add https://www.naukarisamachar.live in the value field.

24. Now publish the function.

25. Go to Behaviour’s section of Cloudfront distributions.

26. Go to function association section associate CloudFront Functions and function name or ARN to viewer request.

Click on Save changes.

Hence, the domain is redirected to https://naukarisamachar.live which is a non-www version.

A domain name is unique, easy to remember address of a website. It is a combination of letters or numbers or both google.com or yahoo.com. You can buy a domain name from companies like Namecheap, GoDaddy, namesilo etc.

Every computer or a server has some unique name in form of strings of numbers which is called IP address. For example 172.16.122.204 is an IP address of a server. But it is really difficult task to remember these IP’s to access websites so that’s why DNS (Domain Name System) was made.

DNS works by translating domain names into IP addresses. When you type a domain name into a web browser, the browser sends a query to a DNS server. The DNS server then looks up the IP address associated with the domain name and returns it to the browser. The browser then uses the IP address to connect to the website.