DEV Community

TechEazy Consulting
TechEazy Consulting

Posted on

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/*" } ] }
Enter fullscreen mode Exit fullscreen mode
  • 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/*" ] } ] }
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

🚀 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.

👉 Register now at TechEazy Consulting

Top comments (0)