jb_
← all writing

Building and Hosting Your Own Portfolio Website: A Complete Guide

July 2025Web Development15 min read

Update, October 2026: I've since redesigned the site with a new look, but the hosting setup in this guide hasn't changed. It still runs on S3, CloudFront and Cloudflare.

Introduction

Hey there! If you're reading this on my portfolio website, you might be wondering how I built it and got it online. Well, I'm going to walk you through the entire process from writing the first line of code to making it accessible to the world. Whether you're transitioning careers like me or just want to showcase your work, having your own website is incredibly valuable - and it's easier (and cheaper) than you might think!

Why Build Your Own Portfolio?

When I started my transition from insurance to IT, I knew I needed a way to showcase my technical skills beyond just listing them on a resume. Building my own website from scratch serves multiple purposes:

The Tech Stack I Chose

For this project, I kept things simple but modern:

Step 1: Planning the Website

Before writing any code, I sketched out what I wanted:

Pro tip: Don't overthink this stage. Your website will evolve as you build it!

Step 2: Building the Website

I started with a basic HTML structure and gradually added features:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Name - Portfolio</title>
</head>
<body>
    <!-- Start simple, then add complexity -->
</body>
</html>

The key was building incrementally:

  1. First, get the content on the page
  2. Then make it look good with CSS
  3. Finally, add interactivity with JavaScript

For the design, I went with a modern glassmorphism aesthetic - those frosted glass effects you see everywhere. It's trendy but also timeless enough that it won't look dated in a year.

Step 3: Purchasing a Domain

I purchased my domain through Porkbun for just $10. Here's why I chose them:

When choosing a domain:

Step 4: Setting Up Cloudflare for DNS

Since I was already using Cloudflare for my Nextcloud setup, it made perfect sense to use it for my portfolio site too. Cloudflare offers:

Here's how I connected everything:

  1. Add Your Domain to Cloudflare
    • Sign up for a free Cloudflare account
    • Add your domain
    • Cloudflare will scan existing DNS records
  2. Update Nameservers at Porkbun
    • Cloudflare will give you 2 nameservers
    • Log into Porkbun
    • Go to Domain Management
    • Update the nameservers to Cloudflare's
    • Takes about 5-30 minutes to propagate (mine was super quick!)
  3. Configure DNS Records in Cloudflare
    • Add a CNAME record pointing to your CloudFront distribution
    • Example: yourdomain.com → d1234567890.cloudfront.net
    • Set it to "Proxied" for Cloudflare's benefits
    • Add another for www if you want

Step 5: Setting Up AWS S3 for Static Hosting

This is where the magic happens - and where you can save serious money. AWS offers a Free Tier that includes:

Here's the process:

  1. Create an S3 Bucket
    • Name it something descriptive (doesn't have to match your domain)
    • Choose a region close to your target audience
    • Keep "Block all public access" checked for now (we'll use CloudFront)
  2. Upload Your Files
    • Upload your HTML, CSS, JavaScript, and any images
    • Make sure your main file is named index.html
    • Organize files in folders (css/, js/, images/) for cleanliness
  3. Configure Bucket for CloudFront Only
    • Don't enable static website hosting on S3
    • Keep the bucket private
    • CloudFront will access it securely

Step 6: Setting Up CloudFront

CloudFront is AWS's CDN service that will:

  1. Create a Distribution
    • Origin domain: Select your S3 bucket
    • Origin access: Create new Origin Access Identity (OAI)
    • Update bucket policy: Yes, let CloudFront do this
    • Viewer protocol policy: Redirect HTTP to HTTPS
    • Default root object: index.html
  2. Configure Caching
    • I set mine to cache for 24 hours
    • This reduces costs and improves performance
    • You can invalidate the cache when you update your site
  3. SSL Certificate
    • Since we're using Cloudflare, we can use "CloudFront Default Certificate"
    • Cloudflare handles SSL for visitors

Step 7: Connecting Everything Together

The flow looks like this:

  1. Visitor types your domain
  2. Cloudflare DNS resolves to CloudFront
  3. CloudFront serves content from S3
  4. Cloudflare provides SSL and security

Security Considerations

Here are some things I did to keep my site secure:

Costs Breakdown

Here's what I actually pay:

ServiceCost
Domain (Porkbun)$10/year
Cloudflare$0 (free tier)
S3 Storage$0.00 (free tier)
CloudFront$0.00–$0.50/month
Total< $1.50/month

Lessons Learned

  1. Start Simple: My first version was much simpler. I added features over time.
  2. Cache Invalidation: Remember to invalidate CloudFront cache after updates (costs $0.005 per path)
  3. Image Optimization: Compress your images - they're usually the biggest files
  4. Test Locally: Always test your changes locally before uploading
  5. Version Control: Use Git, even for a simple site. GitHub offers free private repos.
  6. Cloudflare Page Rules: Use them to force HTTPS and handle www redirects

Conclusion

Building and hosting your own website is an incredibly rewarding experience. Not only do you end up with a professional online presence, but you also learn valuable skills in the process. The best part? With AWS's free tier and Cloudflare's free plan, you can do all of this for less than the cost of a coffee per month.

Don't wait for the "perfect" time or until you know "enough" - start building today. Your future self (and potential employers) will thank you!