**Deploying a Portfolio Website on AWS S3 and CloudFront **
Introduction
As part of my AWS learning session, I explored the fundamentals of cloud computing and Amazon Web Services (AWS).
The session introduced several important AWS concepts, including:
AWS and cloud computing
Pay-as-you-go pricing
IaaS, PaaS, FaaS, SaaS and AIaaS
AWS infrastructure and regions
Amazon S3
Amazon CloudFront
As a practical exercise, I deployed my personal portfolio website using Amazon S3 and then configured Amazon CloudFront to deliver the website through a content delivery network (CDN).
This article documents the steps I followed.
1. What is AWS?
Amazon Web Services (AWS) is a cloud computing platform that provides services for computing, storage, databases, networking, security, artificial intelligence and many other applications.
Instead of purchasing and maintaining physical servers, we can use cloud resources whenever required.
Pay-as-you-go
AWS follows a pay-as-you-go model for many services.
This means we generally pay for the resources we use rather than purchasing physical infrastructure upfront.
*2. Cloud Service Models
*
During the session, I learned about different cloud service models.
IaaS — Infrastructure as a Service
Provides infrastructure such as:
Virtual machines
Storage
Networking
Example: Amazon EC2
PaaS — Platform as a Service
Provides a platform where developers can build and deploy applications without managing all the underlying infrastructure.
FaaS — Function as a Service
Allows developers to run code without managing servers.
Example: AWS Lambda
SaaS — Software as a Service
Software is provided as a service through the internet.
AIaaS — AI as a Service
Provides artificial intelligence and machine learning capabilities through cloud services.
*3. AWS Infrastructure Basics
*
AWS has a global infrastructure consisting of:
Regions
Availability Zones
Data centers
A Region is a geographical area containing multiple Availability Zones.
An Availability Zone (AZ) is one or more isolated data centers within an AWS Region.
Using multiple Availability Zones helps improve the availability and reliability of applications.
*4. Amazon S3
*
Amazon S3 (Simple Storage Service) is an object storage service provided by AWS.
S3 can be used to store:
Images
Videos
Documents
HTML files
CSS files
JavaScript files
Application data
Backups
S3 stores data as objects inside buckets.
Basic S3 structure
AWS Account
↓
S3
↓
Bucket
↓
Objects
For my practical exercise, I used an S3 bucket to store the files of my portfolio website.
*5. Creating the Portfolio Website
*
Before deploying the website, I created my portfolio website containing my personal and technical information.
The website consisted of files such as:
index.html
images/
The important requirement for deployment was having the website files ready to upload to S3.
6. Uploading the Portfolio to Amazon S3
The next step was to create an S3 bucket and upload the portfolio files.
Step 1 — Open Amazon S3
Open the AWS Management Console and search for:
S3
Then select Amazon S3.
Step 2 — Create a Bucket
Click:
Create bucket
Provide a unique bucket name.
For example:
my-portfolio-website
Bucket names must be globally unique, so choose a name that is available.
Step 3 — Configure the Bucket
Configure the bucket according to the deployment approach being used.
For a public static website configuration, the required access settings and bucket policy need to be configured appropriately.
Step 4 — Upload Website Files
Open the bucket and select:
Upload → Add files
Upload the portfolio files.
For example:
index.html
images/
After uploading, the files should appear as objects inside the S3 bucket.
*7. Hosting the Portfolio Using S3
*
S3 can be used to host static websites containing files such as:
HTML
CSS
JavaScript
Images
The website's main entry point is:
index.html
After configuring static website hosting/access appropriately, the S3-hosted website can be accessed through its endpoint.
At this stage, the portfolio was successfully hosted using Amazon S3.
8. Why Use CloudFront?
Although S3 can host the website, Amazon CloudFront can be used to distribute the website content through a Content Delivery Network (CDN)without delay .
CloudFront uses a global network of edge locations.
Instead of every visitor accessing the origin directly, CloudFront can serve cached content from an edge location closer to the visitor.
Basic architecture
User
|
↓
CloudFront
|
↓
S3
Bucket
|
↓
Portfolio Website Files
This can provide benefits such as:
Faster content delivery
Global distribution
Reduced load on the origin
Better performance for users in different geographical locations
*9. Deploying the Portfolio Using CloudFront
*
After successfully hosting the portfolio in S3, I configured Amazon CloudFront.
Step 1 — Open CloudFront
From the AWS Console, search for:
CloudFront
Open the CloudFront service.
Step 2 — Create a Distribution
Select:
Create distribution
For the origin, select the S3 bucket containing the portfolio website.
Step 3 — Configure the Origin
Select the S3 bucket that contains the website files.
The CloudFront distribution uses this bucket as the origin.
If using the recommended private-S3 architecture, CloudFront should access the S3 bucket using Origin Access Control (OAC) rather than making the bucket publicly readable.
Step 4 — Configure Default Root Object
Set:
index.html
as the Default root object.
This tells CloudFront which file should be returned when a user accesses the root of the website.
Step 5 — Create Distribution
Review the configuration and create the CloudFront distribution.
CloudFront then begins deploying the distribution globally.
The deployment may take some time.
10. Accessing the Website Through CloudFront
Once the CloudFront distribution becomes available, AWS provides a CloudFront domain similar to:
https://xxxxxxxxxxxx.cloudfront.net
Opening this URL displays the portfolio website.
The final deployment therefore becomes:
Portfolio Website
↓
Amazon S3
↓
Amazon CloudFront
↓
Global Users
Conclusion
This AWS session provided a practical introduction to cloud computing and AWS services.
Starting from basic concepts such as IaaS, PaaS, FaaS and SaaS, I progressed to IAM, Amazon S3 and Amazon CloudFront.
The key hands-on activity was deploying my portfolio website to Amazon S3 and using Amazon CloudFront to distribute it globally.
This helped me understand how cloud services can be combined to deploy and deliver a real-world web application.
Top comments (0)