# Project 1:Automating Website Deployment to AWS S3 Using CircleCI

I am going to do my first project and that is upload my own website to S3 bucket. Let's Start.

In this tutorial, we'll be using CircleCI to automate the deployment of an HTML website to an S3 bucket. CircleCI is a powerful continuous integration and delivery platform that makes it easy to automate your software builds, tests, and deployments.

Amazon S3 is a highly scalable and secure cloud storage service that allows you to store and retrieve any amount of data, at any time, from anywhere on the web. It's a great choice for hosting static websites, such as HTML, CSS, and JavaScript files.

By combining CircleCI and S3, we can create a powerful workflow for deploying and managing static websites. Let's get started!

## **Prerequisites**

To follow along with this tutorial, you'll need:

* An AWS account
    
* A CircleCI account
    
* A simple HTML website
    

## **Step 1: Create an S3 Bucket**

The first step is to create an S3 bucket to host our website. Follow these steps:

1. Log in to the AWS Management Console.
    
2. Navigate to the S3 service.
    
3. Click the "Create bucket" button.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683523411219/ca5b4691-715e-439e-8d7b-baaa02ca5bbf.png align="center")

1. Enter a name for your bucket. This name must be unique across all existing bucket names in Amazon S3.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683523649873/eee3252d-c9ee-43c0-adb9-dbf586fdaadb.png align="center")

1. Choose a region for your bucket.
    
2. Click the "Create" button.
    

## **Step 2: Configure IAM User**

Next, we need to create an IAM user and grant it permissions to access our S3 bucket. Follow these steps:

1. Log in to the AWS Management Console.
    
2. Navigate to the IAM service.
    
3. Click the "Users" link in the left-hand navigation.
    
4. Click the "Add user" button.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683523784613/68a2e996-cc08-4fe1-8ddc-be2bcf6a4c37.png align="center")

1. Enter a name for your user.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683523854903/6c4ee414-cb04-4b65-b5c5-9768b14c67c6.png align="center")

1. Click the "Next: Permissions" button.
    
2. Select "Attach existing policies directly".
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683523959120/ea315268-810f-4705-bde1-984fc0403358.png align="center")

1. Search for and select the "AmazonS3FullAccess" policy.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683524029866/2ba3ebe9-0b1a-46e5-a39b-d7ce9694fb2f.png align="center")

1. Click the "Next: Tags" button
    
2. Click the "Next: Review" button.
    
3. Review your settings and click the "Create user" button.
    
4. click on the user you just created.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683524161056/4b30f242-600f-4d09-9c23-b05f6be9b60f.png align="center")

1. Go to security credentials and go to access keys then click on create access key.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683524225585/f3ed9b58-3861-44d3-b9fc-517520ca8fed.png align="center")

1. select Command line interface and click next and create access key.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683524420122/d13a696a-8d72-4a44-93e5-b4ecec73452d.png align="center")

1. Download .csv from there and save it for later.
    

## **Step 3: Configure CircleCI**

Before setting up CircleCI, you need to have your HTML website on your GitHub Repositories. Now we need to configure CircleCI to automate the deployment of our website to the S3 bucket. Follow these steps:

1. Log in to your CircleCI account.
    
2. Click on project. you will see all your Repositories
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683525031027/03b8a332-e30c-47d8-b3db-979526a5561a.png align="center")

1. choose your website Repositories and click on Set up project on right side.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683525150854/ece6f28e-bc66-46de-bcc5-3407844c20be.png align="center")

1. Enter your branch name. before moving ahead you need config.yml in your repositories.
    
2. create folder .circleci in your website repositories and create new config.yml and push it to the selected branch on github.
    

```yaml
version: 1
jobs:
  build:
    docker:
      - image: alpine:latest
    steps:
      - checkout
      - run :
          name: Install AWS CLI
          command: |
            apk add --no-cache python3 py3-pip
            pip3 install --upgrade pip
            pip3 install awscli
      - run:
          name: Configure AWS credentials
          command: |
            aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID && \
            aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY && \
            aws configure set default.region us-east-2
      - run:
          name: Upload website to S3 bucket
          command: |
            aws s3 sync . s3://ajaypatel.live --exclude "*.md"
            aws s3 website s3://ajaypatel.live --index-document index.html --error-document error.html
```

You need to enter your AWS access key and secret access key, which we downloaded before as CSV file.

1. After pushing your config.yml you can set up your project.
    
2. If you have done everything correctly then your Dashboard will look like below screenshot with success build.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683525864546/55086af7-3213-40fb-b962-0f50c9149a1b.png align="center")

That's it. You have successfully created your Automating Website Deployment using CircleCI.

To protect your AWS access key and secret access key, you should use environment variables to store them in your CircleCI configuration. Environment variables can be securely stored in CircleCI and accessed during the build process, so you don't need to include them in your source code.

Here's how you can update your CircleCI configuration to use environment variables for your AWS access key and secret access key:

1. Goto project setting(Right side corner) from your project Dashboard.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683526215728/1c662d04-d266-43e7-8ba0-02af65b5c22c.png align="center")

1. go to the "Environment Variables" section and create two environment variables named `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY`.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683526370368/5085d331-682c-4f67-aeac-2b9894dd237d.png align="center")

1. Set the values of the `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY` environment variables to the access key and secret access key you downloaded as CSV file.
    
2. In your CircleCI configuration file, replace the hard-coded access key and secret access key values with the environment variable names.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683526559115/d87c0aff-2d71-46e2-a322-ae8a7f1af33b.png align="center")

Congratiolation for your Deployment to AWS S3 Using CircleCI. Now whenever you will push your code to github, CircleCI will deploy it to S3 bucket automatically.

If you have any question/suggestion please comment below.

Happy coding.