Automate Static Website Deployment to AWS S3 with GitHub Actions

Introduction

In today's fast-paced development environment, automating the deployment process is crucial for maintaining efficiency and consistency. In this tutorial, we'll guide you through deploying a static website to AWS S3 using GitHub Actions. We'll set up an S3 bucket, configure it for static website hosting, and create a GitHub Actions workflow to automatically deploy changes to the S3 bucket whenever updates are pushed to the repository.

Prerequisites

Before we begin, ensure you have the following:

• An AWS account with permissions to create S3 buckets and IAM roles.

• A GitHub account.

Step 1: Create an S3 Bucket

1. Log in to your AWS Management Console.

2. Navigate to the S3 service.

3. Click on "Create bucket".

4. Provide a unique name for your bucket and choose the region.

5. Leave other settings as default and proceed to create the bucket.

Step 2: Configure Bucket Policy

1. Open the bucket you just created.

2. Go to the "Permissions" tab and click on "Bucket Policy".

3. Paste the following bucket 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/*"
            }
        ]
    }
   

4. Click "Save" to apply the policy.

Step 3: Configure Static Website Hosting

1. Still in the bucket properties, navigate to the "Static website hosting" tab.

2. Click on "Edit".

3. Enter index.html in the "Index document" field.

4. Click "Save".

Step 4: Set Up GitHub Actions Workflow

1. Go to your GitHub repository where your static website code resides.

2. Click on the "Actions" tab.

3. Click on "Create new workflow" and choose "Set up a workflow yourself".

4. Paste the following workflow code into the editor:

    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
   

5. Replace YOUR_BUCKET_NAME with the name of your S3 bucket.

6. Click on "Start commit" and then "Commit new file" to save the workflow file.

Step 5: Test Deployment

1. Make any changes to your website code locally.

2. Commit and push the changes to your GitHub repository.

3. Go to the "Actions" tab on GitHub to monitor the workflow execution.

Step 6: Access Your Deployed Website

1. Once the workflow completes successfully, visit your S3 bucket URL to see the deployed website.

2. Any further changes made to the repository will trigger the workflow automatically, updating the deployed website accordingly.

Conclusion

Congratulations! You have successfully set up automated deployment of your static website to AWS S3 using GitHub Actions. This streamlined process not only saves time but also ensures that your website is always up-to-date with the latest changes from your GitHub repository.

Happy Learning!

Follow me on LinkedIn.