Skip to main content

πŸš€ Deploy a Static Portfolio Website to AWS S3 Using GitHub Actions | Complete CI/CD Project for Beginners

If you are learning DevOps, AWS, GitHub, CI/CD, Cloud, or Automation, you don't need to start with a very complicated project.

Updated 30 min readMarkdown
πŸš€ Deploy a Static Portfolio Website to AWS S3 Using GitHub Actions | Complete CI/CD Project for Beginners

A simple static website can teach you some of the most important DevOps concepts:

  • Git and GitHub

  • AWS IAM

  • Amazon S3

  • AWS CLI

  • GitHub Actions

  • GitHub Secrets

  • CI/CD

  • Static Website Hosting

  • Automated Deployment

In this project, I built a personal portfolio website using HTML, CSS, and JavaScript, stored the source code on GitHub, created an Amazon S3 bucket for hosting, and configured GitHub Actions to automatically deploy the website to S3 whenever I push new changes.

The final workflow looks like this:

Developer
    |
    | git push
    ↓
GitHub Repository
    |
    ↓
GitHub Actions
    |
    ↓
Ubuntu Runner
    |
    ↓
AWS Authentication
    |
    ↓
AWS S3
    |
    ↓
Live Portfolio Website

The main idea is simple:

Write code β†’ Push to GitHub β†’ GitHub Actions runs automatically β†’ Website is updated on AWS S3.

This project is based on the Git & GitHub for DevOps workshop, starting from approximately 02:54:02.

πŸŽ₯ Workshop Reference:

https://www.youtube.com/live/DyqAdz96mok?si=yTWM7TqpWvtRsDTU&t=10442


πŸ“Œ Project Overview

The goal of this project is to deploy a static portfolio website to an Amazon S3 bucket and automate the deployment using GitHub Actions.

The portfolio is built with:

HTML
CSS
JavaScript

The source code is stored in GitHub.

AWS S3 is used to host the static website.

GitHub Actions is used to automate deployment.


🎯 What We Are Building

Our final architecture looks like this:

                 GitHub Repository
                        |
                        |
                    git push
                        |
                        ↓
                GitHub Actions
                        |
                        ↓
                Ubuntu Runner
                        |
                AWS Authentication
                        |
                        ↓
                  AWS S3 Bucket
                        |
                        ↓
              Static Website Hosting
                        |
                        ↓
              🌐 Live Portfolio

Whenever we make a change to the website:

Change Code
    ↓
git add .
    ↓
git commit
    ↓
git push
    ↓
GitHub Actions
    ↓
AWS S3
    ↓
Website Updated

This eliminates the need to manually upload website files to S3 every time.


πŸ› οΈ Technologies Used

This project uses:

Technology Purpose
HTML5 Website structure
CSS3 Website styling
JavaScript Website functionality
Git Version control
GitHub Source code hosting
GitHub Actions CI/CD automation
AWS IAM Authentication and permissions
Amazon S3 Static website hosting
AWS CLI Uploading files to S3

πŸ“‚ My GitHub Repository

The complete project source code is available here:

https://github.com/hritikranjan1/hritik-portfolio1

The repository contains the main website files along with the GitHub Actions workflow.

The current repository structure includes:

hritik-portfolio1/
β”‚
β”œβ”€β”€ .github/
β”‚   └── workflows/
β”‚
β”œβ”€β”€ css/
β”‚   └── style.css
β”‚
β”œβ”€β”€ js/
β”‚   └── script.js
β”‚
β”œβ”€β”€ index.html
β”‚
└── README.md

The GitHub repository confirms the presence of the .github/workflows, css, js, index.html, and README.md structure.


🌐 Final Live Website

The final portfolio is hosted on Amazon S3.

You can access it here:

http://hritik-portfolio1.s3-website-us-east-1.amazonaws.com

The website is a static portfolio built using:

HTML
CSS
JavaScript

πŸ€” Why Use Amazon S3 for a Static Website?

Amazon S3 is an object storage service provided by AWS.

Although S3 is commonly used to store files, it can also serve static website content.

Static websites generally contain files such as:

index.html
style.css
script.js
images
fonts

For a simple portfolio website, we don't need a traditional backend server.

Instead:

Browser
   |
   ↓
S3
   |
   β”œβ”€β”€ index.html
   β”œβ”€β”€ CSS
   β”œβ”€β”€ JavaScript
   └── Images

S3 can serve these files to users.


🧠 What is Static Website Hosting?

A static website does not require server-side application processing.

For example:

HTML
CSS
JavaScript
Images

are delivered directly to the browser.

Examples of static websites:

  • Portfolio

  • Resume website

  • Documentation

  • Landing page

  • Product information page

  • Simple business website

For this project, our portfolio is a static website.


☁️ Why S3 Instead of a Traditional Server?

For a simple static website, using a full EC2 server can be unnecessary.

With S3:

No EC2 server
No operating system management
No web server installation
No manual server deployment

Instead:

Website Files
      ↓
AWS S3
      ↓
Website

This makes S3 a simple option for static content hosting.


πŸ” Step 1 β€” Create an IAM User

Before GitHub Actions can upload files to S3, it needs permission to access AWS.

For this project, we create an IAM user for programmatic access.

IAM stands for:

Identity and Access Management

AWS IAM allows us to control:

  • Who can access AWS

  • What resources they can access

  • What actions they can perform


πŸ‘€ Why Do We Need IAM?

GitHub Actions needs to communicate with AWS.

The workflow needs AWS credentials so it can perform actions such as uploading website files.

The basic flow is:

GitHub Actions
      |
      | AWS Credentials
      ↓
     IAM
      |
      ↓
    S3 Bucket

⚠️ Important Security Rule

Never write AWS credentials directly inside your GitHub workflow.

❌ Don't do this:

aws_access_key_id: AKIAxxxxxxxx
aws_secret_access_key: xxxxxxxxx

If your repository is public, this can expose your credentials.

Instead, use:

GitHub Secrets

We will configure this later.


πŸ“Έ Screenshot 1 β€” IAM User

Screenshot: IAM User Creation

This screenshot shows the IAM user created for the project.

The IAM user is used to provide controlled AWS access for the deployment workflow.


πŸͺ£ Step 2 β€” Create an S3 Bucket

Now we create an S3 bucket.

The bucket name used for this project is:

hritik-portfolio1

The bucket will store the files of our portfolio.

For example:

hritik-portfolio1
β”‚
β”œβ”€β”€ index.html
β”œβ”€β”€ css/
β”œβ”€β”€ js/
└── other assets

🏷️ Why Is the Bucket Name Important?

S3 bucket names must follow AWS naming requirements and are globally unique within the S3 namespace.

For this project, our bucket is:

hritik-portfolio1

πŸ“Έ Screenshot 2 β€” S3 Bucket Creation

Screenshot: S3 Bucket

This screenshot shows the S3 bucket created for hosting the portfolio website.

The bucket acts as the storage location for our static website files.


βš™οΈ Step 3 β€” Configure Static Website Hosting

Creating the bucket is not enough.

We also need to configure it to serve our website as a static website.

The important file is:

index.html

This is the entry point of our portfolio.

The basic structure becomes:

S3 Bucket
    |
    └── index.html
            |
            β”œβ”€β”€ CSS
            β”œβ”€β”€ JavaScript
            └── Other Assets

When a visitor opens the website, the index.html page is served as the main page.


🌐 Step 4 β€” Configure Website Access

For an S3 static website endpoint to serve content publicly, the required bucket/object access configuration must allow the intended website access.

This is an important AWS security concept.

You should avoid making more permissions public than necessary.

For a simple learning project, you may configure public website access as required by S3 static website hosting.

For a production website, consider a more secure architecture such as:

CloudFront
    ↓
S3

instead of directly exposing the S3 website endpoint.


πŸ§‘β€πŸ’» Step 5 β€” Prepare the Portfolio Website

Our portfolio is built using:

HTML
CSS
JavaScript

The main file is:

index.html

CSS:

css/style.css

JavaScript:

js/script.js

The project repository currently follows this basic structure.


πŸ“ Project Structure

hritik-portfolio1/
β”‚
β”œβ”€β”€ .github/
β”‚   └── workflows/
β”‚       └── deploy.yml
β”‚
β”œβ”€β”€ css/
β”‚   └── style.css
β”‚
β”œβ”€β”€ js/
β”‚   └── script.js
β”‚
β”œβ”€β”€ index.html
β”‚
└── README.md

Let's understand it.


.github/workflows/

This directory contains GitHub Actions workflow files.

Example:

.github/workflows/deploy.yml

GitHub automatically detects workflow files stored in this directory.


index.html

This is the main page of the portfolio.


css/style.css

Contains the styling of the website.


js/script.js

Contains JavaScript functionality.


README.md

Contains project documentation.


πŸ”„ Step 6 β€” Git Workflow

Before creating the CI/CD pipeline, our website source code needs to be available on GitHub.

The basic Git workflow is:

git status

Check the project status.

Then:

git add .

Stage all changes.

Then:

git commit -m "Add portfolio website"

Create a commit.

Finally:

git push

Push the changes to GitHub.


πŸ€– Step 7 β€” Create GitHub Actions Workflow

Now we create the CI/CD pipeline.

Inside the project:

.github/
└── workflows/
    └── deploy.yml

The workflow file uses YAML.

GitHub Actions reads this file and executes the instructions automatically.


πŸ“ GitHub Actions Workflow

A basic workflow for this project can look like this:

name: Deploy Portfolio to AWS S3

on:
  push:
    branches:
      - main

jobs:

  deploy:

    runs-on: ubuntu-latest

    steps:

      - name: Checkout repository
        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: us-east-1

      - name: Deploy website to S3
        run: |
          aws s3 sync . s3://hritik-portfolio1 --delete

Let's understand this workflow step by step.


🧩 Understanding the Workflow

1. Workflow Name

name: Deploy Portfolio to AWS S3

This gives the workflow a readable name.

On GitHub, you can see this name in the Actions section.


2. Trigger

on:
  push:
    branches:
      - main

This means:

Run the workflow whenever code is pushed to the main branch.

For example:

Developer
    ↓
Modify index.html
    ↓
git add .
    ↓
git commit
    ↓
git push
    ↓
GitHub Actions starts

3. Runner

runs-on: ubuntu-latest

GitHub Actions creates a temporary Ubuntu environment to execute the workflow.

You can think of it as:

GitHub
   ↓
Temporary Ubuntu Machine
   ↓
Execute Commands
   ↓
Finish

4. Checkout Repository

- name: Checkout repository
  uses: actions/checkout@v4

This action downloads the repository files into the GitHub Actions runner.

Without checking out the repository, the runner would not have the website files available for deployment.


5. Configure AWS Credentials

- name: Configure AWS credentials
  uses: aws-actions/configure-aws-credentials@v4

This allows the GitHub Actions runner to authenticate with AWS.

The credentials are retrieved from GitHub Secrets.


πŸ” Step 8 β€” GitHub Secrets

This is one of the most important parts of the project.

We don't put AWS credentials directly in our code.

Instead, GitHub provides:

Repository
   ↓
Settings
   ↓
Secrets and variables
   ↓
Actions

We can create secrets such as:

AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY

The workflow then references:

${{ secrets.AWS_ACCESS_KEY_ID }}

and:

${{ secrets.AWS_SECRET_ACCESS_KEY }}

πŸ”’ Why GitHub Secrets?

Imagine writing:

aws-access-key-id: AKIAxxxxxxxx

in a public repository.

Anyone could potentially see it.

Instead:

GitHub Secret
     ↓
Encrypted/managed by GitHub
     ↓
GitHub Actions
     ↓
AWS

The actual secret value is not written into the workflow file.


⚠️ Very Important AWS Security Note

For a real production setup, avoid using a long-lived AWS access key when possible.

A stronger approach is GitHub Actions OIDC with an AWS IAM role.

The architecture becomes:

GitHub Actions
      |
      | OIDC Identity
      ↓
AWS IAM Role
      |
      ↓
S3

This avoids storing long-lived AWS access keys in GitHub.

However, for a beginner learning project, understanding GitHub Secrets first is useful because it clearly demonstrates the basic authentication flow.


πŸ“€ Step 9 β€” Upload Website to S3

The most important deployment command is:

aws s3 sync . s3://hritik-portfolio1 --delete

Let's understand it.


πŸ”„ What is aws s3 sync?

aws s3 sync synchronizes files between a local directory and an S3 bucket.

In our project:

GitHub Actions Runner
        |
        | aws s3 sync
        ↓
S3 Bucket

The command:

aws s3 sync . s3://hritik-portfolio1

means:

Upload/synchronize the files from the current directory to the S3 bucket.


πŸ—‘οΈ What Does --delete Do?

The workflow uses:

--delete

This makes the S3 bucket reflect the current contents of the source directory by deleting destination files that no longer exist in the source.

For example:

Initial version:

index.html
old-page.html
style.css

Later you delete:

old-page.html

After running:

aws s3 sync . s3://hritik-portfolio1 --delete

the old file can also be removed from the bucket.

This helps keep the deployed website synchronized with the repository.


πŸ” Complete CI/CD Flow

Now let's connect everything.

                 Developer
                     |
                     ↓
               Edit Website
                     |
                     ↓
                  Git
                     |
                git commit
                     |
                git push
                     |
                     ↓
              GitHub Repository
                     |
                     ↓
             GitHub Actions
                     |
                     ↓
             Ubuntu Runner
                     |
                     ↓
             Checkout Code
                     |
                     ↓
          Configure AWS Credentials
                     |
                     ↓
               AWS CLI
                     |
                     ↓
             aws s3 sync
                     |
                     ↓
              S3 Bucket
                     |
                     ↓
         Static Website Hosting
                     |
                     ↓
             🌐 Live Website

This is our CI/CD pipeline.


πŸš€ Step 10 β€” Push the Workflow to GitHub

Once deploy.yml is created:

git add .

Then:

git commit -m "Add S3 deployment workflow"

Then:

git push origin main

GitHub detects the workflow.

Because our workflow has:

on:
  push:
    branches:
      - main

the pipeline starts automatically.


πŸ‘€ Step 11 β€” Check GitHub Actions

Open your GitHub repository.

Go to:

Actions

You should see:

Deploy Portfolio to AWS S3

Click the workflow run.

You can see steps such as:

βœ“ Checkout repository
βœ“ Configure AWS credentials
βœ“ Deploy website to S3

If every step succeeds:

βœ“ Workflow completed successfully

πŸ§ͺ Step 12 β€” Test Automatic Deployment

Now comes the most important part of the project.

Modify your portfolio.

For example:

Change:
"DevOps Learner"

to:

"DevOps & Cloud Engineer"

Save the file.

Then:

git add .
git commit -m "Update portfolio content"
git push

Now:

git push
    ↓
GitHub
    ↓
GitHub Actions
    ↓
AWS S3
    ↓
Updated Website

You don't manually upload anything.

That's the power of CI/CD.


πŸ”₯ Before Automation vs After Automation

❌ Traditional Manual Deployment

Without GitHub Actions:

Change Website
     ↓
Build/Prepare Files
     ↓
Open AWS Console
     ↓
Open S3
     ↓
Upload Files
     ↓
Replace Old Files
     ↓
Check Website

Every update requires manual work.


βœ… Automated Deployment

With GitHub Actions:

Change Website
     ↓
git push
     ↓
GitHub Actions
     ↓
AWS S3
     ↓
Live Website Updated

Much simpler.


πŸ“Š Manual vs Automated Deployment

Manual Deployment CI/CD Deployment
Upload files manually Automatic
More repetitive Less repetitive
Easy to forget files Automated synchronization
Takes more time Faster
More human involvement Pipeline-driven
Difficult to repeat consistently Consistent workflow

πŸ“Έ Screenshot 3 β€” Final Live Portfolio

Screenshot: Final AWS S3 Hosted Portfolio

This screenshot shows the final portfolio website successfully running after deployment.

The website is accessible through the S3 static website endpoint:

http://hritik-portfolio1.s3-website-us-east-1.amazonaws.com


🎯 What Happens When I Push New Code?

Let's say I modify:

index.html

Then:

git add .
git commit -m "Update portfolio"
git push

GitHub receives the code.

Because the workflow listens for pushes to main:

on:
  push:
    branches:
      - main

GitHub Actions starts automatically.

Then:

Checkout
   ↓
AWS Authentication
   ↓
AWS CLI
   ↓
S3 Sync
   ↓
Deployment Complete

The updated website is now available from S3.


🧠 Important DevOps Concepts Learned

This small project teaches several important concepts.


1️⃣ Version Control

Git tracks changes to the website.

Code
 ↓
Git
 ↓
GitHub

2️⃣ CI/CD

GitHub Actions automates deployment.

Push
 ↓
Pipeline
 ↓
Deploy

3️⃣ Cloud Storage

S3 stores the website files.

S3
 ↓
index.html
CSS
JavaScript
Assets

4️⃣ IAM

IAM controls AWS access.

Identity
 +
Permissions
 =
Controlled AWS Access

5️⃣ Secrets Management

GitHub Secrets protect sensitive credentials from being hardcoded into the repository.


6️⃣ AWS CLI

AWS CLI allows us to interact with AWS from commands and automation.

Example:

aws s3 sync

7️⃣ Infrastructure + Automation

AWS provides the infrastructure.

GitHub Actions provides the automation.

Together:

AWS
 +
GitHub Actions
 =
Automated Deployment

πŸ—οΈ Project Architecture

The final architecture can be represented as:

                  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
                  β”‚    Developer     β”‚
                  β””β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                           β”‚
                       git push
                           β”‚
                           ↓
                  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
                  β”‚     GitHub       β”‚
                  β”‚   Repository     β”‚
                  β””β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                           β”‚
                           ↓
                  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
                  β”‚ GitHub Actions   β”‚
                  β”‚      CI/CD       β”‚
                  β””β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                           β”‚
                           ↓
                  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
                  β”‚   AWS CLI /      β”‚
                  β”‚ AWS Credentials  β”‚
                  β””β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                           β”‚
                           ↓
                  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
                  β”‚    AWS S3        β”‚
                  β”‚     Bucket       β”‚
                  β””β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                           β”‚
                           ↓
                  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
                  β”‚ Static Website   β”‚
                  β”‚    Hosting       β”‚
                  β””β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                           β”‚
                           ↓
                       🌐 User

πŸ“ Final Repository Structure

The project structure is:

hritik-portfolio1/
β”‚
β”œβ”€β”€ .github/
β”‚   └── workflows/
β”‚       └── deploy.yml
β”‚
β”œβ”€β”€ css/
β”‚   └── style.css
β”‚
β”œβ”€β”€ js/
β”‚   └── script.js
β”‚
β”œβ”€β”€ index.html
β”‚
└── README.md

The repository currently shows this core structure on GitHub.


🧩 Understanding Each Component

HTML

Responsible for the structure.

<h1>My Portfolio</h1>

CSS

Responsible for styling.

body {
    font-family: Arial, sans-serif;
}

JavaScript

Adds functionality.

console.log("Portfolio loaded");

Git

Tracks changes.

git add .
git commit -m "Update portfolio"

GitHub

Stores the source code remotely.


GitHub Actions

Automates deployment.


IAM

Provides AWS identity and permissions.


S3

Stores and serves the static website files.


πŸ” Security Considerations

Security is extremely important in AWS projects.

There are several things to remember.


❌ Never Commit AWS Credentials

Never put this directly into:

deploy.yml
README.md
index.html

or any other repository file:

AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY

βœ… Use GitHub Secrets

Store sensitive credentials in:

GitHub Repository
      ↓
Settings
      ↓
Secrets and variables
      ↓
Actions

βœ… Use Least Privilege

The IAM identity used for deployment should have only the permissions required for the deployment.

For this project, that generally means restricting access to the target S3 bucket and only the necessary S3 actions.

Avoid giving broad permissions such as unrestricted administrator access just to make the deployment work.


πŸ” Production-Level Improvement: OIDC

For learning purposes, GitHub Secrets are easy to understand.

But for a more production-oriented setup, GitHub Actions can authenticate to AWS using OIDC and an IAM role.

Instead of:

GitHub
   ↓
Long-Lived AWS Access Key

you can use:

GitHub Actions
       ↓
OIDC
       ↓
AWS IAM Role
       ↓
S3

Advantages include:

  • No long-lived AWS access keys in GitHub

  • Short-lived credentials

  • Better security

  • Fine-grained trust policies

This is an excellent next step after completing this beginner project.


🌍 Why This Project is Useful for DevOps Beginners

At first glance, this looks like a simple website deployment.

But it teaches the complete idea behind a CI/CD pipeline.

You learn:

Source Code
    ↓
Version Control
    ↓
Remote Repository
    ↓
Automation
    ↓
Cloud Authentication
    ↓
Cloud Storage
    ↓
Deployment

These same concepts appear in much larger systems.

For example:

Java Application
      ↓
GitHub
      ↓
GitHub Actions
      ↓
Docker
      ↓
AWS ECR
      ↓
EC2 / ECS / Kubernetes

The technology changes, but the DevOps workflow remains similar.


πŸ“ˆ How This Project Can Be Improved

This project can be extended in several ways.


πŸš€ Improvement 1 β€” Add CloudFront

Instead of directly serving the website from S3:

User
 ↓
CloudFront
 ↓
S3

CloudFront provides a CDN layer.


πŸ”’ Improvement 2 β€” Use HTTPS

Instead of relying on the basic S3 website endpoint, a production architecture can use:

CloudFront
   ↓
HTTPS
   ↓
S3

🌐 Improvement 3 β€” Add a Custom Domain

For example:

www.example.com

using:

Route 53
+
CloudFront
+
S3

πŸ” Improvement 4 β€” Use OIDC

Replace long-lived AWS credentials with:

GitHub Actions
       ↓
OIDC
       ↓
IAM Role
       ↓
S3

πŸ§ͺ Improvement 5 β€” Add Testing

Before deployment:

Push
 ↓
HTML Validation
 ↓
CSS Validation
 ↓
JavaScript Check
 ↓
Deploy

πŸ” Improvement 6 β€” Add Security Scanning

The workflow can also include:

Secret Scanning
Dependency Scanning
Security Checks

before deployment.


πŸ§ͺ Example Improved Pipeline

A more advanced version could look like:

Developer
    ↓
git push
    ↓
GitHub
    ↓
GitHub Actions
    ↓
Checkout
    ↓
Validate
    ↓
Test
    ↓
Security Scan
    ↓
AWS Authentication
    ↓
S3 Sync
    ↓
CloudFront Cache Invalidation
    ↓
Production

This is much closer to a real-world DevOps workflow.


πŸ§‘β€πŸ’» Complete Deployment Commands

Here are the important commands used in the project.

Check Git status

git status

Stage files

git add .

Commit changes

git commit -m "Update portfolio"

Push changes

git push origin main

AWS S3 synchronization

aws s3 sync . s3://hritik-portfolio1 --delete

The last command is the core deployment command used by the CI/CD workflow.


πŸ”„ Complete Project Workflow in One Diagram

                β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
                β”‚   Portfolio Code  β”‚
                β”‚ HTML/CSS/JS       β”‚
                β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                          β”‚
                       Git Push
                          β”‚
                          ↓
                β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
                β”‚      GitHub       β”‚
                β”‚    Repository     β”‚
                β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                          β”‚
                          ↓
                β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
                β”‚  GitHub Actions   β”‚
                β”‚      CI/CD        β”‚
                β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                          β”‚
                          ↓
                β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
                β”‚ Checkout Source   β”‚
                β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                          β”‚
                          ↓
                β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
                β”‚ AWS Authenticationβ”‚
                β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                          β”‚
                          ↓
                β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
                β”‚     AWS CLI       β”‚
                β”‚   aws s3 sync     β”‚
                β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                          β”‚
                          ↓
                β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
                β”‚    S3 Bucket      β”‚
                β”‚ hritik-portfolio1 β”‚
                β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                          β”‚
                          ↓
                β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
                β”‚ Static Website    β”‚
                β”‚     Hosting       β”‚
                β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                          β”‚
                          ↓
                🌐 Live Portfolio

πŸ’‘ What I Learned From This Project

This project helped me understand how a simple website can become an automated DevOps deployment.

The major concepts I practiced were:

Git
GitHub
GitHub Actions
AWS IAM
AWS S3
AWS CLI
GitHub Secrets
CI/CD
Static Website Hosting
Cloud Deployment

The most important lesson was:

Deployment does not have to be a manual process.

Instead of uploading files manually every time, we can automate the entire process:

Code Change
    ↓
git push
    ↓
GitHub Actions
    ↓
AWS S3
    ↓
Live Website

πŸ† Final Result

The final result is a portfolio website hosted on Amazon S3 and deployed through a GitHub Actions workflow.

GitHub Repository

https://github.com/hritikranjan1/hritik-portfolio1

Live Portfolio

http://hritik-portfolio1.s3-website-us-east-1.amazonaws.com

Workshop

https://www.youtube.com/live/DyqAdz96mok?si=yTWM7TqpWvtRsDTU&t=10442


πŸ“Έ Project Screenshots

1. IAM User Creation

What it demonstrates: Creation/configuration of the AWS identity used for the deployment process.


2. S3 Bucket Creation

What it demonstrates: The hritik-portfolio1 S3 bucket created to store the static website files.


3. Final Live Portfolio

What it demonstrates: The final portfolio successfully deployed and accessible through the AWS S3 website endpoint.


πŸ“Œ Key Takeaways

If you are a beginner, remember these five things:

1. GitHub stores the source code

Portfolio β†’ GitHub

2. GitHub Actions automates the deployment

git push β†’ GitHub Actions

3. IAM controls AWS access

IAM β†’ Permissions

4. S3 stores and serves the static website

S3 β†’ Website Files

5. CI/CD removes repetitive manual deployment

Code Change
     ↓
Push
     ↓
Automatic Deployment

🎯 Final DevOps Architecture

The complete project can be summarized as:

                 πŸ‘¨β€πŸ’» Developer
                       |
                       |
                    Git Push
                       |
                       ↓
              ☁️ GitHub Repository
                       |
                       ↓
               βš™οΈ GitHub Actions
                       |
                       ↓
                🐧 Ubuntu Runner
                       |
                       ↓
                πŸ” AWS IAM
                       |
                       ↓
                 ☁️ AWS S3
                       |
                       ↓
             🌐 Static Website
                       |
                       ↓
                πŸ‘₯ End Users

This is a small project, but it demonstrates a real DevOps concept: automatically moving code from source control to a cloud-hosted environment through a CI/CD pipeline.


πŸš€ Conclusion

Deploying a portfolio website to S3 manually is easy.

But automating the deployment with GitHub Actions is where the DevOps learning begins.

In this project, we connected:

HTML
CSS
JavaScript
   +
Git
   +
GitHub
   +
GitHub Actions
   +
IAM
   +
AWS CLI
   +
Amazon S3

The final result is an automated deployment pipeline:

                    CODE
                     ↓
                  GITHUB
                     ↓
              GITHUB ACTIONS
                     ↓
                AWS AUTH
                     ↓
                  AWS S3
                     ↓
              LIVE WEBSITE

Now, whenever I update my portfolio and push the changes to GitHub, GitHub Actions can automatically synchronize the latest files with my S3 bucket.

That's the real power of CI/CD:

Build once. Automate the process. Deploy consistently. πŸš€

If you're a beginner learning DevOps, this is a great project to build yourself because it combines Git, GitHub, CI/CD, AWS IAM, S3, AWS CLI, secrets management, and static website hosting in one practical project.

Happy Dockering!

πŸš€ Complete Learning & Career Resources | 2027–2028

A curated collection of learning resources for AI, Data Analytics, Python, Data Engineering, Cybersecurity, Cloud, Networking, Finance, Digital Marketing, Project Management, DevOps and Generative AI.

πŸ“š Learn Β β†’Β  πŸ§ͺ Practice Β β†’Β  πŸ› οΈ Build Β β†’Β  πŸ™ Share Β β†’Β  πŸš€ Grow


🌟 About This Repository

Welcome to the Complete Learning & Career Resources Repository! πŸš€

This repository is designed as a centralized learning hub for students, developers, QA engineers, DevOps engineers, cloud learners, cybersecurity enthusiasts, data professionals, project managers, business professionals and anyone interested in continuous learning.

The goal is simple:

Learn β†’ Practice β†’ Build β†’ Document β†’ Share β†’ Grow

Instead of searching for useful resources again and again, this repository brings them together in one place.


🎯 What You Will Find Here

  • πŸ€– Artificial Intelligence

  • 🧠 Generative AI

  • πŸ“Š Data Analytics

  • 🐍 Python

  • βš™οΈ Data Engineering

  • ☁️ Cloud Computing

  • 🌐 Computer Networking

  • πŸ” Cybersecurity

  • βš™οΈ DevOps

  • πŸ“‹ Project Management

  • πŸ’° Finance

  • πŸ“ˆ Digital Marketing

  • 🧩 Business Analysis

  • πŸš€ Career Development

  • πŸŽ“ Professional Learning

  • πŸ› οΈ Project Ideas

  • πŸ“š Learning Roadmaps


πŸ“Š Repository Overview

Category Resources
πŸ€– AI Courses 15
πŸ”΅ Google Courses 15
🟣 IBM Courses 10
πŸ”₯ Best Courses 2027–2028 21
🌟 Learning & Career Resources 14
πŸ“– Personal Resources 4+

πŸ“š Table of Contents


πŸ€– AI Courses

πŸš€ Explore AI fundamentals, Python, AI infrastructure, Generative AI, AI governance and specialized AI applications.

# Course Link
1 AI For Everyone Start Course β†—
2 AI Python for Beginners Start Course β†—
3 AI Infrastructure and Operations Fundamentals Start Course β†—
4 Generative AI for Human Resources (HR) Professionals Start Course β†—
5 AI Fundamentals Start Course β†—
6 AI for Healthcare Start Course β†—
7 AI Applications in Accounting and Finance Start Course β†—
8 AI Governance and Privacy Professional Certification (AIGP) Start Course β†—
9 Ethics and Governance in the Age of Generative AI Start Course β†—
10 Hands-on quantum error correction with Google Quantum AI Start Course β†—
11 AI-Powered Higher Education Start Course β†—
12 Modern Project Leadership: Agile, AI, and Beyond Start Course β†—
13 AI-Powered Business Analysis: Excel, KPIs & GenAI Start Course β†—
14 AI in Law: Research, Risk, and Legal Drafting Start Course β†—
15 Generative AI for Project Managers Start Course β†—

πŸ”΅ Google Courses

🌐 Explore Data Analytics, AI, Cybersecurity, Networking, Cloud, Digital Marketing and Project Management.

# Course Link
1 Foundations: Data, Data, Everywhere Start Course β†—
2 Ask Questions to Make Data-Driven Decisions Start Course β†—
3 Prepare Data for Exploration Start Course β†—
4 Agile Project Management Start Course β†—
5 Project Initiation: Starting a Successful Project Start Course β†—
6 AI Fundamentals Start Course β†—
7 Foundations of Digital Marketing and E-commerce Start Course β†—
8 Play It Safe: Manage Security Risks Start Course β†—
9 The Bits and Bytes of Computer Networking Start Course β†—
10 Analyze Data to Answer Questions Start Course β†—
11 Automate Cybersecurity Tasks with Python Start Course β†—
12 Architecting with Google Compute Engine Start Course β†—
13 AI for Writing and Communicating Start Course β†—
14 From Likes to Leads: Interact with Customers Online Start Course β†—
15 AI for Data Analysis Start Course β†—

🟣 IBM Courses

πŸ’™ Explore SQL, Python, Data Analytics, Deep Learning, RAG and Generative AI resources.

# Course Link
1 Databases and SQL for Data Science with Python Start Course β†—
2 RAG and Agentic AI Capstone Project Start Course β†—
3 Excel Basics for Data Analysis Start Course β†—
4 Introduction to Data Analytics Start Course β†—
5 Data Visualization and Dashboards with Excel and Cognos Start Course β†—
6 IBM AI Foundations for Business Start Course β†—
7 AI Capstone Project with Deep Learning Start Course β†—
8 Python Project for Data Engineering Start Course β†—
9 Building Generative AI-Powered Applications with Python Start Course β†—
10 Vector Databases for RAG: An Introduction Start Course β†—

πŸ”₯ Best Courses 2027–2028

🎯 A broader collection covering AI, Data, Python, Finance, Cybersecurity, Marketing, Networking, Management and Data Engineering.

# Course Link
1 AI For Everyone Start Course β†—
2 Foundations: Data, Data, Everywhere Start Course β†—
3 Ask Questions to Make Data-Driven Decisions Start Course β†—
4 Prepare Data for Exploration Start Course β†—
5 Financial Markets Start Course β†—
6 Agile Project Management Start Course β†—
7 Play It Safe: Manage Security Risks Start Course β†—
8 Project Initiation: Starting a Successful Project Start Course β†—
9 AI Fundamentals Start Course β†—
10 Analyze Data to Answer Questions Start Course β†—
11 Foundations of Digital Marketing and E-commerce Start Course β†—
12 The Bits and Bytes of Computer Networking Start Course β†—
13 Sequence Models Start Course β†—
14 Federal Taxation I: Individuals, Employees, and Sole Proprietors Start Course β†—
15 Designing the Organization Start Course β†—
16 Game Theory Start Course β†—
17 Using Python to Access Web Data Start Course β†—
18 Viral Marketing and How to Craft Contagious Content Start Course β†—
19 Python Project for Data Engineering Start Course β†—
20 Value Chain Management Start Course β†—
21 Applying Data Analytics in Finance Start Course β†—

🌟 Learning & Career Resources

πŸ’‘ Additional resources for learning, career development, language learning, hosting, education and professional growth.

Category Program Tracking Link
πŸ“± Apps AppSumo https://appsumo.8odi.net/c/5203965/416948/7443
🌐 Website Hosting Automattic, Inc. (WordPress.com, Pressable, WooCommerce, Jetpack) https://automattic.pxf.io/c/5203965/1900456/22744
πŸ‡¬πŸ‡§ College British Council - EOL English Online https://englishonline.sjv.io/c/5203965/1152772/14579
πŸ“š Educational Carson Dellosa Education https://carsondellosaeducation.sjv.io/c/5203965/2241626/29119
πŸŽ“ College Coursera B2C Affiliate Program https://imp.i384100.net/c/5203965/1164545/14726
πŸ“Š Learning DataCamp https://datacamp.pxf.io/c/5203965/1012793/13294
🎨 Collectibles & Hobbies Domestika https://domestika.sjv.io/c/5203965/1492994/17608
πŸŽ“ College edX https://edx.sjv.io/c/5203965/1505390/17728
πŸ’Ό Career Medical Spanish https://curiositymediainc.sjv.io/c/5203965/2899794/33984
πŸ§ͺ Educational MEL Science https://imp.i328067.net/c/5203965/574569/9515
πŸ—£οΈ Apps Preply Learners https://preply.sjv.io/c/5203965/1987575/24422
🌍 Learning Rosetta Stone https://aff.rosettastone.com/c/5203965/1637427/18979
πŸ›οΈ Website Hosting Shopify https://shopify.pxf.io/c/5203965/1061744/13624
🎯 Learning Udemy https://trk.udemy.com/c/5203965/3193860/39854

πŸ—ΊοΈ Recommended Learning Roadmaps

Choose one roadmap according to your career goal. You don't need to learn everything at once.


πŸ€– AI Roadmap

AI Fundamentals
      ↓
Python Basics
      ↓
Mathematics & Statistics
      ↓
Data Fundamentals
      ↓
Machine Learning
      ↓
Deep Learning
      ↓
Generative AI
      ↓
Prompt Engineering
      ↓
RAG
      ↓
Vector Databases
      ↓
Agentic AI
      ↓
AI Applications
      ↓
Real-World Projects
      ↓
GitHub Portfolio

About the author

  • πŸ‘‹ Hi, I’m Hritik Ranjan β€” a B.Tech CSE student and a passionate tech enthusiast focused on Quality Engineering, AI/ML, Cybersecurity, and DevOps. πŸ’‘ I enjoy building and testing scalable, secure, and intelligent systems that solve real-world problems. My expertise and interests include: πŸ”Ή Quality Assurance & Testing Hands-on experience in manual and automation testing using Selenium & Java, ensuring high-quality and reliable applications. πŸ”Ή Artificial Intelligence & Machine Learning Exploring advanced algorithms and developing intelligent systems for practical use cases. πŸ”Ή Cybersecurity Focused on vulnerability assessment, security testing, and system hardening. πŸ”Ή Web Development Building responsive and user-friendly applications using modern technologies. πŸ”Ή Data Science Analyzing complex data to extract actionable insights. πŸ’Ό Key Projects: πŸš€ Blindness Detection System Applied computer vision techniques to detect blindness-related conditions. πŸš€ AI-Powered Rail Madad Enhancement Developed an intelligent complaint management system to improve railway customer service. πŸš€ Interactive Applications Built multiple projects like quiz apps, calculators, and productivity tools. 🌱 I’m continuously learning and improving my skills in DevOps, Cloud, and Automation to become a well-rounded engineer. 🀝 Open to collaborations, internships, and opportunities in QA, DevOps, AI/ML, and Cybersecurity. πŸ“« Let’s connect: hritikranjan1408@gmail.com

No comments yet. Be the first to comment.

More from this blog