Hosting a Static Website Using Amazon S3 and CloudFront ☁️
Introduction
As part of my AWS learning journey, I worked on hosting a simple static website using Amazon S3 and explored Amazon CloudFront for distributing the website content.
The main objective of this hands-on activity was to understand how a static website can be stored and hosted using Amazon S3, accessed through a website URL, and connected with CloudFront.
AWS Services Used
Amazon S3
Amazon CloudFront
S3 Bucket Policy
- Creating an Amazon S3 Bucket
I started by creating an Amazon S3 bucket to store the files required for my website.
Steps
Logged in to the AWS Management Console.
Searched for Amazon S3.
Opened the S3 service.
Navigated to Buckets.
Clicked Create bucket.
Provided a unique name for the bucket.
Selected the required AWS Region.
Configured the bucket settings.
Created the bucket.
The S3 bucket was successfully created and was ready to store my website files.
📸 Screenshot:
The S3 bucket created for hosting the static website.
- Uploading Website Files to S3
After creating the bucket, I uploaded the files required for my website.
The files included my portfolio website and an image. The main webpage was created using index.html.
Steps
Opened the S3 bucket.
Clicked Upload.
Selected the website files from my computer.
Uploaded the files to the bucket.
Verified that the files were available under the Objects section.
The uploaded files included:
index.html
image files
portfolio files
The index.html file was used as the main page of the website.
📸 Screenshot:
Website files uploaded to the S3 bucket.
- Enabling Static Website Hosting
After uploading the files, I configured the S3 bucket for static website hosting.
Steps
Opened the S3 bucket.
Navigated to the Properties tab.
Scrolled to Static website hosting.
Clicked Edit.
Enabled Static website hosting.
Selected Host a static website.
Entered the index document as:
index.html
Configured the error document if required.
Saved the changes.
The bucket was now configured to host my static website.
📸 Screenshot:
Static website hosting enabled with index.html configured as the index document.
- Configuring Bucket Permissions
To allow the website content to be accessed, I also worked with the S3 bucket's access and permission settings.
Steps
Opened the S3 bucket.
Navigated to the Permissions tab.
Reviewed the Block Public Access settings.
Configured the required access settings.
Worked with the Bucket Policy to control access to the objects.
Saved the changes.
This helped me understand how S3 controls access to objects stored inside a bucket.
- Accessing the Website Using the S3 URL
Once static website hosting was configured, I accessed the website using the S3 website endpoint.
Steps
Opened the S3 bucket.
Went to the Properties tab.
Located the Static website hosting section.
Copied the website endpoint.
Opened the endpoint in a web browser.
The index.html page was successfully displayed in the browser.
📸 Screenshot:
S3 website endpoint generated for accessing the static website.
📸 Screenshot: Hosted Portfolio
My portfolio website successfully hosted using Amazon S3.
- Working with Amazon CloudFront
After successfully hosting the website using S3, I explored Amazon CloudFront.
Amazon CloudFront is a Content Delivery Network (CDN) that can be used to deliver content to users through a network of edge locations.
The basic architecture is:
User
↓
CloudFront
↓
Amazon S3
↓
Website Files
CloudFront can act as the delivery layer between the users and the content stored in S3.
- Creating a CloudFront Distribution
Next, I created a CloudFront distribution and configured my S3 bucket as the origin.
Steps
Opened the AWS Management Console.
Searched for Amazon CloudFront.
Opened the CloudFront service.
Selected Create distribution.
Configured the S3 bucket as the origin.
Configured the required distribution settings.
Set the default/root object appropriately, using:
index.html
Reviewed the configuration.
Created the CloudFront distribution.
The CloudFront distribution was successfully created and connected to my S3 content.
📸 Screenshot:
CloudFront distribution created for the static website.
- Configuring the S3 Bucket Policy
I then worked on the S3 bucket policy associated with the CloudFront setup.
An S3 bucket policy is a JSON-based policy that controls access to resources stored inside an S3 bucket.
The purpose of configuring the policy was to control which requests are allowed to access the website content.
Steps
Opened the S3 bucket.
Navigated to Permissions.
Located the Bucket Policy section.
Added/configured the required policy for the CloudFront setup.
Reviewed the permissions.
Saved the bucket policy.
This helped me understand how AWS permissions work between services such as S3 and CloudFront.
S3 bucket policy configured for controlling access to the website content.
- Overall Architecture
The overall workflow I worked on can be represented as:
User
|
↓
Amazon CloudFront
|
↓
Amazon S3
|
↓
index.html
|
↓
Static Website
The main responsibilities of each service were:
Amazon S3
Used to:
Store website files
Store images
Host the static website
Serve the website content
Amazon CloudFront
Used to:
Act as the CDN layer
Connect to the S3 origin
Deliver website content to users
S3 Bucket Policy
Used to:
Control access to objects
Define permissions for accessing the bucket
Support the required S3 and CloudFront access configuration
- What I Learned
Through this hands-on activity, I learned:
How to create an Amazon S3 bucket.
How to upload files and objects to S3.
How to configure static website hosting.
How to use index.html as the main webpage.
How to access a static website using an S3 website endpoint.
How S3 permissions and bucket policies work.
How to create a CloudFront distribution.
How to configure S3 as a CloudFront origin.
How S3 and CloudFront can work together.
The basic concept of content delivery through CloudFront.
Conclusion
This hands-on activity gave me a practical understanding of hosting and delivering a static website using AWS.
I started by creating an S3 bucket, uploaded my portfolio and website files, configured static website hosting, and accessed the website through the S3 website URL.
After that, I explored Amazon CloudFront, created a distribution, connected it with my S3 bucket, and worked with the S3 bucket policy to understand access control.
Overall, this experience helped me understand the basic workflow of deploying a static website using Amazon S3 and CloudFront and gave me practical exposure to AWS cloud services. 🚀
Top comments (0)