Static Website Hosting with AWS S3 and Cloudflare

Static websites have several advantages over dyanamic websites. If you are running your personal blog or portfolio or small websites. Static websites is the way to go.

Although, this post is not for listing benefits of static website. I will write more on this in another post.

Pre-Requisite

1. You have AWS account
2. You have cloudflare account (Free account)

Configure S3 bucket

1. Create an S3 bucket with the name of your website say: www.gyanbyte.com
2. After creating bucket, goto bucket. Then, click on Properties.
3. Click on Static website hosting. Click on first option: Use this bucket to host a website In index document, put index.html (the starter or homepage html file) In Error document, put the html file like 404.html

4. Save it.
5. Click on Permission tab
6. Click on bucket policy. In the editor, type below:

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

Remember to replace your bucket name in Resource above.

7. Save

Note: It will now show your bucket as Public access. You require to have this bucket public read access.

non www bucket

Note, for SEO purpose you would want your website to open on either www. version or non-www version. Create another bucket with non-www version, say: gyanbyte.com

1. Again, goto Public tab on this bucket. Put above policy in Bucket policy. (Exactly same, except bucket name)

{
    "Version": "2012-10-17",
    "Id": "Policy1527570565509",
    "Statement": [
        {
            "Sid": "Stmt1527570562766",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::gyanbyte.com/*"
        }
    ]
}

Note: the non-www bucket above.

2. Goto Static website hosting tab
3. Click on Redirect requests
4. In target bucket or domain, type your domain name with www, and protocol https.

Note: We will have our website to open on https protocol. With cloudflare free SSL support.

Copy Website files

Now, copy your website files over ot this bucket.

Test your URL for s3 bucket website

Note down your URL from static website hosting tab. Try opening that URL in browser. You should see your website. If you are not seeing expected result. You should see above steps carefully.

Proceed only when you see your website above.

Cloudflare configuration

I assume you have registered on cloudflare free account, and added your website.

1. Goto DNS tab.
2. If you are doing it for first time. Delete all records there.
3. Add a CNAME record with name as www, and value as URL of your bucket. Remove http:// in the begining and ending slash at the end of your bucket URL.
4. Add a CNAME record with name as @, and value as URL of your non-www bucket.

DNS changes in your registrar end

From where you purchased your domain, goto its DNS setting. And, change its nameservers as mentioned in DNS tab of cloudflare. In my case,

Wait for few minutes, to allow DNS changes to be done. It should be done with in 10 minutes. But, in some cases, it might take hours.

Now, if you open your website name. You would see your static website pages.

All set.

Hope you enjoyed the post.