Pre-Requisite:

• AWS Account

• Circle CI Account

• Static Website

Architecture:

Steps:

1. Go to your AWS Console --> S3 Bucket

Now, Create your bucket with the name same as your domain name.

for ex: www.siddhant.com

1. Let all options remain same and scroll down and "Click on Create bucket"

2. Open your bucket and now let's enable the static website hosting for the same:

   Properties---> Static Website Hosting:

   Index Document: Write the name of the file which you want to server as your homepage.

   Error Document: If you have any file to server/ handle your error you can specify it here.

   

   

3. Now just upload your website code on GITHUB (I'm using Ankit's repo here: Click here

4. Let's create a directory in your repo with the name as, .circleci . Create a new file config.yml which will be used by circleCI to deploy your code on the s3 bucket.

   

    config.yml
   
    version: 2.1
   
    jobs:
      deploy:
        docker:
          - image: cimg/aws:2023.04.1
        steps:
          - checkout
          - run:
              name: Lets deploy this application
              command: |
                ls
                aws s3 sync . s3://$AWS_S3_BUCKET/
   
    workflows:
      Production:
        jobs:
          - deploy:
              filters:
                branches:
                  only: main
   

   1. It's time to show the POWER OF CIRCLE-CI. Login into your circle CI Account. And, set up your project.

      Now go to project setting--> Environment Variables

   2. Add the following environment variables

1. Now after making these changer trigger your pipeline to push your changes on s3 bucket.

1. Now, you must be able to see the endpoint of your website but you won't be able to see the website if you hit the endpoint on your browser. As we need to attach some permissions to it, but we will do it through Cloudfront.

   

   

   Update the NAME field with your s3 bucket endpoint, and create a new OAI basically, it will allow CloudFront to access your S3 bucket content.

   And, make sure you mark Bucket Policy as "Yes, update the bucket policy"

   

   You can also add the SSL Certificate and WAF if you have those configured.

   

Now if you copy paste your DIstribution Domain Name, you will be able to access your homepage/index.html: