Deploying a Portfolio Website on AWS S3 using GitHub Actions:

Deploying a Portfolio Website on AWS S3 using GitHub Actions:

Before we dive into the project, make sure you have the following prerequisites:

  1. An AWS account: You'll need an AWS account to create an S3 bucket for hosting your website.

  2. A domain name (optional): If you want to use a custom domain for your portfolio, make sure you have one registered.

  3. A GitHub repository: You should have your portfolio website code in a GitHub repository. For this example, we'll use the GitHub repository at github.com/Rohit123890/portfolio-website.git.

Steps to Deploy Your Portfolio Website on AWS S3

Step 1: Set Up Your GitHub Repository

If you haven't already, create a GitHub repository to host your portfolio website code. You can either initialize a new repository or use an existing one.

Step 2: Create an S3 Bucket

  1. Log in to your AWS Management Console.

  2. Navigate to the S3 service.

  3. Click the "Create bucket" button to create a new S3 bucket. Choose a unique name for your bucket (e.g., "your-portfolio-website").

  4. Configure your bucket settings. Ensure that "Block all public access" is unchecked for this use case since you want to make your website publicly accessible.

  5. Enable static website hosting by going to the "Properties" tab and clicking on "Static website hosting." Choose "Use this bucket to host a website" and provide the index and error document names (e.g., "index.html" for both).

  6. Note down the endpoint URL displayed after enabling static website hosting. It will look like: http://your-portfolio-website.s3-website-your-region.amazonaws.com.

Step 3: Configure GitHub Actions

In your GitHub repository, you'll need to set up GitHub Actions to automate the deployment process.

  1. Create a .github/workflows directory in your repository if it doesn't already exist.

  2. Inside the .github/workflows directory, create a YAML file (e.g., deploy.yml) to define your GitHub Actions workflow. Here's an example YAML configuration:

name: Portfolio Deployment

on:
  push:
    branches:
    - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v1

    - name: Configure AWS Credentials
      uses: aws-actions/configure-aws-credentials@v1
      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 static site to S3 bucket
      run: aws s3 sync . s3://portfolio-v01 --delete

This workflow triggers on every push to the main branch and deploys your code to the S3 bucket you created.

Step 4: Configure GitHub Secrets

For security reasons, you should never store your AWS credentials directly in your GitHub repository. Instead, use GitHub Secrets to securely store your AWS access key ID and secret access key.

  1. In your GitHub repository, go to "Settings" > "Secrets" > "New repository secret."

  2. Create two secrets: AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY, and provide their respective values, which you can obtain from your AWS IAM user.

Step 5: Push Your Code

Once you have set up GitHub Actions and configured your secrets, simply push your code to the main branch of your GitHub repository.

Step 6: Access Your Portfolio Website

After pushing your code, GitHub Actions will automatically build and deploy your portfolio website to your S3 bucket. You can access your website using the S3 endpoint URL noted down earlier. Additionally, if you have a custom domain, you can configure it to point to your S3 bucket.

Conclusion

Congratulations! You've successfully deployed your portfolio website on AWS S3 using GitHub Actions. This automated deployment process ensures that your website is always up-to-date whenever you make changes to your code.

By following this project, you've not only created an impressive online presence but also gained valuable experience in using AWS, GitHub Actions, and continuous deployment techniques—a skill set that can greatly benefit your career in DevOps and web development.