Host a static web page on S3 using GitHub Actions

GitHub Actions:

Automate, customize and execute your software development workflows in your repository with GitHub Actions. You can discover, create, and share actions to perform any job you'd like, including CI/CD, and combine actions in a customized workflow.

• GitHub Actions
• Identity and Access Management (IAM) for creating Service Role
• Amazon S3

Simple Project Architecture

Step 1: Setup a project

1. Create a repository
2. Clone the repository on the local IDE
3. Create a html file a write simple content.
4. Folder structure like this
5. Push this code on the GitHub repository.
6. Create a S3 Bucket
7. Gives all public assecc.
8. Go to the properties in the bucket -> Static website hosting -> Click Edit -> Enable
9. Go to the permissions section in the bucket -> Bucket policy -> Edit -> Add this policy

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

Step 2: Setup a Workflow

1. Go to your GitHub repository
2. Click on Actions
3. Click on set up a workflow yourself

After looking like this (repo_name)/.github/workflows/main.yml

• Write a workflow in main.yml

name: 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-aws-github-action --delete

• Reference for creating this file
• Reference for creating this file

Step 3: Setup your AWS Credentials

1. Go to the repository Settings
2. Click on secrets and variables -> Actions
3. After Click on New repository secret -> Name* AWS_ACCESS_KEY_ID -> Secret* Add AWS IAM user Access key`
4. One's again click on New repository secret -> Name* AWS_SECRET_ACCESS_KEY -> Secret* Add AWS IAM user Secret access key`

• After Committing this all changes and see this.

Click Me :)