Host Static Website on Amazon s3 with Cloudflare

Are you looking to host a static website? Then you are at the right place where I will be guiding you to host and set up your static website on Amazon s3. So just stay connected with us.

Hello everyone, In this article, we are going to talk about hosting a static website on amazon s3.

What is a Static Website?

Static websites are the ones that are fixed and developed with HTML CSS and JavaScript in this static website the content is fixed or the same. The user reads the content which is already present on the webpage the same content without any dynamic content or server is known as a static website.

If you want to know more about static websites then visit: Click here

What is an Amazon s3?

Amazon S3 or Amazon Simple Storage Service is a service offered by Amazon Web Services that provides object storage through a web service interface. Amazon S3 uses the same scalable storage infrastructure that Amazon.com uses to run its global e-commerce network.

Why Use Cloudflare to host static websites on Amazon s3?

Cloudflare is a Content Delivery Network (CDN), Domain Name System (DNS), and protection against Distributed Denial of Service (DDoS) attacks. Using Cloudflare, you can provision DNS records and distribution rules for your website hosted in Aws s3 and other cloud services.

Cloudflare plays a vital role in setting up the static website as you get free SSL and that’s superb. If not you have to purchase from other platforms which are a little expensive.

So now let’s see how to host and setup static website on Amazon s3:-

Step 1: Login to to AWS web console and search for S3 service. If you don’t have an account you can create one.

Step 2: Click on Create Bucket to configure a new s3 bucket that holds contents for our static website.

Step 3: Click on Create Bucket to configure a new s3 bucket that holds contents for our static website.

Step 4: Select Object Ownership to – ACLs enabled.

Step 5: Block Public Access(Default) – Click and Uncheck the box.

That is the default version but you have to uncheck the box and click tick on down in acknowledge box.

Step 6: Click on Create Bucket.

So your not done yet after you create bucket there are few more steps to be followed to setup your static site.

Step 7: After Creating the bucket, Now you have to go to: Properties Section

After you click on properties now just scroll down and see at the end there is “Static website hosting”

• Click on edit button in Static website hosting section.
• Under Static website hosting you will see two option: Click Enable
• And scroll down and see index document :
• Include  the index document name. In my case, it is index.html
• Include the error document name. In my case, it is error.html

Step 8: Now you have to go to: Permissions Section and edit Bucket policy

Now you need to add some Bucket policies to secure your bucket.

From the S3 dashboard, click on the name of the bucket, then click on Permissions tab. Scroll down to the Bucket policy section and click on its Edit button.

Add the following bucket policy to it and make sure to replace  yourdomain-name with the name of your bucket.

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

After that scroll down and click on Save changes. And we we are done with buckets part.

Now you have to go to your domain name provider in my case I have I’m using Cloudflare where we get free SSL and I would recommend you to transfer your domain power to cloudflare from your domain name provider.

Step 9: Go to Cloudflare and add CNAME Pointing to your AWS buckets.

To get your CNAME, Go to properties now just scroll down and see at the end there is “Static website hosting” Section.

After you copy the CNAME paste it on your Cloudflare DNS setting .

As you can see in the image above I have showed you to how to add CNAME pointing to AWS buckets location.

Step 10: Now the final step is add A record in Cloudflare.

Finally we are done hosting static website on Amazon s3 with cloudflare.