Deploy a static website using AWS CodePipeline S3 and GitHub

Objective

In this project, i deployed a static website via AWS codepipeline. Below is the architectural diagram that details how to accomplish this task.

Project Architectural Diagram

Steps taken to complete this project:

Step 1: Upload/Push static web files to your GitHub Repo

Step 2: Create a S3 bucket and also Upload the static web files

Step 3: Create a CloudFront distribution and restrict access to S3 bucket content with OAI

Step 4: Copy and paste the Cloudfront distribution domain name on a browser to access the website

Step 5: Implementing CI/CD through AWS CodePipeline

a.Connect GitHub Account to CodePipeline

b.Configure CodePipeline and deploy CI/CD pipeline

Skip the build stage

Review the pipeline, then proceed to “Create pipeline”. Wait for the pipeline to be created.

Yessssssssss!!!!!!!! the pipeline has been created, next we need to verify it.

Step 6: Verify functionality of CI/CD Pipeline

Go to the github repo and edit any file, in my case i will edit the Readme file, once that is done, you will notice the pipeline is triggered,

a: and if you check the s3 bucket, you will find that the readme file has been added

Finally, paste the domain name of the cloudfront distribution on a browser to access the website

Yes the website can still be acessed, click on the "tell me more" button to see more

Conclusion

In conclusion, if you follow all the steps mentioned above, you will succeed in deploying a any static website with AWS Codepipeline using Github and S3 bucket.