Hosting a Free website on AWS S3 with Freenom domains for dummies

This is part of my how-to series tutorials for dummies .

In this article we will be attempting to host a simple static website on AWS S3 and also do a URL forwarding with a free domain name using Freenom.

Prerequisites

1. AWS Account . The best free tier in my view amongst cloud vendors
2. Freenom . A free domain for everyone
3. A sample website code downloaded from bootstrapmade.com website (link) . You can replace this with your static code if you want.

Before we proceed further , lets clarify a few things.

1. What is a static website ?

A static website is simply html sites that have no fancy integration that could take to a server in the background.For example you cannot collect contact data using a static website and then send it to a database somewhere.

2. What is a domain name ?

Compare the following URLs. Both lead to the same page. But do you now think that the second url is far more easier to remember ?

Don’t try these as I have deleted them after this post.

http://10.154.79.84:8080/mystaticwebsite/pages/web/index.html

vs

http://cloudstuff.tk/index.html

Let’s get started.

The AWS Part :

Step 1 :

1. Download a desired website template from bootstrap.com into your pc . I downloaded this
2. Login to the AWS Console and use the search bar to locate S3 services.

3.Click on a Create Bucket

4. Enter a suitable bucket name . Note that this need to follow some conventions. Click on rules to see more.

5.Any website is expected to be accessible all over the internet. Hence we need to first define the bucket’s privacy settings to enable this property. Scroll down and remove the checkbox “Block all public access” and check the checkbox “I acknowledge these settings” at the bottom .

6. Scroll to the end of the page and click on Create Bucket.

7. Now you can see your bucket in the buckets page

8. AWS S3 documentation suggests we need to setup an Access Policy for enabling the bucket to be treated as a website storage .So lets do that.

Click on your bucket name and go to the Permissions tab.

Now scroll down to the bottom and click on the Edit button against the bucket policy.

Now paste the code below with the change of your bucket name ( I have highlighted my bucketname in bold )

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

And when you do that you should see a screen like the below. Don’t forget to hit the Save Changes button.

9. It’s time to upload the static website code.

For this go to the buckets home page and click the upload button

You can simply drag and drop files here.

After the files are loaded , you need to click the upload button at the bottom of the page.Wait for the files to get uploaded .

You can see the progress of this operation as follows.

Important Points:

It’s a good practice to have a index.html and error.html in your static website as these pages are called default pages . Having said that you can also name them differently and ensure that your URL has the name of the file accurate.

Now its time to test our static website.

AWS S3 Static Website follow a patten.

https://<yourbucketname>.s3.amazonaws.com

So in case of this tutorial it is ( do not try this link as I’ll be deleting this bucket to avoid any unwanted usage )

“ https://mysimplestaticwebsiteaei.s3.amazonaws.com/index.html “

Observe the URL below.

We had agreed to also have a domain forwarding for our static website . Now let’s do that. Let’s head to Freenom

The FreeNom Part :

1. Head to Freenom website
2. For simplicity I’m searching for a domain name simpstaticaei

3. And I’m lucky to have a couple of free domains that I can reserve. I’ll choose .ml domain

4. Now after pressing the checkout , I have one last thing to do.

Click on the Forward this domain button.

Paste the complete URL of our static website but with a twist of removing https as Freenom by default doesnt support https routing.We can enable this but that’s for a later day.

When you click on the Continue button , you will be shown the checkout page with a $0.00 invoice . Also at this state it’s a good idea to sign in with your Google Account to keep track / administration of your domains at a later date.

At any time you can access your domains and other settings from the “Services” menu. You can also manage your domain with the management tools option .

‘

It’s the moment of truth.

Now we should be able to access our website with the new url which is

“ http://simplestaticaei.ml/ “

Observe the URL . Cool right ?

In case if you have a challenge try adding the full url as follows

http://<yourdomain>/index.html

Parting thoughts

1. We just saw a way to simply host a website at zero cost . You can get creative with this . Help a local self-help group to , a local community , a non-profit or volunteer group with a simple web-site that they can use to reach like minded individuals.
2. You can host your own portfolio even if you get lucky with the domain name

For example I’m a great fan of Master Yoda from Star Wars and I could find a domain for Master Yoda . I can host a simple page with a lot of cool content about Master Yoda .

3. Finally the most important aspect. Just because it is free , do not abuse it. Be a responsible cloud user and delete resources that you no longer need , release domain names that you no longer use so that some one else may be able to get one that they are looking for.

If you have come this far , Congratulations . May the Force be with you .

Consider following me for a lot of Dummies stuff on AWS , Azure and a lot of general stuff.