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

---

## 🌍 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:

```json
{
  "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:

```json
{
  "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`

```yaml
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.  

👉 Register now at [TechEazy Consulting](https://www.techeazyconsulting.com)
---