⏲️Implementing CI-CD with AWS in 5 mins for your static website.
Tags: react, cloud, devops, angular
Published: 2022-02-22 08:56:06



## DAY 13 - DevOps- Implementing CI-CD with AWS in 5 mins for your static website- Day Thirteen.


![Image Cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axd7jyfxtstcuevtcj6r.jpg)

[Tweet This Blog](https://link.anuvindh.com/twitter/DAY-13-AWS-codebuild-tweet.html)  - [100 days of Cloud on GitHub](https://github.com/anuvindhs/100daysofcloud) - [Read On iCTPro.co.nz](https://ictpro.co.nz)

-----

## 💿 CI-CD for Static website, using GIT - CodeBuild - S3  

Automate deployment using  CI CD implementation for static website using git, codebuild to setup pipeline and finally deploy in S3.

### 🛠️ Requirement
- A git repo for your website. Feel free to fork mine for testing purpose

```git
https://github.com/anuvindhs/CLOUD-is-AWSome.git
```
- Access to codebuild and S3.

## 🪣 Create your bucket.

Follow this [tutorial](https://ictpro.co.nz/hosting-static-website-in-s3-how-to/) to create a bucket for hosting a website.
 

## 🛠️ Building  CI-CD using CodeBuild



### 🚰 Let's build the pipeline

- Sign into AWS console
- goto CodeBuild 

| Comments  | Screenshots/Actions   |
| ------------ | ------------ |
| Click **Create Pipeline**  |  ![Image Pipeline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trcngtke50nhrvphg9ud.png) |
|**Name** the pipe line, and **Service role** |![Image role](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72rauek0om8i39ekf41f.png) |
|Adding **Source Provider**, and Select **Github version 2**  |![Image githubversion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89lordmgnqqz1z1iwedl.png) |
|Enter a **connection name** for codestar|![Image name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktn81q5vd1gnh79caccl.png)|
|**Connect** github |![Image github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3u70j9onzg609w48omw.png) |
|Select your **repo** & **branch**|![Image repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tc54e7jxckk0d6f8jh6u.png) |

### 🏘️ Building your project.

if you are creating pipeline to host angular, react or any code that require a build phase you can use either  Jenkins or Code build to do so.

For this demo Am **Skipping the build Stage**, as its just a static website.![Image Skip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/952sxd5xv9m9swljea30.png)

### ⌨️ Deploying the code
Lets deploy this code into a serverless environment , in this case the S3.

| Comments  | Screenshots/Actions   |
| ------------ | ------------ |
|Select **S3** as deployment provider 7 click **Next**|![Image s3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fka3oydz3xrowvamivgb.png) |
|Select your **bucket** and enable **Extract file before deploy** and click **Next**|![Image deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wut2hzxg6t89j42wcqei.png)|
|Click **Create Pipeline**|![Image pipelinecreate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7zdgctxbrxmei40oq0q.png) |

Now you will be able to see the code build pulling the code from git and deploying it to the S3. Once the pipleline complete you will be able to see output as shown below.

 
![Image final](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8tlgonh2lxj7uyukart.png)

**🎉Congratulations** you have successfully implemented CI-CD for your project

----------

**✅Connect with me on [Twitter](https://twitter.com/intent/follow?ref_src=anuvindhs&screen_name=anuvindhs)
 🤝🏽Connect with me on [Linkedin](https://www.linkedin.com/in/anuvindhs)
🧑🏼‍🤝‍🧑🏻 Read more post on [dev.to](https://dev.to/anuvindhs) or  [iCTPro.co.nz](https://ictpro.co.nz)
💻 Connect with me on [GitHub](https://github.com/anuvindhs)**

-----------------




{% user anuvindhs %}