How I Deployed My Portfolio Website on AWS as a Beginner
A beginner-friendly look at how I deployed my personal portfolio using Amazon S3, CloudFront, AWS Certificate Manager, a custom domain, and GitHub Actions. This project helped me understand cloud hosting, HTTPS, content delivery, IAM permissions, and CI/CD through hands-on experience with AWS.
How I Deployed My Portfolio Website on AWS as a Beginner
When I started learning cloud computing, I wanted to do more than just watch tutorials and memorize AWS services. I wanted to build something that I could actually use.
One of my first practical AWS projects was deploying my personal portfolio website using Amazon S3, Amazon CloudFront, AWS Certificate Manager, and a custom domain, while also setting up a simple CI/CD workflow with GitHub Actions.
I am still learning cloud engineering, so this project was a great way for me to understand how several AWS services can work together in a real application.
What I Built
The goal was simple:
Host my personal portfolio on AWS, connect it to my custom domain, secure it with HTTPS, and automatically deploy updates whenever I push changes to GitHub.
The architecture looks roughly like this:
GitHub → GitHub Actions → Amazon S3 → Amazon CloudFront → Custom Domain
AWS Certificate Manager provides the SSL/TLS certificate used for HTTPS.
Technologies Used
For this project, I used:
- React
- Vite
- Amazon S3
- Amazon CloudFront
- AWS Certificate Manager
- AWS IAM
- GitHub Actions
- Custom domain
- DNS configuration
Each service had a different responsibility.
Amazon S3 for Static Website Files
My portfolio is a static frontend application built with React and Vite.
After running the production build, Vite generates the files needed for deployment, including HTML, JavaScript, CSS, and other assets.
Instead of running an entire server just to serve these files, I used an Amazon S3 bucket as the origin for my website.
This helped me understand an important cloud concept:
You do not always need a traditional virtual machine or backend server to host a website.
For static applications, object storage can be a simple and effective solution.
Amazon CloudFront for Content Delivery
Although S3 stores the website files, I placed Amazon CloudFront in front of the bucket.
CloudFront is AWS's content delivery network.
Instead of visitors requesting files directly from the S3 bucket, they access the website through CloudFront.
CloudFront can cache content at edge locations closer to users, which can improve website delivery performance.
It also gave me a better architecture for connecting HTTPS and my custom domain.
My request flow became:
Visitor → Domain → CloudFront → S3
Working with CloudFront helped me understand the purpose of a CDN instead of only knowing its definition from AWS documentation or courses.
Securing the Website with AWS Certificate Manager
I wanted my portfolio to use:
https://instead of an unsecured HTTP connection.
For this, I used AWS Certificate Manager (ACM) to provision an SSL/TLS certificate for my domain.
After validating the domain, I attached the certificate to my CloudFront distribution.
This was one of the parts of the project that helped me understand how domains, DNS records, certificates, and cloud infrastructure connect with each other.
Before doing the project, HTTPS felt like something that simply appeared when a website was deployed.
After configuring it myself, I understood the infrastructure behind it much better.
Connecting My Custom Domain
I already had my own domain, so I configured its DNS records to direct traffic toward my CloudFront distribution.
Instead of visitors accessing a CloudFront URL such as:
example.cloudfront.netthey can access my actual portfolio domain.
This small step made the project feel much more like a real production deployment.
It also taught me that owning a domain and deploying a website are separate responsibilities.
The domain identifies where users want to go, while DNS determines where the request should be routed.
Adding CI/CD with GitHub Actions
Initially, updating the website manually would require me to:
- Build the React application.
- Upload the new files to S3.
- Update the CloudFront cache when necessary.
That works, but repeating those steps every time I change my portfolio is inefficient.
So I added a GitHub Actions workflow.
Now my deployment process is closer to:
Push code → GitHub Actions builds the project → Files are uploaded to S3 → CloudFront cache is updated
This was my introduction to CI/CD.
Before building this project, I understood CI/CD mostly as a term used in software development and DevOps.
Seeing my own code automatically deploy after a Git push made the concept much easier to understand.
IAM and AWS Permissions
Another important part of the project was AWS Identity and Access Management.
GitHub Actions needs permission to interact with AWS resources.
Instead of thinking only about whether something "works," I started thinking about:
What permissions does this application actually need?
For example, a deployment workflow may need permission to upload files to a specific S3 bucket and create a CloudFront invalidation.
It should not automatically receive unrestricted access to every AWS service.
This introduced me to the AWS principle of least privilege.
It is something I am continuing to learn and apply as I build more cloud projects.
One Problem I Encountered
One thing I quickly discovered while working with CloudFront was caching.
Sometimes I deployed a new version of my portfolio, but the website still appeared to show the older version.
The S3 bucket already contained the updated files.
The problem was that CloudFront could still have cached copies of the previous files.
Creating a CloudFront invalidation allowed the updated content to be retrieved.
This was a useful learning experience because it showed me that application problems are not always caused by the application code itself.
Sometimes the problem exists somewhere else in the infrastructure.
What This Project Taught Me
This project taught me much more than simply how to host a website.
I gained practical exposure to:
- Static website hosting
- Object storage
- Content delivery networks
- DNS
- HTTPS certificates
- IAM permissions
- CI/CD
- Cloud deployment
- Troubleshooting
- Basic cloud architecture
Most importantly, I started seeing AWS services as pieces of an architecture rather than individual products that I needed to memorize.
S3 stores my files.
CloudFront delivers them.
ACM handles the certificate.
DNS connects my domain.
IAM controls access.
GitHub Actions automates deployment.
When everything is connected, those individual services become a complete system.
What I Would Improve Next
This project is still part of my learning journey.
Some areas I want to explore further include:
- Improving IAM policies using stricter least-privilege permissions
- Adding better monitoring
- Understanding CloudFront caching strategies
- Learning more about AWS security best practices
- Exploring Infrastructure as Code
- Automating more of the infrastructure deployment process
- Monitoring AWS costs and usage
Eventually, I would like to rebuild parts of the infrastructure using tools such as AWS CloudFormation or Terraform so the infrastructure itself can also be managed as code.
Final Thoughts
If you are learning AWS, I recommend building something you personally use.
You do not need to begin with a massive architecture involving dozens of AWS services.
A simple portfolio website can already teach you about storage, networking, security, domains, permissions, automation, and content delivery.
I am still learning cloud engineering, and there are many AWS services I have not explored yet.
But building projects like this has helped me move from simply knowing the names of AWS services to understanding why and when they are used.
For me, that has been one of the most valuable parts of learning AWS.
AWS Services Used: Amazon S3, Amazon CloudFront, AWS Certificate Manager, AWS Identity and Access Management
Other Technologies: React, Vite, GitHub Actions, DNS, Custom Domain
Topics: AWS, Cloud Computing, Beginner AWS, Amazon S3, CloudFront, CI/CD, Cloud Engineering
Enjoyed reading this content? Let the author know!
Your likes, comments, shares, and saves help creators reach more builders.
Loading recommendations
Loading article