TechEazy Consulting

Posted on Sep 1

Deploy Static HTML/CSS Website to AWS S3 with CI/CD (GitHub Actions)

#aws #git #github #s3

🌍 Introduction

If you’re tired of manually uploading files to AWS S3 for hosting your static site, then CI/CD with GitHub Actions is the perfect solution.

In this guide, we’ll set up:

An S3 bucket for static hosting
IAM user with permissions
GitHub secrets for secure credentials
GitHub Actions workflow for auto-deployment

By the end, every time you push code to GitHub → your site updates automatically 🚀

🛠 Step 1️ : Prepare Your Files

Make sure you have your index.html, style.css, images, etc. ready in a folder.
Push your project to a GitHub repository.

🪣 Step 2 : Create an S3 Bucket

Go to AWS Management Console → S3.
Click Create bucket.
Enter a unique bucket name (e.g., portfolio-website).
Uncheck Block all public access if you want the site to be public.
Click Create bucket.

⚙️ Step 3 : Configure Bucket for Static Website Hosting

Open created bucket.
Go to the Properties tab of your bucket.
Scroll to Static website hosting → Edit.
Enable it and set:
- Index document: index.html
- Error document: (optional, e.g., 404.html)
Save changes.

🔓 Step 4 : Public Access Setup

Open the Permissions tab and set a bucket policy:

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

Save changes.
Now the website can be accessed publicly.

👤 Step 5 : Create an IAM User for CI/CD (AWS Console of Your Account)

Click on Users in the left menu.
Click the Add users button.
Enter a username. Click Next.

🔑 Step 6: Set Permissions

Select Attach policies directly → Create policy → JSON option.
For deploying a project to S3, use the following policy:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "s3:PutObject",
        "s3:DeleteObject",
        "s3:ListBucket"
      ],
      "Resource": [
        "arn:aws:s3:::YOUR_BUCKET_NAME",
        "arn:aws:s3:::YOUR_BUCKET_NAME/*"
      ]
    }
  ]
}

Click Next, enter a policy name, and create the policy.
Select created policy for user.

✅ Step 7: Review and Create User

Click Next until you reach the Review page.
Verify the details and click Create user.

🔐 Step 8: Assign Programmatic Access to the User

Click on the newly created user.
Go to the Security credentials tab.
In the Access keys section, click on Create access key.
Follow the steps to create the access key.
Copy the Access Key ID and Secret Access Key.
Download or save them — you won’t be able to see the secret again.
The user is now created and has the assigned permissions.

🔒 Step 9 : Add Secrets in GitHub

Go to your GitHub repo → Settings → Secrets and variables → Actions → New repository secret.
Add these secrets:
- AWS_ACCESS_KEY_ID → your IAM user key
- AWS_SECRET_ACCESS_KEY → your IAM user secret
- AWS_REGION → region of your bucket (e.g., ap-south-1)
- S3_BUCKET_NAME → your bucket name

⚡ Step 10 : Create GitHub Actions Workflow

In your project, create folder/file:

.github/workflows/deploy.yml

name: Deploy Website to S3

on:
  push:
    branches:
      - master

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

      - 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: ${{ secrets.AWS_REGION }}

      - name: Sync files to S3
        run: aws s3 sync . s3://${{ secrets.S3_BUCKET_NAME }} --delete

🚀 Step 11 : Deploy Automatically

Commit and push your code to main branch.
GitHub Actions will run → upload files to S3 → your website updates automatically 🎉

🌐 Step 12 : Access Your App

Go to S3 → Properties → Static website hosting.
Copy the Bucket website endpoint URL.
Open it in your browser — your HTML + CSS site is live and auto-deployed 🚀

🎯 Conclusion

With this setup, you now have a CI/CD pipeline that deploys your static site to AWS S3 automatically whenever you push changes to GitHub.

✅ No more manual uploads.
✅ Faster deployments.
✅ Professional workflow like modern DevOps teams.

✅ Next Steps

🚀 Be interview-ready in the era of AI & Cloud — start your DevOps journey today!

💡 YouTube won’t get you a job. Real projects + real internship certificate will.

🔥 AI is reshaping jobs. Don’t watch it happen, be part of it with DevOps & Cloud skills.

🎯 ₹2000/month today = Dream job tomorrow. Secure your spot now.

⏳ Every month you wait, Cloud + AI jobs are being filled. Don’t miss out!

🌐 DevOps + AWS + AI = The skillset every recruiter is hunting for in 2025.

DEV Community