Host A Static Website on AWS And CI CD Pipeline

Shreyash BhiseShreyash Bhise
4 min read

Step 1: Firstly create aws s3 bucket

Step 2: Then go to the properties section and scroll down to the static website hosting section and then click on edit.

Then click on save changes

Step 3: Then upload your index.html and styles.css file in aws s3 bucket

Step 4: Then search for cloudfront and create cloudfront distribution

And then click on create new OAI

Then click on create distribution

Step 5: Then copy the distribution domain name and paste in browser

Step 6: Then search for codepipeline service

Then click on connect to github

Note: Skip the build stage

Step 8: You need to create invalidation

Note: Whenever you make any changes it will automatically deploy using aws cicd pipeline.

project Title: Host a Static Website on AWS with CI/CD Pipeline

Project Description: The goal of this project is to create and host a static website on Amazon Web Services (AWS) while setting up a CI/CD pipeline for automated deployment. This project showcases your ability to design a scalable, reliable, and automated web hosting infrastructure.

Project Components:

  1. Static Website: You will create a static website (HTML, CSS, JavaScript, and any other assets) that you want to host on AWS. The website can be as simple or complex as you like, and it should have its own Git repository for version control.

  2. AWS Services: Utilize various AWS services to deploy and host your static website:

    • Amazon S3 (Simple Storage Service): Use S3 to store and serve your website's static files. Create an S3 bucket and configure it for static website hosting.

    • Amazon Route 53: Register a domain or use an existing one, and configure DNS records to point to your S3-hosted website.

    • AWS Identity and Access Management (IAM): Set up IAM roles and permissions to securely manage access to your AWS resources.

    • Amazon CloudFront (optional): Implement a CDN (Content Delivery Network) using CloudFront to distribute your website content globally for improved performance.

  3. CI/CD Pipeline: Implement a CI/CD pipeline to automate the deployment of your static website to AWS:

    • Version Control: Use Git for version control and host your project's repository on a platform like GitHub, GitLab, or AWS CodeCommit.

    • Continuous Integration (CI): Set up CI triggers to build and test your website code automatically whenever changes are pushed to the repository.

    • Continuous Deployment (CD): Automate the deployment of your website to AWS S3 and, if using CloudFront, create mechanisms to invalidate the cache when new content is deployed.

    • CI/CD Tools: You can use popular CI/CD tools like Jenkins, Travis CI, CircleCI, AWS CodePipeline, or GitHub Actions to create and manage your pipeline.

  4. Testing: Ensure your CI/CD pipeline includes testing and quality checks to catch any issues before deploying to production.

Project Steps:

  1. Website Development: Create your static website, organize its files, and commit them to your Git repository.

  2. AWS Setup: Configure AWS resources, including an S3 bucket for hosting, a Route 53 domain setup, and IAM roles with the necessary permissions.

  3. CI/CD Pipeline Configuration: Set up your CI/CD pipeline to build, test, and deploy your website automatically whenever changes are pushed to your Git repository.

  4. Testing: Ensure that your CI/CD pipeline includes automated testing to catch any errors before deploying to the live website.

  5. Deployment: Trigger the CI/CD pipeline to deploy your website to AWS. Monitor the deployment process and ensure that your website is accessible at your domain.

  6. Monitoring and Maintenance: Implement monitoring and alerting for your AWS resources to proactively detect and address any issues. Regularly update and maintain your website as needed.

Conclusion: This project demonstrates your ability to create a fully automated web hosting infrastructure on AWS, ensuring that your static website is continuously deployed and accessible to users. It also showcases your DevOps skills in setting up CI/CD pipelines for efficient and error-free deployments.

5
Subscribe to my newsletter

Read articles from Shreyash Bhise directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Shreyash Bhise
Shreyash Bhise

*Shreyash Bhise | Aspiring Mern Stack Developer and DevOps enthusiast,