# 4 Steps to configure CI/CD for website deployed in AWS S3

Continuing from our [last article](https://blog.eklak.dev/5-easy-steps-to-deploy-static-website-to-aws-s3) regarding the static website deployment using AWS S3, we will be adding additional features of configuring CI/CD for any changes deployment to our website created in AWS S3.

#### Requirements

1. You have an AWS Account Created.
    
2. You have already followed our last article to create the Static website hosting bucket in AWS S3.
    

#### Step 1: Add AWS User for using access keys in GitHub Action and Generating Access Keys

We will be creating a new AWS user solely for using it in the GitHub Action. Since, we require this user to perform action only to the AWS S3, we will be attaching the single policy for S3 access.

1. Go to the AWS Console, search for **IAM**, and select it.
    
2. From the left side menu, select `Users`.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696838301066/f8b22fcb-2778-4321-8aaa-31e360500b78.png align="center")
    

1. Click on `Create user`.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696838350546/c395a19e-ac52-4473-99d4-b76efa7eed7b.png align="center")
    
2. Add the user name in the `User name` field and click on `Next`.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696838472579/78f82907-fc03-4f40-a319-6382ad703e6b.png align="center")
    
3. Select `Attach policies directly`, and search for `s3` in the search bar. Select `AmazonS3FullAccess`.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696838661311/30def0c5-83d0-466d-aeac-94478af696bd.png align="center")
    
4. Click `Next`.
    
5. Click on `Create User` to create the user.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696838722288/3f065848-4a41-4c90-a5ec-0bc53c9c0752.png align="center")

After the user is created, it will appear in the IAM>Users list.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696838820946/c82b0ee2-61d6-4458-8115-8aaaa78472f0.png align="center")

1. Click on the user you created.
    
2. Select `Security Credentials` tab.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696839004099/8e4a96b1-dff3-4e01-ae02-d5a0a441d33f.png align="center")
    
3. Move to the `Access keys` section and Click on `Create access key`.
    
4. Select `Command Line Interface` for use case, and check the Confirmation box, and click on `Next`.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696839179355/cead4c89-1cc9-4b31-956e-58da9b1418b3.png align="center")
    
    1. Click on `Create access key` .
        
    2. Download the csv file and click on `Done`.
        
        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696839315166/09c21d8d-5d00-4d91-91e9-b4749b18991a.png align="center")
        

#### Step 2: Pushing your static website code to the GitHub Repo

I have already created a repository where I have pushed the code for the static website. You can find the repository [here](https://github.com/azens1995/s3-github-action).

#### Step 3: Configuring AWS Secrets in GitHub Repository

Our next step will be to add the AWS credentials to the repository's secret vault.

1. Go to your GitHub repository.
    
2. Select `Settings`. From the left side menu, Click on `Secrets and Variables`. Select Action from the listed menu.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696839854758/858dc6a0-a34e-4b76-8a3b-9af40ecf59e1.png align="center")
    
3. Next, we will be adding the following secrets to our repository:
    
    1. **AWS\_ACCESS\_KEY\_ID**
        
    2. **AWS\_SECRET\_ACCESS\_KEY**
        
    3. **AWS\_REGION**
        
    4. **S3\_BUCKET**
        
    
    Access key ID, and secret key can be found in the downloaded CSV file that we have from the above step.
    
    AWS region is the region where your S3 bucket is located, and S3 bucket is the name of the bucket where your static site is deployed.
    
    Once you have added the secrets, it should look like this.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696840091936/7a21db82-2230-42bf-adab-53cd982cd295.png align="center")
    

#### Step 4: GitHub Action

Our next step is to write the GitHub action which will be triggered when we push any changes to the `master` branch. Once the changes are pushed to the master branch, it should push the changes to the AWS S3 and should be reflected on our website.

1. Create a folder named `.github` in the root directory of your project.
    
2. Create another new folder inside `.github` folder named `workflows` where our workflow will be stored.
    
3. Create a new file named `deploy.yml` inside the `workflows` directory.
    
4. Add the following content to the `deploy.yml` file.
    

```yaml
name: Deploy static website to S3
on:
  push:
    branches:
      - master
jobs:
  upload:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - 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: ${{ secrets.AWS_REGION }}
      - name: Upload code to S3
        run: aws s3 sync src s3://${{secrets.S3_BUCKET}}
```

Here's a simple explanation of the workflow.

1. We are creating a workflow that gets triggered whenever new changes are pushed to the master branch.
    
2. We have one job in the workflow named `upload` which does the following actions.
    
    1. It checks out the code in the first step.
        
    2. It configures the AWS Credentials using the community-developed GitHub action.
        
    3. It uploads our code using the command  
        `aws s3 sync src s3://${{secrets.S3_BUCKET}}`  
        We are using `aws s3 sync NAME_OF_FOLDER s3://BUCKET-NAME` to sync our folder named `src`.  
        Change `src` to your folder name which stores all static content files. If it's a root directory, just use `.` instead of the `src`.
        

Now, whenever you make any changes to your code, and is pushed to `master` branch, it will get auto-deployed and changes can be seen and reflected on your website.

Thank you for reading this article. Hope you learned something from it and can use it in real life. 🎉🎉🎉