Deploying a Static Website using CodePipeline,GitHub, and CloudFront
Tags: aws, community, devops, development
Published: 2023-06-29 06:55:49

**Overview:**

For this project, we want to create a website that doesn't change much and store it on a service called S3. Instead of manually updating the website whenever we make changes, we will use a tool called CodePipeline to make it automatic. CodePipeline will watch our code stored on GitHub, where we keep our website's main file called index.html. Whenever we make changes to that file, CodePipeline will automatically update the website for us.

To make the website faster and more secure, we will use another tool called CloudFront. It acts like a special server that stores copies of our website in different locations. When someone tries to access our website using the insecure HTTP protocol, CloudFront will quickly redirect them to the secure HTTPS protocol, which is safer. This way, our website will be both faster and more secure for visitors.

**Project Requirements:**

Your team has asked you to create an easier way to deploy a website without manual work. Currently, the developers have to manually test each new update they make to the code. Your job is to make it simpler by giving the developers a website address they can use to see their changes right away. You also need to make a small change in the code stored on GitHub to check if everything is working correctly. This will save time and make it easier for the developers to update the website.

**Steps**
1. Create a new repository in GitHub and load the static website content.
2. Create and configure a S3 bucket to host your static website.
3. Create a CloudFront distribution and restrict access to S3 bucket content with OAI
4. Create a CI/CD pipeline using the **AWS Codepipeline service **.
5. Set your repo as the Source Stage of the Codepipeline that is triggered when an update is made to a GitHub repo.
6. For the deploy stage select your S3 bucket.
7. Deploy the pipeline and verify that you can reach the static website.
8. Make an update to the code in your github to verify that the codepipeline is triggered. This can be as simple as a change to the Readme file because any change to the files should trigger the workflow.

**Step 1:**
**Create a new repository in GitHub and load the content of the static website.** 
https://github.com/ProsperAgada/deploy-static-website-using-AWS-Code-Pipeline-S3-and-GitHub-new.git you can clone this repo.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xzs36ukuj3mxg6mmp4g.png)
**Step 2:**
**Create S3 Bucket**

a. Navigate to S3 -> **Create Bucket.**

b. **Uncheck**
> Block all Public Access
 and acknowledge -> **create**
c. Upload static website content to the bucket created.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwlc0hdg6y0iwy4aiayl.png)
d. Navigate to your bucket -> Properties -> Edit Static website hosting
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxwpumj437ewfld218bq.png)
e. Enable Static website hosting and add your index document

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

a. Navigate to Cloudfront -> **Create**
b. Add the details for Origin in the source of the distribution, so add the S3 path there.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvmhnkekb23qc6p9g82p.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47fp1fpkq7hi0ggsz9yh.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctq2o6a4ussmo6ufvmuo.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzb7lxpx77rzpkdqgixe.png)
c. Include index.html as your default root object
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sq84hw4qqpbwp2gtowm7.png)
Your CloudFront Distribution is ready with this quick configuration guild.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4u2qebromnuvbhh580e.png)
d. Copy and paste the Cloudfront distribution domain name on a browser to access the website
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3ovbmr5dazj6up7kblv.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwifdf3wc5putbkedlti.png)
**Step 4:**
** Implementing CI/CD through AWS CodePipeline**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rjam0omy6xn939t9f6j.png)
**Step 5:**
**Connect GitHub Account to CodePipeline**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hg6gycf3xur9ty2eo2e.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjsq34tekvn1i8jvlug9.png)
**Step 6:**
**Configure CodePipeline and deploy CI/CD pipeline**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qy84ib5mpmbi38t2ezgs.png)
a. **You can skip the build stage -> create**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2ji7bcvrherggeu6w1c.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vadqryqymbw3e5m4bdvf.png)
**Step 7:**
**Amazing!!**..the pipeline has been created, next we need to verify it.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehjaykthgg61lwt41z9q.png)
**Step 8:**
**Verify functionality of CI/CD Pipeline**
Go to the github repo and edit any file, in my case i will edit the Readme file
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70h4at5t5icz6k8stzza.png)
Once that is done, you will notice the pipeline is triggered,
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rcfx39t2h7j1inqb46t.png)
Finally, paste the domain name of the cloudfront distribution on a browser to access the website

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vjt8cqlq7iq0ph8xg44h.png)
Yes the website can still be acessed, click on the "tell me more" button to see more.

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

**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.