Deploying Portfolio Website using GitHub Actions on AWS

A portfolio website is a great way to showcase your work to potential employers, clients or collaborators. In today’s digital age, having a professional-looking online presence can go a long way in making a lasting impression. In this tutorial, we will learn how to deploy a static portfolio website using GitHub Actions on AWS.

Prerequisites

To follow along with this tutorial, you will need the following:

• A GitHub account
• A domain name (you can purchase one from any domain registrar)
• An AWS account
• A static website built using HTML, CSS, and JavaScript.

Step 1: Setting up the Repository

The first step is to create a new repository on GitHub. You can do this by navigating to the GitHub website and clicking on the “New” button. Give your repository a name and choose whether it should be public or private. Once your repository is created, clone it to your local machine using Git.

Step 2: Setting up the AWS S3 bucket

We will be using Amazon S3 to host our website. To get started, navigate to the S3 dashboard in your AWS account and create a new bucket. Choose a globally unique name for your bucket and select the region closest to your audience. Once your bucket is created, navigate to the “Permissions” tab and click on “Bucket Policy”.

In the Bucket Policy Editor, paste the following policy, replacing “your-bucket-name” with your actual bucket name:

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

This policy allows public read access to all the objects in your bucket.

Step 3: Uploading your website to the S3 bucket

Next, we need to upload our website to the S3 bucket. You can do this manually by dragging and dropping your website files into the bucket using the AWS Console. Alternatively, you can use the AWS CLI to upload your website files.

aws s3 sync . s3://your-bucket-name --acl public-read

This command will upload all the files in your current directory to the S3 bucket and set the ACL to public read. Make sure to replace “your-bucket-name” with your actual bucket name.

Step 4: Setting up the GitHub Actions Workflow

Now that our website is uploaded to the S3 bucket, we can set up a GitHub Actions workflow to automatically deploy our website every time we push changes to the repository.

In your repository, navigate to the “Actions” tab and click on “Set up a workflow yourself”. This will create a new YAML file in the “.github/workflows” directory. Replace the contents of this file with the following:

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://your-bucket-name --delete

This workflow will run every time we push changes to the “main” branch.
Code Link : https://lnkd.in/dB4y_dhZ