Build a CI/CD Pipeline with CodePipeline

Introduction

30 Second Summary

Every time you update a website by hand, you risk breaking something or forgetting a step. Imagine if every change you made went live the moment you saved it, with zero manual uploads.

In this project, you will build an automated deployment pipeline on AWS that publishes your website changes the instant you push code. You will walk away with hands-on experience in the single most tested DevOps skill in AWS interviews.

What You'll Build

You will create a fully automated CI/CD pipeline using AWS CodePipeline that detects changes in your GitHub repository and deploys them to a live static website hosted on Amazon S3.

By the end of this project, you'll have:

• A GitHub repository containing a static website built with HTML and CSS.
• An S3 bucket configured for static website hosting with public access.
• A working AWS CodePipeline that automatically deploys your code every time you push to GitHub.
• Secret Mission: Add a build stage with AWS CodeBuild that validates your HTML and minifies your CSS before deployment.

Are there any prerequisites?

None. This project includes full setup instructions for every tool you need, including Git, GitHub, and AWS. You do not need any prior experience with cloud services or the command line.

Set Up Your Tools

Before you can build a CI/CD pipeline, you need three tools in place: Git for tracking your code changes, an AWS account for hosting your pipeline and website, and a GitHub repository for storing your code online.

In this step, you will install and verify each of these tools so you are ready to start building in the next step.

In this step, get ready to:

• Install Git for Windows and verify it works from the command line.
• Create or sign in to your AWS account and access the AWS Management Console.
• Create or sign in to your GitHub account and create a new repository for this project.

Install Git for Windows

Git is the version control tool that tracks every change you make to your code. Your CI/CD pipeline will detect changes pushed through Git to trigger automatic deployments.

• Check if Git is already installed by opening a terminal. Press the Windows key to open your search bar.
• Type Command Prompt and press Enter to open it.
• Check your Git version by running this command:

git --version

✔️ I see a version number

You should see output like git version 2.x.x. Git is installed and ready to go. Skip ahead to the next substep.

ⓧ Command not found

Git is not installed yet. Follow these steps to install it.

• Open the Git for Windows download page in your browser:
• https://git-scm.com/download/win
• The download starts automatically. If it does not, click the link for the latest x64 installer.
• Run the downloaded installer.
• Click Next on each screen, accepting all the default options.
• Click Install, then click Finish when the installation completes.
• Close and reopen Command Prompt, then run the version check again:

git --version

You should now see a version number confirming Git is installed.

What is Git?

Git is a version control system that records every change you make to your files. It lets you go back to previous versions, collaborate with others, and share your code through platforms like GitHub.

In this project, Git is what connects your local code changes to your cloud pipeline. Every time you push a change, your pipeline springs into action.

Still seeing 'not recognized' after installing?

Make sure you closed and reopened Command Prompt after the install. Git is not available in terminals that were already open during installation.

If it still does not work, try opening Git Bash instead (search for it in your Start menu). Git Bash is installed alongside Git for Windows.

Help me troubleshoot why Git is not recognized in my terminal after installing Git for Windows.

Set up your AWS account

AWS is where your CI/CD pipeline and website will live. You need an AWS account to access services like CodePipeline and S3.

✔️ I already have an AWS account

• Sign in to the AWS Management Console by navigating to:
• https://console.aws.amazon.com/
• Select Root user, enter your email, and click Next.
• Enter your password and click Sign in.

You should see the AWS Management Console dashboard with a search bar at the top.

ⓧ I need to create an AWS account

• Open the AWS sign-up page in your browser:
• https://signin.aws.amazon.com/signup
• Enter your email address in the Root user email address field.
• Enter an account name (e.g. your name) in the AWS account name field.
• Click Verify email address and enter the verification code sent to your email.
• Create a strong password for your root user and click Continue.
• Select Personal for the account type and fill in your contact information.
• Add a payment method (credit or debit card). You will only be charged if you exceed Free Tier limits.
• Complete the phone verification and CAPTCHA.
• Select the Basic Support plan (free).
• Click Complete sign up.

Will I be charged?

Creating an AWS account is free. A credit card is required to prevent fraud, but you will only be charged if you go beyond Free Tier usage limits. This project stays well within the free tier.

Account activation usually takes a few minutes. Once activated, sign in at https://console.aws.amazon.com/ to confirm you can access the dashboard.

Can't access the Console after signing up?

Account activation can take up to 24 hours in rare cases. Check your email (including spam) for an activation confirmation from AWS.

Help me troubleshoot why I cannot sign in to the AWS Management Console after creating my account.

Create your GitHub repository

GitHub stores your code in the cloud and acts as the trigger for your pipeline. When you push code to GitHub, AWS CodePipeline detects the change and starts the deployment process.

✔️ I already have a GitHub account

• Sign in to GitHub at:
• https://github.com/login

Once signed in, proceed to creating your repository below.

ⓧ I need to create a GitHub account

• Open the GitHub sign-up page:
• https://github.com/signup
• Enter your email address, create a password, and choose a username.
• Complete the verification puzzle and click Create account.
• Enter the verification code sent to your email.

Once verified, you are signed in and ready to create your repository.

Now create a new repository for this project.

• Navigate to the new repository page:
• https://github.com/new
• In the Repository name field, type my-cicd-pipeline-site.
• Leave the visibility set to Public.
• Do NOT check any of the initialization options (no README, no .gitignore, no license). You will push your own files in the next step.
• Click Create repository.

You should see your new empty repository page with setup instructions displayed by GitHub.

Why leave the repository empty?

You are skipping the README and .gitignore options because you will create your own files locally and push them to GitHub in Step 2. Initializing with files here would create a merge conflict when you try to push.

Don't see the Create repository button?

Make sure you are signed in to GitHub. The repository creation page requires authentication.

Help me figure out why I cannot create a new repository on GitHub.

Your tools are in place. Next up, you will create a static website and push it to the GitHub repository you just made.

Create Your Website and Push to GitHub

Your tools are set up and ready to go. Now it's time to create the actual website that your pipeline will deploy automatically.

Every CI/CD pipeline needs source code to deploy. In this step, you'll create a simple HTML and CSS website, then push it to GitHub so your pipeline can pick it up later.

In this step, get ready to:

• Create a static website with an HTML file and a CSS file.
• Push your website code to your GitHub repository.
• Verify your files appear correctly on GitHub.

Create your project folder and website files

You need a local folder to hold your website files. You'll create this on your Desktop so it's easy to find.

• Press the Windows key to open your search bar.
• Type Git Bash and press Enter to open it.

• Move to your Desktop by running this command:

cd ~/Desktop

• Create your project folder and move into it by running these commands:

mkdir my-pipeline-site
cd my-pipeline-site

• Create the two empty files for your website by running this command:

touch index.html styles.css

• Confirm the files exist by running:

ls

• You should see index.html and styles.css in the output.

Don't see both files?

Make sure you typed the filenames with no typos. Run touch index.html styles.css again if needed.

help me create files in Git Bash on Windows

Now you'll add the HTML code for your website. This is the page your pipeline will deploy to the internet.

• Open index.html in a text editor by running:

notepad index.html

• Notepad opens with an empty file. Paste the following code into it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My DevOps Pipeline Site</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>My CI/CD Pipeline is Live!</h1>
        <p>This site deploys automatically when I push to GitHub.</p>
    </header>
    <main>
        <section class="status">
            <h2>Pipeline Status</h2>
            <p class="success">Deployed successfully via AWS CodePipeline</p>
        </section>
        <section class="info">
            <h2>How It Works</h2>
            <ol>
                <li>I push code to GitHub</li>
                <li>AWS CodePipeline detects the change</li>
                <li>Pipeline deploys to S3 automatically</li>
                <li>This site updates in seconds</li>
            </ol>
        </section>
    </main>
    <footer>
        <p>Built with AWS CodePipeline, S3, and GitHub</p>
    </footer>
</body>
</html>

What does this code do?

• The <header> section displays the site title and a tagline about automatic deployment.
• The <section class="status"> block shows a green success message confirming the pipeline deployed correctly.
• The <section class="info"> block lists the four steps of how your pipeline works, which you'll see in action later.
• The <link rel="stylesheet" href="styles.css"> tag connects your HTML to the CSS file you'll fill in next.

• Press Ctrl+S to save index.html in Notepad.
• Keep Notepad open. You'll close it after verifying.

Now add the CSS that styles your website with a professional look.

• Open styles.css in a text editor by running this in Git Bash:

notepad styles.css

• Paste the following CSS code into the file:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #f5f5f5;
}

header {
    text-align: center;
    padding: 2rem 0;
    margin-bottom: 2rem;
    background-color: #232f3e;
    color: white;
    border-radius: 8px;
}

header h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

header p {
    font-size: 1.1rem;
    opacity: 0.9;
}

main {
    display: grid;
    gap: 2rem;
}

section {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

section h2 {
    margin-bottom: 1rem;
    color: #232f3e;
}

.success {
    color: #1a8754;
    font-weight: bold;
    font-size: 1.1rem;
}

ol {
    padding-left: 1.5rem;
}

ol li {
    margin-bottom: 0.5rem;
}

footer {
    text-align: center;
    margin-top: 2rem;
    padding: 1rem;
    color: #666;
    font-size: 0.9rem;
}

What does this CSS do?

• The universal selector * resets margins and padding so every browser starts from the same baseline.
• The header gets a dark background (#232f3e) which matches the AWS brand colour, with white text and rounded corners.
• Each section becomes a white card with padding and a subtle shadow, creating a clean dashboard look.
• The .success class turns the deployment confirmation text green and bold.

• Press Ctrl+S to save styles.css in Notepad.
• Preview your website by running this in Git Bash:

start index.html

Your default browser opens with the page. You should see a dark header with white text reading "My CI/CD Pipeline is Live!" and two white content cards on a light gray background.

Page looks unstyled or won't open?

If the page shows plain black text with no styling, make sure styles.css is saved in the same folder as index.html. Run ls in Git Bash to confirm both files are in my-pipeline-site.

If start index.html opens a text editor instead of your browser, your .html file association is set to an editor. Try double-clicking index.html in File Explorer and choosing your browser, or navigate to the file in your browser manually.

help me preview my HTML file in a browser on Windows

✔️ Awesome, I've got everything!

Great. Make sure both files are saved, then close the Notepad windows.

ⓧ I'd like to double check the full code

Here is the complete index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My DevOps Pipeline Site</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>My CI/CD Pipeline is Live!</h1>
        <p>This site deploys automatically when I push to GitHub.</p>
    </header>
    <main>
        <section class="status">
            <h2>Pipeline Status</h2>
            <p class="success">Deployed successfully via AWS CodePipeline</p>
        </section>
        <section class="info">
            <h2>How It Works</h2>
            <ol>
                <li>I push code to GitHub</li>
                <li>AWS CodePipeline detects the change</li>
                <li>Pipeline deploys to S3 automatically</li>
                <li>This site updates in seconds</li>
            </ol>
        </section>
    </main>
    <footer>
        <p>Built with AWS CodePipeline, S3, and GitHub</p>
    </footer>
</body>
</html>

Here is the complete styles.css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #f5f5f5;
}

header {
    text-align: center;
    padding: 2rem 0;
    margin-bottom: 2rem;
    background-color: #232f3e;
    color: white;
    border-radius: 8px;
}

header h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

header p {
    font-size: 1.1rem;
    opacity: 0.9;
}

main {
    display: grid;
    gap: 2rem;
}

section {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

section h2 {
    margin-bottom: 1rem;
    color: #232f3e;
}

.success {
    color: #1a8754;
    font-weight: bold;
    font-size: 1.1rem;
}

ol {
    padding-left: 1.5rem;
}

ol li {
    margin-bottom: 0.5rem;
}

footer {
    text-align: center;
    margin-top: 2rem;
    padding: 1rem;
    color: #666;
    font-size: 0.9rem;
}

Initialize Git and push to GitHub

Your website files exist locally, but your pipeline needs them on GitHub. You'll initialize a Git repository, commit your files, and push them to the remote repository you created earlier.

• Initialize a Git repository, commit your files, and push to GitHub by running these commands:

# Initialize a new Git repository in this folder
git init

# Stage both files for commit
git add .

# Create your first commit
git commit -m "Initial commit"

# Rename the branch to main (matches GitHub's default)
git branch -M main

# Connect your local repo to your GitHub repository
git remote add origin [[REPO_URL="https://github.com/your-username/your-repo-name.git"]]

# Push your code to GitHub
git push -u origin main

What do these commands do?

• git init turns the current folder into a Git repository so it can track changes.
• git add . stages all files in the folder, telling Git to include them in the next commit.
• git commit -m "Initial commit" saves a snapshot of your staged files with a message describing what changed.
• git branch -M main renames the default branch to main to match GitHub's naming convention.
• git remote add origin connects your local repository to your GitHub repository so Git knows where to push.
• git push -u origin main uploads your committed files to GitHub.

Git might ask you to sign in

When you run git push for the first time, a browser window or popup may appear asking you to sign in to GitHub. Follow the prompts to authenticate. Once complete, the push continues automatically.

• After the push completes, you should see output that includes a line like Branch 'main' set up to track remote branch 'main'. This confirms your code is on GitHub.

Seeing an error on push?

If you see a message about fatal: remote origin already exists, run git remote remove origin first, then re-run the git remote add origin command with the correct URL.

If Git asks for your name and email, run these two commands (replacing the placeholder values with your own) and then re-run the commit:

git config --global user.email "you@example.com"
git config --global user.name "Your Name"

help me push my code to GitHub from Git Bash

Verify your files on GitHub

• Open your browser and navigate to your GitHub repository page.
• Refresh the page if it was already open.
• You should see index.html and styles.css listed in the repository with the commit message "Initial commit" next to them.

Why does my pipeline need these files on GitHub?

AWS CodePipeline watches your GitHub repository for changes. When you push new code, the pipeline automatically detects it and starts deploying. Without files on GitHub, the pipeline has nothing to deploy.

Your website code is now on GitHub, ready to be picked up by a pipeline. Next, you'll create the S3 bucket that hosts your live website on the internet.

Create and Configure an S3 Bucket

Your website code is on GitHub, but it needs a home on the internet. Right now, visitors have no way to see your site.

Amazon S3 can host static websites directly from a storage bucket. In this step, you will create an S3 bucket, turn on static website hosting, and make the bucket publicly readable so anyone can visit your site.

In this step, get ready to:

• Create an S3 bucket with a unique name.
• Enable static website hosting and set the index document.
• Configure a bucket policy that allows public read access.

Create an S3 bucket with a unique name

Every file you store in S3 lives inside a bucket. Your bucket name must be globally unique across all AWS accounts, so you will add a personal identifier to make it yours.

• Return to the AWS Management Console in your browser.
• Type S3 in the search bar at the top of the page and select S3 from the results.
• In the left navigation pane, click General purpose buckets.
• Click Create bucket.

The Create bucket page opens with several configuration sections.

• Under Bucket type, keep General Purpose selected.
• In the Bucket name field, enter a unique name like my-cicd-pipeline-site- followed by a short personal identifier (your initials and a few numbers). For example: my-cicd-pipeline-site-jk2025.
• For AWS Region, choose the region closest to you. Note down which region you pick.
• Scroll down to Block Public Access settings for this bucket.
• Uncheck Block all public access.
• A warning appears asking you to acknowledge this change. Check the acknowledgement box to confirm.
• Leave all other settings at their defaults.
• Scroll to the bottom and click Create bucket.

Why do I need to uncheck Block Public Access?

By default, S3 blocks all public access to protect your data. Since you are hosting a public website that anyone should be able to visit, you need to allow public reads on this bucket.

You will add a specific bucket policy in a later substep that grants only the minimum permission needed (read-only access to your files).

Why does the bucket name need to be unique?

S3 bucket names share a global namespace across all AWS accounts. No two buckets anywhere in the world can have the same name. Adding your initials and a number ensures yours is unique.

Seeing a bucket name error?

Bucket names must be 3 to 63 characters long, use only lowercase letters, numbers, and hyphens, and start and end with a letter or number. If your name is already taken, try adding extra digits.

Ask for help: Why can't I create my S3 bucket with this name?

Enable static website hosting

Creating a bucket gives you storage, but S3 does not serve it as a website by default. You need to enable static website hosting so S3 knows to return your index.html file when someone visits the URL.

• Click on your newly created bucket name to open it.
• Click the Properties tab.
• Scroll all the way down to the Static website hosting section.
• Click Edit.
• Select Enable under Static website hosting.
• In the Index document field, enter index.html.
• Leave the Error document field empty.
• Click Save changes.

After saving, you will see a website endpoint URL at the bottom of the Static website hosting section. Copy this URL and save it somewhere. This is the public URL where your site will live.

What is the S3 website endpoint?

The endpoint follows the format http://your-bucket-name.s3-website-region.amazonaws.com. This is the address visitors will use to view your site after the pipeline deploys your files.

Don't see the endpoint URL?

Make sure you clicked Save changes after enabling hosting. Then scroll to the very bottom of the Properties tab. The endpoint appears under Static website hosting.

Ask for help: I can't find my S3 website endpoint URL after enabling static hosting.

Configure the bucket policy for public access

Disabling Block Public Access removed the guardrail, but the bucket still does not allow anyone to read the files. You need to add a bucket policy that explicitly grants read permission to all visitors.

• Click the Permissions tab on your bucket.
• Scroll down to Bucket policy and click Edit.
• Paste the following policy into the Bucket policy editor:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::[[BUCKET_NAME="your-bucket-name"]]/*"
            ]
        }
    ]
}

What does this policy do?

This IAM policy document has one rule. It allows anyone (Principal: *) to perform the s3:GetObject action on every file in your bucket (the /* at the end of the resource).

This means visitors can read (download) your HTML and CSS files, but they cannot upload, delete, or modify anything.

• In the Resource line, replace your-bucket-name with your actual bucket name. For example, if your bucket is named my-cicd-pipeline-site-jk2025, the Resource line should read arn:aws:s3:::my-cicd-pipeline-site-jk2025/*.
• Click Save changes.

You should see a banner confirming the bucket policy was saved. Your bucket now shows a Publicly accessible label.

Seeing a "Policy has invalid resource" error?

Double-check that the bucket name in the Resource field matches your bucket name exactly, including capitalisation. The format must be arn:aws:s3:::your-bucket-name/* with three colons before the bucket name.

If you see an error about Block Public Access preventing the policy, go back to the Permissions tab and make sure Block all public access is unchecked under Block public access (bucket settings).

Ask for help: I can't save my S3 bucket policy. What's wrong with my configuration?

Your S3 bucket is now configured as a public website host. Next up, you will create the pipeline that automatically pushes your code from GitHub into this bucket every time you make a change.

Create Your CI/CD Pipeline

Your S3 bucket is ready and waiting for website files. Right now, deploying means manually uploading files every time you make a change.

In this step, you'll create an AWS CodePipeline that connects your GitHub repository to your S3 bucket. Once it's set up, every push to GitHub triggers an automatic deployment to your live website.

In this step, get ready to:

• Create a new V2 pipeline in the AWS CodePipeline console.
• Connect the pipeline's Source stage to your GitHub repository.
• Configure the Deploy stage to push files to your S3 bucket.

Create a new pipeline in the CodePipeline console

The pipeline creation wizard walks you through configuring each stage of your CI/CD workflow. You'll start by naming your pipeline and setting its type.

• Return to the AWS Management Console in your browser.
• In the search bar at the top, type CodePipeline and select CodePipeline from the results.
• Click Create pipeline.
• On the Step 1: Choose creation option page, select the Build custom pipeline option.
• Click Next.
• On the Step 2: Choose pipeline settings page, enter a name for your pipeline in the Pipeline name field (for example, my-cicd-pipeline).
• For Pipeline type, confirm that V2 is selected. V2 is the only type available in the console and includes modern features like Git-based triggers.
• For Service role, select New service role. This allows CodePipeline to create an IAM role with the permissions it needs to run your pipeline.
• Leave the Advanced settings at their defaults.
• Click Next.

What is a service role?

A service role is an IAM role that gives an AWS service permission to act on your behalf. CodePipeline needs permissions to read from GitHub, write to S3, and manage artifacts. By choosing "New service role", AWS creates this role automatically with the right permissions.

Configure the Source stage with GitHub

The Source stage tells your pipeline where to find your code. You'll connect it to your GitHub repository using a GitHub App connection, which is the recommended and most reliable method.

• On the Step 3: Add source stage page, in Source provider, choose GitHub (via GitHub App).
• Under Connection, click Connect to GitHub. A new window opens.
• Enter a connection name (for example, my-github-connection) and click Connect to GitHub.
• Click Authorize AWS Connector for GitHub when prompted. This grants AWS permission to access your GitHub repositories.
• Under GitHub Apps, click Install a new app.
• Select your GitHub account on the installation page.
• Click Install to install the AWS Connector for GitHub on your account.
• Back on the Connect to GitHub page, click Connect.
• In Repository name, select the repository you created for this project.
• In Default branch, select main.
• Leave the remaining settings at their defaults.
• Click Next.

What is the GitHub App connection?

The GitHub App connection is how AWS securely communicates with your GitHub account. It replaces older methods like OAuth tokens and webhooks.

Once established, the connection allows CodePipeline to detect new pushes to your repository and pull your source code automatically. You only need to set this up once.

Don't see your repository in the dropdown?

Make sure you installed the AWS Connector for GitHub app on the correct GitHub account. If you have multiple accounts, you may have installed it on the wrong one. You can check by going to GitHub, then Settings, then Applications, and verifying AWS Connector for GitHub is listed.

Why can't CodePipeline see my GitHub repository?

Configure the Deploy stage and create the pipeline

The Deploy stage is where your pipeline sends your website files to S3. You need to tell it which bucket to use and to extract the files before deploying.

• On the Step 4: Add build stage page, click Skip build stage.
• Confirm by clicking Skip again on the warning message.
• On the Step 5: Add test stage page, click Skip test stage.
• Confirm by clicking Skip again on the warning message.
• Click Next.
• On the Step 6: Add deploy stage page, in Deploy provider, choose Amazon S3.
• In Bucket, enter the name of the S3 bucket you created in the previous step.
• Select the Extract file before deploy checkbox. This tells CodePipeline to unzip your source files before placing them in the bucket.
• Leave Deployment path blank.
• Click Next.
• On the Step 7: Review page, review your pipeline settings.
• Click Create pipeline.

Why do we select Extract file before deploy?

CodePipeline zips your source files into an artifact when it pulls them from GitHub. If you don't extract them, S3 receives a single .zip file instead of your individual index.html and styles.css files.

Extracting before deploy ensures your website files are placed individually in the bucket, exactly how S3 static hosting needs them to serve your site.

Your pipeline starts running automatically after creation. You should see a pipeline visualization with two stages: Source and Deploy.

Pipeline creation failed?

If you see a permissions error, make sure you selected New service role in the pipeline settings step. If your GitHub connection shows as "Pending", go back to the Source stage and re-authorize the connection.

Help me fix my CodePipeline creation error

Your CI/CD pipeline is built and running. Next up, you'll test the full automation by making a code change and watching it deploy to your live website automatically.

Test the Automated Pipeline

Your pipeline is built. The Source stage is connected to GitHub, and the Deploy stage points to your S3 bucket. Now it is time for the real test.

In this step, you will confirm that the pipeline works end-to-end by watching its first automatic run, visiting the live site, and then pushing a code change to prove the entire cycle is automated.

In this step, get ready to:

• Watch your pipeline execute its first run automatically.
• Visit your S3 website endpoint URL and confirm your site is live.
• Push a code change to GitHub and verify the pipeline triggers automatically.

Watch your pipeline's first run

When you created your pipeline in the previous step, AWS CodePipeline automatically kicked off its first execution. It picked up the latest commit from your GitHub repository and started processing it through both stages.

• Return to the AWS CodePipeline console. You should already be on your pipeline's detail page from the previous step.
• Watch the two stages: Source and Deploy. Each stage shows its progress as it runs.
• Wait until both stages display a green Succeeded status. This may take 1-2 minutes.

What just happened?

Your pipeline automatically pulled the source code from GitHub (the Source stage) and then extracted and deployed the files to your S3 bucket (the Deploy stage). This entire flow happened without you clicking anything.

Every future push to your main branch will trigger this same two-stage process automatically.

Seeing a failed stage?

If the Source stage failed, your GitHub App connection may not be authorized correctly. Click the failed stage to see error details, then go back to Step 4 and verify the connection status shows Available.

If the Deploy stage failed, check that your S3 bucket name in the Deploy stage matches the bucket you created in Step 3.

Help me troubleshoot my failed pipeline stage

Visit your live website

Now that the pipeline has deployed your files, your static website should be live on the internet. The S3 website endpoint URL you configured in Step 3 is where your site lives.

• In the AWS Console, navigate to Amazon S3 and click on your bucket.
• Click the Properties tab.
• Scroll down to the Static website hosting section at the bottom.
• Click the Bucket website endpoint URL to open your live site in a new tab.

You should see your website with the dark header reading "My CI/CD Pipeline is Live!" and the "How It Works" section listing the four pipeline steps.

Seeing a 403 Forbidden or blank page?

A 403 error means your bucket policy is not allowing public access. Go back to Step 3 and double check your bucket policy allows public s3:GetObject access.

A blank page likely means the pipeline has not finished deploying. Wait a minute and refresh.

Help me fix my S3 static website that is not loading

Push a code change and watch the pipeline auto-deploy

The pipeline ran once when it was created. The real magic of CI/CD is that it runs again every time you push new code. Let's prove this by making a visible change to your website.

• Open index.html in your text editor.
• Find the <footer> section near the bottom of the file.
• Make a visible change to the footer text. For example, add your name after the existing text so you can spot the difference on the live site.
• Save the file.

Now commit and push your change to GitHub by running these commands in your terminal:

git add .
git commit -m "Update footer to test pipeline auto-deploy"
git push

What do these commands do?

• git add . stages all changed files for the next commit.
• git commit -m saves a snapshot of the staged files with a message describing what you changed.
• git push sends the commit to your GitHub repository. This is the action that triggers your pipeline.

• Switch back to the AWS CodePipeline console and navigate to your pipeline.
• Watch the pipeline. Within a minute or two, you should see it start a new execution automatically.
• Wait until both stages show Succeeded again.
• Refresh your live website in the browser. You should see the footer change you just made.

Your change went from your local machine to GitHub to S3. No manual uploads, no dragging files into a console. That is continuous deployment in action.

Pipeline not triggering after your push?

Make sure you pushed to the main branch. Your pipeline only watches the branch you configured in the Source stage.

If the push succeeded but the pipeline did not start, check that your GitHub App connection still shows Available in the AWS Developer Tools console under Settings > Connections.

Help me figure out why my pipeline did not trigger after my push

Secret mission

Add a Build Stage with AWS CodeBuild

Your pipeline currently goes straight from source to deploy. Real CI/CD pipelines include a build stage that validates code quality before anything reaches production. In this secret mission, you will add a CodeBuild stage that checks your HTML for errors and minifies your CSS before deployment.

Clean Up Your Resources

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. All resources in this project fall within the AWS Free Tier for low-usage personal projects.

Cost warning

CodePipeline V2 includes 100 free action execution minutes per month. CodeBuild includes 100 free build minutes per month on general1.small. S3 free tier includes 5 GB storage and 20,000 GET requests per month for 12 months. If you exceed these limits or your 12-month free tier expires, you will incur charges.

If you are not planning to use these resources again, choose the Delete tab below to avoid unexpected charges.

Resources you used:

• S3 bucket (static website hosting).
• AWS CodePipeline V2 pipeline (100 free action execution minutes per month).
• AWS CodeBuild project (100 free build minutes per month on general1.small, only if you completed the Secret Mission).
• GitHub App connection in AWS Developer Tools.

Keep everything running

No action needed. Choose this if you are still actively building or plan to push more changes to your site. The pipeline will stay active and trigger on future pushes. Costs remain within the free tier for low-traffic personal sites.

Pause - I'll come back to this later

Delete the pipeline to stop it from running on future pushes, but keep your S3 bucket so your website stays live. No ongoing pipeline charges.

• Open the CodePipeline console.
• In Name, choose the name of your pipeline.
• On the pipeline details page, choose Edit.
• On the Edit page, choose Delete.
• Type delete in the field to confirm, then choose Delete.

Your S3-hosted website remains accessible at its endpoint URL. You can recreate the pipeline later if you want to resume automated deployments.

Delete - I don't want to use this again

Remove all project resources to stop all charges and start fresh.

Delete your CodePipeline

• Open the CodePipeline console.
• In Name, choose the name of your pipeline.
• On the pipeline details page, choose Edit.
• On the Edit page, choose Delete.
• Type delete in the field to confirm, then choose Delete.

Delete your CodeBuild project (Secret Mission only)

• Open the CodeBuild console.
• In the navigation pane, choose Build projects.
• Choose the radio button next to your build project, then choose Delete.

Empty and delete your S3 bucket

• Open the S3 console.
• Select the radio button next to your bucket name.
• Choose Empty.
• Type permanently delete in the confirmation field and choose Empty.
• Return to the bucket list, select your bucket again, and choose Delete.
• Type the bucket name to confirm and choose Delete bucket.

Delete the GitHub App connection

• Open the Developer Tools console at Settings > Connections.
• In Connection name, choose the name of the connection you created for this project.
• Choose Delete.
• Enter delete in the field to confirm, then choose Delete.

Delete the CodePipeline artifact bucket

When you created your pipeline, CodePipeline also created an S3 bucket to store pipeline artifacts. This is separate from your website bucket.

• In the S3 console, look for a bucket with a name starting with codepipeline- followed by your region.
• Empty the bucket using the same steps above, then delete it.

After completing these steps, all AWS resources from this project are removed.

Nice Work!

Nice Work!

You just built a fully automated CI/CD pipeline on AWS. Every time you push code to GitHub, your site updates itself in seconds.

You've learned how to:

• Built a static website and hosted it on Amazon S3 with public access configured.
• Created a fully automated CI/CD pipeline with AWS CodePipeline that triggers on every GitHub push.
• Verified end-to-end automation by making a code change, pushing to GitHub, and watching your live site update within seconds.
• Added a Build stage with AWS CodeBuild for HTML validation and CSS minification (Secret Mission).

Ready to quiz yourself?