AWS Builder Center

Builder Center

Building a Static Website for the King of Pop on AWS

Building a Static Website for the King of Pop on AWS

Go beyond a basic "Hello World" website and build a tribute to the King of Pop while mastering AWS fundamentals. In this hands-on tutorial, you'll create and deploy a responsive static website using Amazon S3, enable website hosting, and make your project accessible to the world. Whether you're learning AWS or looking for a fun project to showcase your cloud skills, this guide combines technical practice with a tribute to one of music's greatest icons.

Ghita

Software engineer | Data engineer | 8x AWS Certified
Disclaimer
This project is a non-commercial fan tribute created solely for educational and learning purposes. All rights to the artist’s name, music, trademarks, images, and related intellectual property belong to their respective owners.

Introduction

What better way to learn AWS than by building something you’re passionate about?
In this hands-on article, we’ll deploy a Michael Jackson tribute website using a modern, serverless architecture on AWS. Instead of manually creating resources in the AWS Console, we’ll leverage the AWS Cloud Development Kit (CDK) to provision our infrastructure as code, making the deployment repeatable, scalable, and easy to maintain.
By the end of this tutorial, you’ll have a globally distributed static website powered by Amazon S3 and Amazon CloudFront, with your content securely protected through an Origin Access Identity (OAI).
We’ll show you how to do this in the following steps:
  • Step 1: Create the CDK Project
  • Step 2: Install AWS CDK Libraries
  • Step 3: Create the Website Files
  • Step 4: Build the Infrastructure with AWS CDK
  • Step 5: Bootstrap and Synthesize the CloudFormation Template
  • Step 6: Deploy the Infrastructure
  • Step 7: Your King of Pop Website is LIVE!

Architecture

The AWS solution we are building provides:
  • Operational Excellence: Infrastructure is defined as code using AWS CDK, making deployments repeatable, consistent, and easy to maintain.
  • Performance Efficiency: Amazon CloudFront caches website content at edge locations worldwide, reducing latency and improving the user experience.
  • Cost Optimization: Amazon S3 and CloudFront offer a cost-effective architecture that scales automatically based on demand, making it ideal for personal projects, portfolios, and small websites.
Here’s an architecture diagram of what we’ll implement:
Architecture diagram

Steps


Step 1: Create the CDK Project

In this step we will create a new CDK project. The CDK generates a basic project structure that includes configuration files, dependency management, and an entry point for your infrastructure code.
run the following command:
1
2
3
mkdir aws-static-website
cd aws-static-website
cdk init app - language python
>Project structure:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
+---aws-static-website
| | .gitignore
| | app.py
| | cdk.json
| | README.md
| | requirements-dev.txt
| | requirements.txt
| | source.bat
| |
| +---aws_static_website
| | aws_static_website_stack.py
| | __init__.py
| |
| \---tests
| | __init__.py
| |
| \---unit
| test_aws_static_website_stack.py
| __init__.py
|---

Step 2: Install AWS CDK Libraries

Create a virtual environment to isolate project dependencies and activate it to install the default dependencies.
Activate the virtual environment:
1
2
3
'.venv\Scripts\activate' #Windows

source .venv/bin/activate #Linux/macOS
Install AWS CDK libraries and project dependencies:
1
python3 -m pip install -r requirements.txt
>Output:
CLI: Install AWS CDK libraries
CLI: Install AWS CDK libraries

Step 3: Create the Website Files

Now it’s time to build the website itself. By creating the following files: index.html , styles.css and script.js
Since this is a static website, all assets will later be uploaded to Amazon S3 during deployment.
Run the following commands:
1
2
3
4
mkdir website
cd website

touch index.html styles.css script.js
> Website files: index.html, styles.css and script.js
For readability, only key code snippets are included in this article. You can find the complete index.html, styles.css, and script.js files on GitHub: HERE 

Step 4: Build the Infrastructure with AWS CDK

Now we’ll define the AWS resources using CDK. The stack creates:
  • A private S3 bucket:
    The website assets will be stored inside a private Amazon S3 bucket. Keeping the bucket private prevents users from bypassing CloudFront and accessing objects directly.
  • A CloudFront distribution:
    CloudFront becomes the public entry point for the website by caching content globally, reducing latency, serving HTTPS traffic, and improving scalability. Instead of exposing the S3 bucket, visitors access the website exclusively through CloudFront.
  • An Origin Access Identity (OAI):
    To securely connect CloudFront with the private S3 bucket, create an Origin Access Identity (OAI). The OAI is granted permission to retrieve objects from the bucket through its bucket policy.
    This approach significantly improves the security of our architecture while maintaining excellent performance.
  • Automatic deployment of website files:
    Finally, use the BucketDeployment construct to upload the website assets during deployment. Whenever the stack is deployed or updated, CDK automatically uploads the latest version of your HTML, CSS, JavaScript, and media files.
>static_website/static_website_stack.py:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
from aws_cdk import (
Stack,
RemovalPolicy,
aws_s3 as s3,
aws_cloudfront as cloudfront,
aws_cloudfront_origins as origins,
aws_s3_deployment as s3deploy
)

from constructs import Construct


class StaticWebsiteStack(Stack):

def __init__(self, scope: Construct, construct_id: str, **kwargs):
super().__init__(scope, construct_id, **kwargs)

bucket = s3.Bucket(
self,
"WebsiteBucket",
block_public_access=s3.BlockPublicAccess.BLOCK_ALL,
removal_policy=RemovalPolicy.DESTROY,
auto_delete_objects=True
)

oai = cloudfront.OriginAccessIdentity(
self,
"OAI"
)

bucket.grant_read(oai)

distribution = cloudfront.Distribution(
self,
"WebsiteDistribution",
default_behavior=cloudfront.BehaviorOptions(
origin=origins.S3Origin(
bucket,
origin_access_identity=oai
)
),
default_root_object="index.html"
)

s3deploy.BucketDeployment(
self,
"DeployWebsite",
destination_bucket=bucket,
sources=[
s3deploy.Source.asset("./website")
],
distribution=distribution,
distribution_paths=["/*"]
)
The app.py file is the starting point of every CDK application. It tells CDK which stack to synthesize and deploy.
> ./app.py :
1
2
3
4
5
6
7
8
9
#!/usr/bin/env python3
import aws_cdk as cdk
from aws_static_website.aws_static_website_stack import StaticWebsiteStack
app = cdk.App()
StaticWebsiteStack(
app,
"StaticWebsiteStack"
)
app.synth()

Step 5: Bootstrap and Synthesize the CloudFormation Template

Before deploying, bootstrap your AWS environment if you haven’t already. Bootstrapping creates the AWS resources required by CDK to deploy infrastructure.
>Run:
1
cdk bootstrap
>Output:
AWS Console: CDKToolKit stack
AWS Console: CDKToolKit stack
Next, synthesize the project to generate the CloudFormation template.
This lets you preview exactly which AWS resources will be created before deployment.
cdk synth generates the CloudFormation templates in both places:
  1. It prints the synthesized CloudFormation template in the terminal output
  2. It also stores the generated files in a local folder called cdk.out
>Run:
1
cdk synth
>Output: results are saved in “cdk.out/” folder
1
2
3
4
5
6
cdk.out/
│
├── StaticWebsiteStack.template.json
├── manifest.json
├── tree.json
└── asset.*
The most important file is: StaticWebsiteStack.template.json
This is the actual CloudFormation template generated from our CDK Python code. You can open it directly to inspect all the AWS resources CDK will deploy, including:
  • S3 bucket
  • CloudFront distribution
  • IAM permissions
  • Bucket deployment resources
>Output: (filename:StaticWebsiteStack.template.json)
StaticWebsiteStack.template.json
StaticWebsiteStack.template.json

Step 6: Deploy the Infrastructure

Now it’s time to deploy the website. CDK will create all AWS resources and upload the website files automatically.
>Run:
1
cdk deploy
CDK will show a summary of the resources that will be created.
Next confirm the deployment:
1
Do you wish to deploy these changes? y
Deployment usually takes several minutes because CloudFront distributions require additional provisioning time.

Step 7: Your King of Pop Website is LIVE!

Michael Jackson’s static website is now hosted on AWS and accessible worldwide through CloudFront.
We’ve successfully built a production-ready static website architecture using Infrastructure as Code.

Conclusion

Building static websites on AWS doesn’t have to be complicated.
By combining AWS CDK, Amazon S3, and Amazon CloudFront, you can deploy fast, scalable, and secure websites with minimal effort while keeping your entire infrastructure version-controlled.
This project showcases how a few managed AWS services can deliver enterprise-grade performance for even the simplest websites.
Whether you’re learning AWS, building your portfolio, or experimenting with Infrastructure as Code, this architecture provides an excellent foundation for future projects. 
Happy building!

References

# amazon-s3# website# amazon-cloudfront# aws-cdk# serverless
Any opinions in this article are those of the individual author and may not reflect the opinions of AWS.
Enjoyed reading this content? Let the author know!

Your likes, comments, shares, and saves help creators reach more builders.

Loading recommendations

Loading article