DEV Community

Cover image for Host Your Portfolio on Amazon S3: A Beginner's Guide to Static Website Hosting
Khaja Sabik Ahmed
Khaja Sabik Ahmed

Posted on

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

#awscommunity #s3 #portfolio #cloudcomputing

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:

  1. Navigate to the AWS Management Console
  2. In the services search bar, type S3
  3. 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:

  1. Click Create bucket
  2. 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)
  3. Under Object Ownership, keep Block Public Access enabled for now (we'll change this later)
  4. Leave other settings as default
  5. Click Create bucket



Step 3: Upload Your Portfolio Files

Now it's time to add your website content:

  1. Click on your newly created bucket
  2. Click Upload
  3. 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:

  1. Navigate to the Properties tab of your bucket
  2. Scroll down to Static website hosting and click Edit (it's disabled by default)
  3. 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)

  1. 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:

  1. Go to the Permissions tab
  2. Scroll to Block public access and click Edit
  3. 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
  4. Acknowledge the warning by checking the confirmation box
  5. 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:

  1. In the Permissions tab, scroll to Bucket policy and click Edit
  2. 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/*"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

  1. 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:

  1. Return to the Properties tab
  2. Scroll to Static website hosting
  3. 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!

Top comments (0)