DEV Community: Khaja Sabik Ahmed

Host Your Portfolio on Amazon S3: A Beginner's Guide to Static Website Hosting

Khaja Sabik Ahmed — Tue, 18 Nov 2025 15:08:47 +0000

Discover how to deploy your portfolio website using Amazon S3 static hosting — starting simple as a beginner, then scaling into a production-grade solution that can even support dynamic features as you grow.

What is Amazon S3?

Amazon Simple Storage Service (S3) is a scalable object storage service that allows you to store and retrieve data from anywhere on the web. Think of it like Google Drive or Dropbox, but programmable and highly scalable — perfect for hosting your portfolio website.

Key Features

Durability: 99.999999999% (yes, eleven 9s!) designed to protect against data loss across multiple facilities
Availability: 99.99% uptime ensures your portfolio is always online when opportunities knock
Scalability: Store virtually unlimited data without worrying about capacity limits
Use Cases: Website hosting, backups, application data storage, and much more

Why choose S3 for your portfolio? It's cost-effective (often just pennies per month), reliable, and gives you hands-on experience with cloud services that employers love to see on resumes.

Step 1: Access the AWS Console

Getting started is straightforward:

Navigate to the AWS Management Console
In the services search bar, type S3
Click S3 to open the service

Step 2: Create an S3 Bucket

Your bucket is the container for your website files — think of it as your website's home on AWS:

Click Create bucket
Configure the basic settings:
- Bucket name: Must be globally unique across all AWS accounts (try something like yourname-portfolio-2024)
- AWS Region: Choose ap-southeast-1 or your preferred region (pick one closest to your target audience for faster loading)
Under Object Ownership, keep Block Public Access enabled for now (we'll change this later)
Leave other settings as default
Click Create bucket

Step 3: Upload Your Portfolio Files

Now it's time to add your website content:

Click on your newly created bucket
Click Upload
Add your files by either:
- Dragging and dropping your portfolio files directly, or
- Clicking Add files to browse your computer

Pro tip: Make sure your main page is named index.html — this is the file that loads when visitors arrive at your site.

Step 4: Enable Static Website Hosting

This is where the magic happens — let's transform your bucket into a web server:

Navigate to the Properties tab of your bucket
Scroll down to Static website hosting and click Edit (it's disabled by default)
Enable Static website hosting with these settings:
- Hosting type: Static website hosting
- Index document: index.html (or your main HTML file name)
- Error document: error.html (optional but recommended for a custom 404 page)

Click Save changes

Take note of your Bucket website endpoint, which will look something like:

http://your-bucket-name.s3-website-us-east-1.amazonaws.com

Your S3 bucket is now a simple web server! 🌐 However, it's not publicly accessible yet — let's fix that next.

Step 5: Configure Public Access Permissions

Time to make your website accessible to the world:

Go to the Permissions tab
Scroll to Block public access and click Edit
Uncheck all four boxes:
- Block all public access
- Block public access granted through new ACLs
- Block public access granted through any ACLs
- Block public access granted through new bucket policies
Acknowledge the warning by checking the confirmation box
Click Save changes

Don't worry about the warning — this is completely normal for website hosting. You're intentionally making your site public so visitors can see it.

Step 6: Apply Bucket Policy for Public Read Access

Now we need to create a policy that explicitly allows anyone to view your website files:

In the Permissions tab, scroll to Bucket policy and click Edit
Paste the following policy, replacing your-bucket-name with your actual bucket name:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowPublicReadForWebsiteHosting",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}

Click Save changes

Policy Explanation

Effect: Grants read access to your files
Principal: Everyone (represented by *) — meaning anyone on the internet
Action: Only read operations (s3:GetObject) — visitors can view but not modify your files
Resource: All files within the bucket (indicated by /*)

This policy is secure because it only allows reading, not writing or deleting.

Step 7: Test Your Website

The moment of truth — let's see your portfolio live:

Return to the Properties tab
Scroll to Static website hosting
Click the Bucket website endpoint URL to view your live site

Congratulations! Your portfolio is now hosted on AWS S3. 🎉

Error page looking like this ☠️ — Don't forget to create a custom error.html file to make even your 404 page look professional!

Best Practices for S3 Hosting

Follow these recommendations to maintain a professional, reliable portfolio:

Domain alignment: If you plan to use a custom domain (like www.yourname.com), name your bucket to match it for easier DNS setup
DNS and CDN: Use Route 53 for DNS management and CloudFront for HTTPS support and global content delivery — this adds security and speed
Version control: Enable Versioning in your bucket settings to protect against accidental file deletion or overwrites
Local backups: Regularly back up your files to a local machine for extra safety
Efficient updates: Use the AWS CLI for quick syncing of file updates instead of manual uploads

For more detailed information, check out the AWS Official Documentation on Website Hosting.

Optional Enhancements

Ready to take your portfolio to the next level? Consider these upgrades:

Custom Domain & HTTPS: Add a CloudFront distribution and request an SSL certificate from AWS Certificate Manager for secure, professional hosting with that coveted green padlock 🔒
Dynamic Features: Integrate AWS Lambda with SES for contact forms or backend processing capabilities — turn your static site into something more interactive
Analytics: Track visitor behavior and site performance using CloudWatch dashboards to understand who's viewing your work
CI/CD Pipeline: Set up GitHub Actions to automatically deploy changes whenever you push to your repository

What You've Accomplished

Your portfolio website is now live on one of the world's most reliable cloud platforms. You've learned:

✅ How to create and configure an S3 bucket

✅ How to enable static website hosting

✅ How to manage public access and bucket policies

✅ Best practices for maintaining your site

As your needs grow, you can easily scale this simple setup into a production-grade solution with enhanced security, performance, and functionality. This is just the beginning of your cloud journey!

What's next? Share your portfolio URL in the comments below — I'd love to see what you've built! 🚀

Found this helpful? Don't forget to bookmark this guide for future reference and share it with fellow developers starting their cloud journey!

Static Website Hosting with Amazon S3 and CloudFront

Khaja Sabik Ahmed — Mon, 27 Jan 2025 04:27:20 +0000

Introduction

Discover how to build a high-performance web hosting architecture with Amazon Web Services (AWS). This guide explores the integration of Amazon EC2, CloudFront, and S3, offering a robust and scalable solution for hosting websites. By using EC2 as the foundation for your static website, CloudFront for global content delivery, and S3 for secure multimedia storage, you'll achieve lightning-fast performance and seamless user experiences.

Optimize your website for security, scalability, and cost-efficiency with AWS's powerful tools. Enhance global reach, improve content accessibility, and deliver a captivating digital experience that resonates with users worldwide. Unlock the potential of AWS and elevate your web hosting to the next level.
Let's dive in and elevate your web presence to new heights.

Creating an S3 Bucket:

Objective: Create an S3 bucket with unique naming and configure it for hosting video content.

Log in to your AWS Management Console and navigate to the S3 service.
Click on "Create bucket" and enter a unique name for your bucket.
AWS Region in US East (N. Virginia) us-east-1.
Checked the option for "Allow all public access" to restrict public access by default.
Create your bucket.

Upload your video content as S3 bucket objects.
Open the bucket policy and configure specific permissions for website access only.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowMyWebsiteAccess",
            "Effect": "Deny",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:PutObjectAcl"
            ],
            "Resource": "arn:aws:s3:::your-bucket-name/*",
            "Condition": {
                "StringNotLike": {
                    "aws:Referer": [
                        "http://your-website-dns-name/",
                        "https://your-website-dns-name/"
                    ]}
            }
        }

Setting Up EC2 Instance:

Objective: Host a static website on an EC2 instance and configure Apache server for content delivery.

Log in to your AWS Management Console.
Navigate to the EC2 dashboard.
Click on "Launch Instance" to start the instance creation wizard.
Choose your desired Amazon Machine Image (AMI), instance type, configuration, and storage options.
Configure security groups to allow SSH (port 22) and HTTP (port 80) access if necessary.

Connect to the Instance:

Retrieve the public IP address or DNS name of your EC2 instance from the EC2 dashboard. Use SSH (Secure Shell) to connect to the instance. Configure Apache to serve content from the /var/www/html directory, which is the default document root.

ssh -i your-key.pem ec2-user@your-instance-public-ip
sudo yum update
sudo yum install -y httpd
sudo systemctl enable httpd
sudo systemctl start httpd

Configure Apache to serve content from the /var/www/html directory, which is the default document root. Then, replace the apache default html file by a static web hosting site where your content is shown.

<!DOCTYPE html>
<html>
    <body style="text-align: center">
        <h1 style="color: green"> AWS S3 Bucket</h1>
             <p>Video on my Webpage</p>
         <video width="500px" height="500px" controls="controls">
        <source src="https://d2tt42f93n1936.cloudfront.net/Disney.mp4" />
       </video>
    </body>
</html>

Modify Security Group Rules for EC2 Instance:

To enhance security and restrict access to your EC2 instance only to requests originating from CloudFront, you can adjust the inbound and outbound rules of the instance's security group.

Log in to your AWS Management Console and navigate to the VPC dashboard.
Click on "Prefix Lists" under the "Security" section.
Identify the prefix list named amazonaws.global.cloudfront.origin-facing. This prefix list contains the IP ranges used by CloudFront to access your resources.
Note the CIDR ranges listed within the prefix list.

Now, navigate to the EC2 dashboard and select your EC2 instance.
Click on the security group associated with your EC2 instance to modify its rules.
Adjust the inbound rules to allow traffic on ports 80 (HTTP) and 443 (HTTPS) only from the CIDR ranges specified in the amazonaws.global.cloudfront.origin-facing prefix list. Example inbound rule: Type: HTTP (80) Source: Custom - Add the CIDR ranges from the CloudFront prefix list

By configuring the security group in this manner, you ensure that only requests originating from CloudFront's IP ranges are allowed access to your EC2 instance on ports 80 and 443. This helps to enhance the security posture of your infrastructure by restricting access to trusted sources.

Configuring CloudFront Distribution:

Objective: Distribute website content globally and enhance performance using CloudFront.

Navigate to the CloudFront service in the AWS Management Console.
Create a CloudFront distribution for your EC2 instance.
Paste your EC2 public DNS in Origin domain, Protocol- HTTP only.
Next, Cache key and origin requests create a cache policy with any name as you wish and rest of the things remain as default.
In Web Application Firewall (WAF), select Do not enable security protections, leave the others things to remain the same.
Hit Create Distribution to obtain the CloudFront distribution URL for your website. Wait couple of minutes to deploying all the thing in the distribution and after completing go to the Distribution domain name link. If you go through the Public EC2 DNS-http://ec2-18-234-1*-1*.compute-1.amazonaws.com/ then you will get an error message “This site can’t reached”

If you use the CloudFront- https://d1ddraxwh8la3b.cloudfront.net link then only it will show you the website. This is the thing we have done in the security group.

Conclusion

Amazon Web Services (AWS) empowers you to build seamless, scalable, and secure web hosting architectures that captivate audiences worldwide. By leveraging Amazon EC2 for hosting, Amazon S3 for secure multimedia storage, and Amazon CloudFront for global content delivery, you can ensure fast, reliable, and engaging user experiences.

With AWS’s advanced capabilities in security, scalability, and performance optimization, you're equipped to protect your infrastructure, enhance accessibility, and connect meaningfully with your audience. Whether it's delivering dynamic web pages, engaging videos, or a flawless cloud hosting solution, AWS provides the tools to make your web presence stand out.

Embrace the full potential of AWS cloud hosting and take your digital footprint to the next level. The journey to innovation and excellence starts here—let your website shine and make a lasting global impact. Together, let's continue to innovate, excel, and build extraordinary web experiences.