Host A Static Website with CI/CD Pipeline,s3,cloudfront

6 min readSep 29, 2023

Amazon S3:Amazon Simple Storage Service, is a highly scalable and popular cloud storage solution offered by Amazon Web Services (AWS), widely used for storing and retrieving data on the internet.

GitHub: GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.collaborative development and project hosting service. With the help of GitHub, an unlimited number of programmers from anywhere in the world can work on the same project. GitHub has a git version control (management) system that allows you to view and control any code changes by any developer and return to the state before the changes.In general, GitHub is a social network for developers where you can find open-source projects from other developers, practice coding, and store your portfolio.

Continuous Integration(CI)

When We talk about software integration, it may not be necessary for stable projects, but it is essential for projects with frequent changes. After all, waiting to integrate results often leads to integration conflicts and can take too long to resolve, leading to project delays.

Continuous Delivery(CD)

Continuous delivery (CD) picks up where continuous integration is over. While CI is the process to build and test automatically, CD deploys all code changes to the testing or staging environment in the build.

CloudFront:Cloudfront is an AWS content delivery network that provides the ability to cache content at “edge” locations across the globe for faster load and response times for your application. It helps reduce latency to your application and also reduces the load on compute resources by providing commonly used files or content from the cached edge location.

we create:

Create a GitHub repository.
Create a S3 bucket.
Create a CI/CD Pipeline.
Deploy the Pipeline and verify that you can reach your static website. Make an update to the code in GitHub and verify the change in your static website.
Add CloudFront as a CDN for your static website.

Part I: Create a new GitHub repository

create a new repository ,,Click Create a new repository button and give it a name. I am going to name it as pipeline-s3. Add a README file and then click Create repository button.

2. Add file by clicking Upload files option and add your static website file.

3. Click Commit changes button.

Part 2: Create and configure an S3 bucket to deploy your GitHub files.

Go to S3>Create bucket and name your bucket.

2. Uncheck Block all public access and acknowledge. Keep the default settings and click Create button.

3. Go to Properties tab and scroll all the way to the bottom to Edit static website hosting section. Enable Static website hosting and choose Host a static website as Hosting type. Enter the Index document name and then click Save changes button.

4. Go to Permissions tab>Edit bucket policy. Paste below bucket policy and then click Save changes button. Make sure you update the “Resource”:”arn: your arn/*” with your s3 bucket arn and add /* so that you add all files within your bucket.

Part 3: Create CodePipeline

Go to CodePipeline>Create pipeline>Name your Pipeline>Choose New service role> Click Next button.

2. Select GitHub (Version 2) as Source provider.

3. Click Connect to GitHub button.

4. Give it a name. Click Connect to GitHub button.

5. Click Install a new app button.

6. Select Only select repositories and select your new repository. Click Save button.

7. Click Connect button.

8. Give your Repository Name and select Branch name and click Next.

9. Click Skip build stage.

10. Add deploy stage as Amazon S3. Choose the Region your S3 bucket was created in and then select the S3 bucket you just created for your Resume project. Make sure select Extract file before deploy because Codepipleline compress the artifact.