Publish your static website with HTTPS, AWS S3 and Cloudflare

In this post, I will cover how easily you can publish your static website with HTTPS and Cloudflare caching (Despite its very limited in the free tier and Cloudflare is mostly used for security purposes). You don’t need to buy any extra server or SSL certificate. You can easily serve static HTML, CSS as well as client-side scripts with AWS S3.

Why S3
Amazon S3 (Simple Storage Service) gives cloud storage at low cost. In fact, you can host any static contents. It has nice support for hosting the static website with routing support. This is not a committed server hosting, but still it is quite useful.

Free Tier of AWS S3 supports 5GB storage, 20,000 Get Requests. Just get an account.

Why Cloudflare

My most favorite DNS service is Cloudflare. Their free tier is really super cool. It has some super feature including FREE SSL certificate and caching. It also hides your IP as well as helps you from the DDoS attack up to a certain level in free tier.

CloudFlare can detect DDOS, Spam and other attacks to a site and it automatically blocks those attacks. Not only block, it bans from the entire CloudFlare network.

Here, we will serve the static contents by S3 and  HTTPS with caching by Cloudflare. BTW, I want to mention one thing specially that Don’t consider Cloudflare as CDN service. In order to speed up further, you can use AWS CloudFront with S3. It costs around $0.10-$0.19 per gigabyte but you don’t need to add this service right away. My focus on this blog post is mostly publishing the static website with the minimal cost and resources and without a server.

This is really a handy solution for the designers, markup developers, personal website as well as company landing page or marketing site.

Steps:

  1. Login to the AWS Management Console and open the Amazon S3 console at  https://console.aws.amazon.com/s3/.
  2. Create a bucket without selecting any region. Your bucket name should be same as your domain name. This naming convention is very important. For example, if your domain is exampl.com, then your bucket name has to be example.com. If it is subdomain: something.example.com, then your bucket name would be something.example.com. In this blog post, I used the domain: ofra.in. So, I am creating the bucket with name: ofra.in
  3. Upload your HTML contents.
  4. Select all of your contents and click on action, then click on Make public
  5. Now unselect all of your contents and click on Properties. Under the properties, click on Static Website Hosting
  6. Check the Enable website hosting and type your index page. 
  7. Copy the endpoint: ofra.in.s3-website-us-east-1.amazonaws.com. You need this endpoint for configuring your domain at the Cloudflare.
  8. Now, create an account at Cloudflare and configure your domain. Cloudflare: https://www.cloudflare.com/
  9. Then, navigate the DNS tab and create a CNAME record. Set @ for name field and ofra.in.s3-website-us-east-1.amazonaws.com for IP address field. 
  10. Next, navigate to Crypto tab and select  Flexible from the dropdown in SSL section.

Now navigate https://ofra.in any of browsers in your PC. You will get your static contents.

In case, you want to serve your static contents with www. Then, create another bucket with the name: www.ofra.in and create a Cname at the Cloudflare for www in the same way as above. You can put all the contents in www.ofra.in bucket and set a redirection in ofra.in bucket as follow.Done. Your static HTML contents are online with SSL certificate and caching without any VPS or physical server. Soon, I will add another tutorial on CloudFront. Stay tune still then.

 

Eftakhairul Islam

Hi, I'm Eftakhairul Islam, a passionate Software Engineer, Hacker and Open Source Enthusiast. I enjoy writing about technical things, work in a couple of startup as a technical advisor and in my spare time, I contribute a lot of open source projects.

 

6 thoughts on “Publish your static website with HTTPS, AWS S3 and Cloudflare

  1. Thank you for this blog post! I was wondering what I was doing wrong for my personal site http://www.mysite.com was working but mysite.com was not.

    So much googling and I just need to make two buckets.

    Thanks again. Always see comments are empty when I know hundreds or thousands of people are getting helped.

Leave a Reply

Your email address will not be published. Required fields are marked *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Read previous post:
Basic DevOps for deploying an application in Ubuntu VPS

As a senior dev guy in the office, I am always asked to help in setting up production environment ready...

Close