My AWS Static Website Project

Introduction

Hey bro! Here's how I built my own static website on AWS. I wanted something fast, global, and easy to update. Plus, I wanted a real visitor counter that works for everyone, not just me. Here's how I did it, step by step!

Architecture Overview

• S3: Stores all my website files (HTML, CSS, images, etc).
• CloudFront: Distributes my site globally for speed.
• Route53: Handles my custom domain and DNS.
• Lambda + DynamoDB: Counts visitors and stores the count in the cloud.

Step 1: Prepare Your Static Site

I built my site with HTML, CSS, and a bit of JavaScript. Make sure you have an index.html and any images or assets you want to use.

Step 2: Create and Configure S3 Bucket

Create an S3 bucket named after your domain (e.g., mycoolwebsite.com). Upload your files. Make the bucket public for static hosting.

Example S3 Bucket Policy:

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

Step 3: Set Up CloudFront

Create a CloudFront distribution. Set your S3 bucket's website endpoint as the origin (not the REST endpoint!).

• Origin Domain: mycoolwebsite.com.s3-website-ap-southeast-1.amazonaws.com
• Viewer Protocol Policy: Redirect HTTP to HTTPS
• Default Root Object: index.html

Step 4: Connect Domain with Route53

In Route53, create a hosted zone for your domain. Add an A record (alias) pointing to your CloudFront distribution.

Type: A (Alias)
Name: mycoolwebsite.com
Alias Target: dxxxxxxxxxxxx.cloudfront.net

Step 5: Add a Real Visitor Counter (DynamoDB + Lambda)

I wanted a real visitor counter that works for everyone, not just me. Here's how I did it:

1. Create a DynamoDB table (e.g., VisitorCount) with a primary key id (string).
2. Create a Lambda function (Node.js or Python) that increments and returns the count.
3. Expose the Lambda via API Gateway (so your site can call it from JS).

Example Lambda (Node.js):

const AWS = require('aws-sdk');
const dynamo = new AWS.DynamoDB.DocumentClient();

exports.handler = async (event) => {
    const params = {
        TableName: 'VisitorCount',
        Key: { id: 'main' },
        UpdateExpression: 'ADD #c :inc',
        ExpressionAttributeNames: { '#c': 'count' },
        ExpressionAttributeValues: { ':inc': 1 },
        ReturnValues: 'UPDATED_NEW'
    };
    const result = await dynamo.update(params).promise();
    return {
        statusCode: 200,
        headers: { 'Access-Control-Allow-Origin': '*' },
        body: JSON.stringify({ count: result.Attributes.count })
    };
};

Example JS to call the API from your site:

<script>
fetch('https://your-api-id.execute-api.ap-southeast-1.amazonaws.com/default/VisitorCounter')
  .then(res => res.json())
  .then(data => {
    document.getElementById('visitors').textContent = data.count;
  });
</script>

Now, every time someone visits, the counter goes up for everyone!

Deployment & Testing

Once everything is set up, visit your domain. You should see your site, and the visitor counter should work for everyone. If something's not working, check your S3 permissions, CloudFront settings, and Lambda/API Gateway logs.

Conclusion & Lessons Learned

This project taught me a lot about AWS and how the cloud works. Using DynamoDB and Lambda for the counter was a fun way to make my site interactive. If you want to try it, start simple and build up step by step. Good luck, bro!