Deploy Your Portfolio Website to AWS S3 using GitHub Actions: A Complete Guide

In this tutorial, we'll walk through deploying a portfolio website to AWS S3 using GitHub Actions for continuous deployment. We'll use real screenshots from an actual implementation to guide you through each step.

Prerequisites

• A GitHub account

• An AWS account

• A static website (HTML, CSS, JS files)

• Basic understanding of Git commands

Step 1: Prepare Your Repository

Your repository structure should look like this:

As shown in the screenshot, you should have:

Portfolio/
├── .github/
├── images/
├── logos/
├── .vscode/
├── index.html
├── script.js
├── styles.css
└── cv.pdf

Step 2: Create GitHub Actions Workflow

1. Navigate to .github/workflows and create deploy.yml:

   

Here's the content of your deploy.yml:

name: Deploy to S3

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-south-1

      - name: Deploy to S3
        run: |
          aws s3 sync . s3://${{ secrets.S3_BUCKET }} \
            --exclude ".git/*" \
            --exclude ".github/*" \
            --delete

Step 3: Set Up GitHub Secrets

1. Navigate to your repository settings and find "Secrets and variables":

   

2. Add new repository secrets :

   

3. Configure these required secrets:

• AWS_ACCESS_KEY_ID

• AWS_SECRET_ACCESS_KEY

• S3_BUCKET

  

Step 4: Create and Configure S3 Bucket

1. Create a new S3 bucket from AWS Console:

   

   • Choose a unique bucket name (e.g., "myportfoliowebsitewithcicd")

   • Select your region (ap-south-1)

   • Enable versioning

   • Uncheck "Block all public access" (acknowledge the warning)

   • Click "Create bucket"

2. Enable Static Website Hosting:

   

   

   • Go to bucket Properties

   • Find "Static website hosting"

   • Click "Edit"

   • Choose "Enable"

   • Set index document to "index.html"

   • Save changes

3. Configure Bucket Policy:

   

   

   • Go to bucket Permissions

   • Under "Bucket policy", click "Edit"

   • Add this policy :

    jsonCopy{
        "Version": "2012-10-17",
        "Statement": [
            {
                "Sid": "PublicReadGetObject",
                "Effect": "Allow",
                "Principal": "*",
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::<BUCKET_NAME>/*"
            }
        ]
    }

4. Verify Permissions:

   • Confirm "Block public access" is disabled

   • Verify bucket policy is active

   • Check ACLs are disabled (bucket owner enforced)

Step 5: Deploy and Verify

1. Make a change to your repository (e.g., update README.md)

    bashCopygit add .
    git commit -m "Update website content"
    git push origin main
   

2. Watch the GitHub Actions workflow execute:

   

   • You can see each step running

   • Wait for all steps to complete successfully

3. Check S3 bucket for deployed files:

   

   • All your website files should be synced

   • Check timestamps to confirm recent updates

4. Access your live website:

   

   

   • Go to bucket Properties

   • Scroll to "Static website hosting"

   • Find your website URL in format: http://myportfoliowebsitewithcicd.s3-website.ap-south-1.amazonaws.com

Step 6: Manage Your Website

1. You can manage files through the S3 console.

2. Review bucket properties and configurations.

Best Practices and Additional Settings

1. Set up bucket properties correctly:

• Configure default encryption

• Set up logging if needed

• Configure transfer acceleration if required

2. Review and configure bucket advanced settings:

• Enable versioning if needed

• Configure lifecycle rules

• Set up event notifications

Troubleshooting

If you encounter issues:

1. Check GitHub Actions logs

2. Verify bucket permissions

3. Ensure website hosting is enabled

4. Confirm all secrets are set correctly

5. Validate bucket policy

Conclusion

Your portfolio website is now live and automatically deploys whenever you push changes to your main branch. The website is accessible via the S3 website endpoint, and all assets should load correctly.

Remember to:

• Keep your AWS credentials secure

• Test locally before pushing changes

• Maintain regular backups

• Monitor your S3 usage and costs

• Keep your GitHub Actions workflow updated

Happy deploying! 🚀