Host your website for Free well "Almost "

AWS Cloud ClubAWS Cloud Club
13 min read

Why do I need a Portfolio Website?

In today's digital world, having your own website isn't just a nice extraโ€”it's practically essential. Think about it: when you apply for internships, or your first tech job, what sets you apart? Your projects, your skills, your unique journey! A personal portfolio website is your 24/7 platform to showcase exactly that. It gives recruiters and potential employers a polished, professional image of your work, neatly organized in one place. Forget just telling them about that awesome app you built โ€“ show them!

Plus, building and hosting your own site is an incredible learning curve. You'll get hands-on experience with web technologies, cloud hosting, and maybe even DNS โ€“ skills that look fantastic on any tech resume. Itโ€™s a total win-win: impress employers and boost your practical tech skills.

Host Your Portfolio Website on AWS for Free - Let's Do This!

Let me make one this clear, we will not be able to host dynamic websites using this method (dynamic as in websites which have a backend and need it to work and function) thatโ€™s why i have taken an example of a Portfolio website where all you need is a flashy frontend to showcase what you are capable of.

Also there are multiple ways to do this and achieve the same result like using different services as in LightSail, EC2, or many more. That is the fun part of using AWS they have so many services, you can do things in a limitless different ways and get to the same end point depending on your needs and what restrictions you have set for yourself.

Why AWS Hosting? More Than Just Free!

Sure, "free" is amazing, but why AWS and not anything lese like WordPress or Hostinger?

  • Industry Standard: AWS is an undoubted champion of cloud computing, trusted by companies big and small (like Netflix, Airbnb, Zomato, and countless startups!).This is why using AWS and having it as your strong suite is a good starting point for a killer impression in front of your Employer.

  • Reliability & Scalability: Your site will be hosted on insanely reliable infrastructure. While your portfolio might not need massive scale now, knowing you're using scalable tech is pretty cool standpoint.

  • Professional Polish: Unlike some free options that plaster ads or give you clunky URLs, AWS hosting lets you present a clean, ad-free, professional image. The Free Tier is generous, designed to let you learn and experiment. Adding a custom Domain will make it a clean image.


So what do i need?

Before we jump into the AWS console, let's make sure you have these things ready:

  1. AWS Account: Well obviously you need an AWS account to access the vast variety of tools and services which will be available in your hand. Make an account and check out all the free tools included in the Free tier of AWS and imagine all the cool things you can make with it.

  2. Your Portfolio Files: o obviously you need something to be hosted may it be your portfolio or anything else. Gather all your static website files. This means your HTML files, CSS stylesheets, JavaScript code, images, fonts, etc.

    • What's "Static"? These are files the browser can understand directly without needing a backend server to process code (like PHP, Python/Django, Node.js on the server). If you built your site with plain HTML/CSS/JS, or even used a framework like React/Vue/Angular and built the static output files, you're good to go!

    • Must-have: index.html โ€“ this will be your homepage.

    • Nice-to-have: error.html โ€“ a custom page for when someone tries to visit a page that doesn't exist. Looks much better than a generic browser error!

  3. (Highly Recommended) Custom Domain: Want YourName.com? It looks way more professional! Grab a domain name from registrars like GoDaddy, Namecheap, Google Domains, or you can even register one directly through AWS Route 53. While optional, we'll show you how to link it up!

    Pro Tip - You can get a free custom domain for 1 year by using Github Student Developer Plan (something like ayushman.me)

Phase 1: Getting Your Website Online with AWS S3 (The Foundation)

Why Do This? Amazon S3 (Simple Storage Service) is like a massive, super-reliable hard drive in the cloud. We can configure it to serve your website files directly to visitors. Itโ€™s simple, durable, and the perfect starting point.

it is not necessary that you just have to store these files in this bucket, you can store anything you want be it for any other project like data for Machine Learning or another things as you please.

  • Step 1: Set Up Your S3 Bucket (Your Website's Cloud Folder)

    • Log into your AWS Management Console. Use the search bar at the top and type "S3". Click the S3 service link.

    • Look for the big orange Create bucket button and click it.

    • Bucket name: This needs to be globally unique (no one else in the world can have the same name!). Try something like yourname-portfolio-website-2025. Get creative!

    • AWS Region: Choose a region physically close to you or where most of your visitors might be (e.g., ap-south-1 for Mumbai/India). This helps with speed slightly.

    • Block Public Access settings: Okay, pay attention here! By default, AWS locks buckets down TIGHT for security. But website files need to be public. So, UNCHECK the main box labelled Block *all* public access. You'll see warnings โ€“ read them. We're making a specific exception only for this website use case, and we'll add fine-grained permissions using a policy later. Acknowledge the warning.

    • Leave everything else default and click Create bucket.

  • Step 2: Turn On Static Website Hosting

    • Click on the name of the bucket you just created to go inside it.

    • Click the Properties tab.

    • Scroll down until you find the Static website hosting section (it might be near the bottom). Click Edit.

    • Select Enable.

    • Make sure Hosting type is Host a static website.

    • Index document: Enter index.html.

    • Error document: Enter error.html.

    • Click Save changes.

    • Action Required: Look closely in this section now! Copy the Bucket website endpoint URL. It looks like http://your-bucket-name.s3-website.your-region.amazonaws.com. Save this link!

  • Step 3: Allow Everyone to See Your Website

    • Click the Permissions tab for your bucket.

    • Scroll down to Bucket policy and click Edit.

    • Why? We unchecked the main "Block Public Access," but we still need to explicitly tell S3 who can access what. This policy grants read-only access (s3:GetObject) to anyone (Principal: "*") for all files (Resource: ".../*") within your bucket.

    • Paste this JSON policy. โš ๏ธ Careful! Replace your-bucket-name with YOUR bucket's actual name!

      JSON

        {
          "Version": "2012-10-17",
          "Statement": [
            {
              "Sid": "PublicReadGetObject",
              "Effect": "Allow",
              "Principal": "*",
              "Action": "s3:GetObject",
              "Resource": "arn:aws:s3:::your-bucket-name/*"
            }
          ]
        }
      
    • Click Save changes. You should now see a little red "Publicly accessible" tag โ€“ perfect!

  • Step 4: Upload Your Files (The Main Event!)

    • Click the Objects tab.

    • Click the Upload button.

    • You can drag and drop your entire website folder here (it keeps the structure!), or use "Add files" / "Add folder". Make sure index.html and error.html end up in the main (root) level of the bucket.

    • Click Upload and watch your files beam up to the cloud!

  • Step 5: Check It Out!

    • Grab that Bucket website endpoint URL you saved earlier and paste it into your browser.

    • Did it load? Click your links! Check your images! Try typing a nonsense address after the URL (like /blahblah) to see if your error.html shows up.

    • Congrats! Your portfolio is officially LIVE on AWS S3! High five! ๐Ÿ™Œ BUT... notice the URL is long and it says "Not Secure" (HTTP). We need to fix that.

Phase 2: Making Your Website Fast and Secure with CloudFront.

Why Do This? CloudFront is AWS's Content Delivery Network (CDN). Think of it like having mini-copies of your website stored in data centers all over the world. Visitors get served from the closest location, making your site load super fast. Plus, it gives us that crucial HTTPS security padlock for free!

  • Step 6: Grab a Free SSL Certificate (Only if Using a Custom Domain!) (optional)

    • If you plan to use yourdomain.com, you need an SSL certificate first. If not, skip ahead!

    • Go to AWS Certificate Manager (ACM). Crucial: Make sure you are in the US East (N. Virginia) us-east-1 region (use the dropdown in the top right). CloudFront needs certificates from this specific region.

    • Click Request a certificate, choose Request a public certificate.

    • Enter your domain name(s) (like yourdomain.com and www.yourdomain.com).

    • Choose DNS validation. ACM will give you a special CNAME record to add to your DNS settings (easy if using Route 53, instructions provided for others). This proves you own the domain. Wait for the status to become "Issued".

  • Step 7: Set Up CloudFront Distribution (The CDN!)

    • Search for and go to the CloudFront service. Click Create distribution.

    • Origin domain: Click the box โ€“ wait a second โ€“ and select your S3 bucket from the dropdown list that appears. (It should not be the s3-website... URL).

    • Origin access: Choose Origin access control settings (recommended). Click Create control setting (defaults are usually fine), then Create. Think of this as CloudFront getting a special, secure keycard to access your S3 bucket contents.

    • Viewer protocol policy: Definitely select Redirect HTTP to HTTPS. Security first!

    • Alternate domain names (CNAMEs): If you did Step 6, enter your custom domain(s) here.

    • Custom SSL certificate: If you added CNAMEs, select your shiny, newly issued ACM certificate from the dropdown.

    • Default root object: Enter index.html.

    • Click Create distribution.

    • Heads Up: This step isn't instant. CloudFront needs to spread your settings globally. It can take 5-15 minutes. Perfect time for that chai break! Note down the Distribution domain name (like d123xyz.cloudfront.net). This is the address where your website will be served if you are not using a custom domain which you bought.

  • Step 8: Tighten Security on Your S3 Bucket

    • While CloudFront deploys, let's secure S3. Go back to your S3 bucket -> Permissions -> Bucket policy -> Edit.

    • DELETE the old public policy. We don't need it anymore!

    • Add the NEW policy: CloudFront makes this easy. Go to your CloudFront distribution -> Origins tab -> Select your S3 origin -> click Edit. Scroll down and find the "Bucket policy" section. There should be a button like Copy policy. Click it! Paste that exact policy into your S3 bucket policy editor. This policy specifically allows only your CloudFront distribution to get objects.

    • Click Save changes. Your bucket is now private to the world but open to CloudFront. Perfect!

  • Step 9: Check Your CloudFront URL

    • Once your CloudFront distribution status says "Enabled" or "Deployed", copy the Distribution domain name (e.g., https://d123xyz.cloudfront.net) and paste it into your browser.

    • Did it load? Is there a padlock icon? Is it FAST?

    • Proof Positive: I used these exact steps to put up a simple placeholder site. Check it out: https://d2y4yxpg9vx9c6.cloudfront.net/. See the HTTPS? Feel the speed? That's CloudFront!

      You can even check out my custom domain website at ayushman.me

  • (Checkpoint!) You've now got a secure, globally accelerated website! High-tech stuff!

(Optional) Phase 3: Using Your Custom Domain with Route 53 (The Pro Touch!)

Why Do This? Nothing beats having your own YourName.com. It's memorable, professional, and builds your brand. AWS Route 53 is the service that connects domain names to AWS resources.

Pro Tip!: If you are a student and registered in GitHub Student Developer Program, you can get domains for free using it by accessing the dashboard and going to namecheap or Name.com for easy access to domains for 1-1 year each for free without using any Payment Provider or Cards.

  • Step 10: Point Your Domain to CloudFront (Connecting the Dots)

    • (Requires: Your domain registered, set up as a 'Hosted Zone' in Route 53, and the ACM certificate from Step 6 validated).

    • Go to the Route 53 service. Click Hosted zones and choose your domain.

    • Click Create record.

    • Record name: Leave it blank for the root domain (yourdomain.com) or type www for the www.yourdomain.com subdomain.

    • Record type: Make sure it's A.

    • Toggle Alias ON. This is an AWS superpower โ€“ it lets you point directly to AWS resources.

    • Route traffic to: Choose Alias to CloudFront distribution. In the second box, select your CloudFront distribution (the d123xyz... one).

    • Click Create records. (Consider creating one for the root AND one for www).

  • Step 11: Wait for DNS Magic... Then Test!

    • Pro Tip!: So personally what i have done is i have used Cloudflare for my DNS and Protection provider cause i trust their service more than AWS, its not like they are bad but it is better to have the best as your DNS and not compromise on Security cause internet is filled with crawlers and is brutal if you are left exposed on the internet for prolonged amount of Time. Also Cloudflare is free so why not use it and its good to know the industry leaderโ€™s tech as it will leave you with an upper hand in your Future Quests

    • DNS (the internet's phonebook) needs a little time to update globally. It can take minutes or sometimes longer (usually fast with Route 53).

    • Open your browser and type in https://yourdomain.com (or https://www.yourdomain.com).

    • Drumroll... It should load your beautiful, secure website via your very own custom domain! SUCCESS!


Costs (or Actually, No Costs!) ๐Ÿ’ธ

Okay, let's talk money. Is this really free?

  • Amazon S3: 5GB storage free for 12 months. Generous request limits free for 12 months. After that, storage is incredibly cheap.

  • CloudFront: 1TB of data transfer OUT per month FREE, FOREVER! Plus 10 million HTTP/S requests free per month. This is HUGE! For almost any portfolio, you won't pay a paisa for CloudFront traffic.

  • ACM: SSL certificates via ACM are TOTALLY FREE!

  • Route 53: This is usually the only potential cost if you use a custom domain. Each "Hosted Zone" costs about $0.50 USD per month (roughly โ‚น40-โ‚น45). DNS queries are charged but are typically negligible for a portfolio site. (Domain registration itself has an annual fee, wherever you bought it).

The Bottom Line: That example site I showed (https://ayushman.me/)? Hosting it costs me โ‚น0. Because I'm using CloudFront and staying within the S3 free tier (easy for static files), the only potential cost is the tiny Route 53 fee if I attach a custom domain. For most students, this setup is genuinely FREE or costs less than a fancy coffee per month.

Welcome to the Learners Club! ๐Ÿฅ‚

Congratulations! ๐ŸŽ‰ You didn't just build a website; you even deployed it on AWS using industry-standard services. You tackled S3 storage, IAM policies (Indirectly!), static hosting, CDNs with CloudFront, HTTPS security with ACM, and maybe even DNS with Route 53. That's a great starting point to build your learnings on.

Now that you have this power, think bigger:

  • Host documentation for your coding projects.

  • Deploy the static output of your React/Vue/Angular apps.

  • Create landing pages for hackathon projects.

  • Automate It: Tired of uploading files manually? Explore AWS CodePipeline or GitHub Actions to automatically update your site whenever you push code changes!

  • Add Dynamic Features: Need a contact form? Learn about AWS Lambda (serverless functions) and API Gateway to add backend logic without managing servers.

Why not start using this to share your website far and wide now? Maybe drop it on LinkedIn and showcase yourself to reach potential and future recruiters. Flex it in front of your friends or Girl-Friends (if you have any ๐Ÿ˜ข).

Did you build your portfolio using this guide? Drop the link in the comments below! What cool AWS service are you excited to explore next? Let me know! Thank you for reading till the end ! ๐Ÿ™‡โ€โ™‚๏ธ

0
Subscribe to my newsletter

Read articles from AWS Cloud Club directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

AWS Cloud Club
AWS Cloud Club