Deploying a Static Website on AWS S3 with CloudFront and HTTPS:

Introduction -

In this step-by-step tutorial, you’ll learn how to deploy a blazing-fast, secure static website using Amazon Web Services (AWS). This guide leverages AWS's free tier, making it perfect for personal projects, portfolios, and simple business sites on the internet with HTTPS support and basic security features

Prerequisites -

• An AWS account.

• Basic understanding of HTML, CSS, and JavaScript.

• AWS CLI (Optional, but recommended).

By the end of this post you will be able to -

• Create an S3 bucket and Configure it for static website hosting.

• Create a record in Route 53.

• Create a CloudFront distribution and link it with your custom domain.

• Create Certificates in AWS Certificate Manager.

• Then, finally link the CloudFront CDN, S3, Domain, and SSL Certificate via Route 53 to securely access your webpage.

Step-by-Step Tutorial -

Step 1: Create an S3 Bucket

Amazon S3 (Simple Storage Service) will be your hosting server for the static files.

1. Login to AWS Console: Open AWS Console and sign in.

2. Navigate to S3: Search for S3 in the top search bar and click on it.

3. Create a Bucket:

   • Click Create bucket

   • Give your bucket a unique name (like my-awesome-site.com)

   • Choose a region close to your audience

   • Uncheck "Block all public access"

   • Leave other settings as default

   • Click Create bucket

     

4. Upload Files:

   • Open the newly created bucket

   • Click Upload, drag in your index.html, CSS, JS, and image files

   • Click Upload

STEP 2: Enable Static Website Hosting

1. • Go to Properties Tab: In your bucket, click Properties

     • Scroll to Static website hosting

     • Click Edit > Select Enable

       

       

       Set Document Names:

2. • Index document: index.html

     • Error document: (optional) error.html

3. Save Changes

4. You’ll now see an Endpoint URL — this is your temporary website URL hosted via S3.

Step 3: Make Your Bucket Public (with Caution)

To allow visitors to access your site, you must make the files publicly readable.

1. Go to the Permissions tab in your bucket.

2. Scroll to Bucket Policy > Click Edit

3. Paste the following policy (replace yourdomain.com with your actual bucket name):

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

• 

  This policy will grant public read access to all objects within the "awscloudfriends" S3 bucket.

• You can see your website, but it is not your custome domain url

  

• Step 4: Add HTTPS with CloudFront & ACM

  To make your site secure (HTTPS), you’ll use Amazon CloudFront (CDN) and ACM (SSL Certificates).

  ✅ Request an SSL Certificate with ACM

  1. Go to Certificate Manager (ACM) in AWS

     

  2. Click Request a certificate > Select Public certificate

  3. 

  4. Add your domain (e.g., yourdomain.com, and *.yourdomain.com for subdomains)

     

  5. Choose DNS validation

  6. Add the provided DNS records where your domain is registered

     

  7. Wait for status to turn to "Issued".

🌍 Create a CloudFront Distribution

1. Go to CloudFront

2. Click Create distribution

   

3. Origin Domain: Paste your S3 static website endpoint (not the bucket name)

   

4. Set:

   • Viewer protocol policy: Redirect HTTP to HTTPS

     

   • Alternate domain names if had any: Add yourdomain.com, www.yourdomain.com

   • Select the ACM certificate you created

   • Default root object: index.html

     

     

     Enable security option if you want extra protection from common web attacks like SQL injections, XSS, etc.

     • Best for public websites or anything exposed on the internet (even static ones).

     • You’ll be able to select or create a Web ACL (Access Control List) after this step.

5. Click Create distribution

6. Wait for status to turn Deployed

Make a note of your CloudFront URL (e.g., d123abcxyz.cloudfront.net)

Step 5: Configure DNS for Your Domain(I’m ignoring this step)

If you have a custom domain (like yourdomain.com), it’s time to connect it.

1. Log in to your DNS provider (e.g., GoDaddy, Namecheap)

2. Add a CNAME Record:

   • Name: www (or blank for root domain)

   • Value: CloudFront domain name (d123abcxyz.cloudfront.net)

3. For root domains (without www), use an ALIAS or ANAME record if supported (or use AWS Route 53)

Now, accessing yourdomain.com or www.yourdomain.com should take you to your static website 🔗

Step 6: Add Basic Security with AWS WAF

Protect your site from common attacks using AWS WAF (Web Application Firewall).

1. Go to the AWS WAF & Shield Console

2. Click Create web ACL

   

   • Give it a name (my-website-acl)

   • Region: Select us-east-1 (same as CloudFront) or Global

     

   • Resource type: CloudFront distribution

   • Select your distribution

3. Add Managed Rule Groups:

   

   • Example: AWSManagedRulesCommonRuleSet (blocks SQLi, XSS, etc.)

4. (Optional) Add Custom Rules (like IP blocking)

5. Default Action: Allow

6. Click Create web ACL

   

Your CloudFront distribution is now protected by WAF! 🛡

Step 7: Monitor Your Website with CloudWatch

1. Navigate to Amazon CloudWatch

   

2. Explore metrics under:

   • S3 for data usage

     

     

   • CloudFront for request rates, errors, latency

     

3. Set up Alarms to be notified of:

   • High error rates

   • Spikes in traffic

This helps keep your site healthy and performance.

Final Checklist: Go Live!

• 🔗 Visit your domain — make sure your website loads perfectly

• 📄 Check content — all images, CSS, and JS should load properly

• 🔐 Verify HTTPS — your browser should show a padlock

• 🧪 Test security — try simple attacks and confirm they’re blocked

Conclusion

Congratulations! 🥳 You’ve now hosted a fully functional, secure, and fast static website on AWS — completely under the free tier. Whether it’s a personal portfolio or a client site, this setup is production-ready and scalable.