Hosting a Static Website with Amazon S3 Bucket

The different Possibilities to Host a Website in 2020?

• Shared web hosting.
• VPS with a web server (mostly Nginx or Apache).
• Static pages host provider (GitHub Pages, GitLab Pages, …).
• Cloud application platform (Netlify, Heroku, …).
• A cloud service provider (AWS, Microsoft Azure, Google Cloud, …).

Why use Amazon S3?

It’s simple object storage, it’s cheap (free if you are eligible for free tier), it allows easy uploads (eg. from CI), etc. If I would require additional back-end services, it would be easy in the AWS ecosystem. Last but not least, it provides a simple web server for us.

First of all, log into your AWS account. Create a new S3 Bucket. The name has to be identical to your domain name (including all domain levels).

1. Create a Bucket in the preferred region with default settings. Just don’t forget to add tags if you mean it seriously.

Now, the Bucket which will be a storage for our files has been created. There are no files (ahem, objects) in it and it’s not available via HTTP yet.

Upload files to the Bucket. In the beginning, it may be just a single index.html file. Open the Bucket and Upload a file via AWS Console. Continue with the default configuration.

Now, the Bucket is configured to work as a simple web server. You can see an Endpoint, a URL, on which the server is available. If you try to access it in your browser, it won’t work as expected. That’s because access to Bucket’s objects is restricted (recall “Block all public access” from the Bucket configuration).

2. Create another S3 bucket with www subdomain

3. Configure S3 main domain bucket to redirect to www subdomain

4. Configure www bucket for website hosting.

6. Add a bucket policy to make the bucket contents public.

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

Cloudflare

Log into your Cloudflare account and select your domain.

Create a domain alias for your S3 Endpoint. Go to the DNS section and create a new CNAME record. Ensure you pass traffic through Cloudflare (“orange cloud”) to leverage free CDN. Otherwise, you would just set a DNS record.

Wait a few minutes (at least 5) and visit your domain. You should see the same content as at the S3 Endpoint

We have a working website on our custom domain now!

A brief Explanation of the above steps is :

We need to have two s3 buckets now; why two?

Because generally when you assess your website you will put a name say example.com but it is an ideal way to host a website is with www subdomain that is www.example.com.

So how it is run in the AWS world? You create s3 buckets with both names and then you have this domain S3 bucket redirect the request to the www subdomain.

So for that we need two S3 buckets one with main domain and one with www subdomain and then we will configure the main bucket to redirect traffic to www subdomain and we will actually host all our contents or upload to www subdomain bucket and we will configure this S3 bucket for website hosting in S3.