Build a CI/CD Pipeline with GitHub Actions

Deploy a live website automatically on every push using GitHub Actions.

Introduction

30 Second Summary

Every time you save code and manually upload files to make a website go live, you're doing work a machine could handle. Developers solved this problem with automated pipelines that deploy code the moment it's ready.

In this project, you will build a CI/CD pipeline that automatically deploys a personal website every time you push code to GitHub.

What You'll Build

A complete automation pipeline using GitHub Actions that picks up your HTML and CSS files, packages them, and publishes them to a live URL on the internet.

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

  • A styled personal landing page built with HTML and CSS.
  • A GitHub Actions workflow file written in YAML that triggers deployment on every push.
  • A live website hosted on GitHub Pages that anyone can visit.
  • Secret Mission: Add an automated quality gate that blocks broken code from deploying.

Are there any prerequisites?

None. This project includes full setup instructions for every tool you need, including Git, GitHub, and VS Code.

Set Up Your Tools

Before you can build a pipeline, you need the tools that make it possible. Every tool in this project is free.

You need three things: Git for tracking and pushing code, a GitHub account for hosting your code and running your pipeline, and VS Code for editing files.

In this step, get ready to:
  • Install and configure Git.
  • Create a free GitHub account.
  • Install VS Code.
Install Git

Git is the version control tool that tracks changes to your files and pushes them to GitHub. You will install it using Windows' built-in package manager, winget.

  • Press the Windows key to open your search bar.
  • Type PowerShell and press Enter to open it.
  • Install Git by running this command:
winget install --id Git.Git -e --source winget

The installation takes a minute or two. Once winget confirms the install succeeded, you need to restart PowerShell so it recognizes the new git command.

  • Close the PowerShell window completely.
  • Open a new PowerShell window using the same search method (Windows key, type PowerShell, press Enter).
  • Verify Git installed correctly by running:
git --version

✔️ I see a version number

You should see something like git version 2.54.0 (your exact number may differ). Git is ready to go.

ⓧ Command not found

This means PowerShell cannot find the git command yet.

  • Make sure you closed and reopened PowerShell after the install finished.
  • If you reopened and still see the error, try restarting your computer so Windows refreshes its PATH.
  • If the winget install itself failed earlier, check that you are connected to the internet and try running the install command again.

help me troubleshoot why git --version is not working in PowerShell after installing Git with winget

Now configure your Git identity so your commits are labeled with your name and email.

  • Set your name and email by running these commands:
git config --global user.name "[[YOURNAME="Your Name"]]"
git config --global user.email "[[YOUREMAIL="your@email.com"]]"

What do these commands do?

These commands save your name and email to Git's global settings. Every commit you make will be tagged with this identity, so GitHub knows who authored the code.

These commands produce no output. No output means they ran successfully.

Create a GitHub account

GitHub is where your code and pipeline will live. Your GitHub Actions workflow runs on GitHub's servers, and GitHub Pages hosts your deployed site.

  • Open your browser and go to github.com.
  • Click Sign up in the top right corner.
  • Follow the prompts to create your free account with a username, email, and password.
  • Check your email inbox for a verification email from GitHub.
  • Click the verification link in that email to confirm your account.

Already have a GitHub account?

If you already have one, skip this substep entirely. Just make sure you remember your username, as you will need it in the next step.

Install VS Code

VS Code is the code editor you will use to write your website files and your pipeline workflow.

  • Back in your PowerShell window, install VS Code by running:
winget install --id Microsoft.VisualStudioCode -e --source winget

Once winget confirms the installation is complete, verify that VS Code launches.

  • Press the Windows key to open your search bar.
  • Type Visual Studio Code and press Enter to open it.

✔️ VS Code opened

You should see the VS Code welcome screen. Your editor is ready.

ⓧ It didn't open

If the search does not find VS Code, the installation may not have completed.

  • Go back to PowerShell and check if the winget install command printed any errors.
  • Try running the install command again.
  • If the install succeeds but search still does not find it, try restarting your computer.

help me troubleshoot why VS Code is not opening after installing it with winget

Your tools are ready. Next up, you will create your project repository on GitHub and connect it to your local machine.

Create Your Project and Repository

Your tools are installed and ready to go. Now you need a place to store your code online and a target for your pipeline to deploy to.

In this step, you will create a GitHub repository, clone it to your local machine, and configure GitHub Pages as your deployment destination.

In this step, get ready to:
  • Create a GitHub repository for your project.
  • Clone the repository to your local machine and open it in VS Code.
  • Enable GitHub Pages as your deployment target.
Create a new GitHub repository

A repository is your project's home on GitHub. It stores all your files and tracks every change you make.

  • Open github.com in your browser and sign in.
  • Click the + button in the top-right corner of the page.
  • Select New repository.
  • In the Repository name field, type my-first-pipeline.
  • Select Public for the repository visibility.
  • Check the Add a README file checkbox.
  • Click Create repository.

Why make it public?

GitHub Actions is free and unlimited for public repositories. GitHub Pages is also free for public repos. Making your repository public means everything in this project costs nothing to run.

Clone and open the project

Cloning downloads a copy of your repository to your computer so you can edit files locally.

  • Move to your Desktop by running this command:
cd ~/Desktop
  • Clone your repository by running this command:
git clone https://github.com/[[GITHUB_USERNAME="your-github-username"]]/my-first-pipeline.git

Where do I find my username?

Your GitHub username is displayed in the top-right corner of GitHub when you click your profile icon. It is also the text that appears after github.com/ when you visit your profile page.

  • Confirm the clone worked by running:
ls

You should see a my-first-pipeline folder listed in the output.

Don't see the folder?

If you see a "repository not found" error, double check the URL matches your GitHub username and that the repository name is exactly my-first-pipeline.

If you get an authentication error, GitHub may need you to sign in. Follow the prompts in PowerShell to authenticate with your browser.

Help me fix my git clone error

  • Move into the project folder and open it in VS Code by running these commands:
cd my-first-pipeline
code .

VS Code opens with the my-first-pipeline folder loaded. You should see a README.md file in the Explorer sidebar on the left.

VS Code didn't open?

If you see a "code: command not found" error, close PowerShell completely and reopen it. VS Code adds itself to your system PATH during installation, but PowerShell needs a restart to pick up the change.

Help me open my project in VS Code

Enable GitHub Pages

GitHub Pages hosts your website for free, but you need to tell it to use your workflow file for deployment. Without this setting, your pipeline will not be able to publish your site.

  • Go back to your repository page on GitHub in your browser.
  • Click Settings in the top navigation bar of your repository.
  • In the left sidebar, under the Code and automation section, click Pages.
  • Under Build and deployment, find the Source dropdown.
  • Select GitHub Actions from the dropdown.

Why GitHub Actions as the source?

By default, GitHub Pages deploys from a branch directly. Selecting GitHub Actions tells GitHub to wait for your workflow file to handle the deployment instead.

This is what gives your CI/CD pipeline full control over when and how your site goes live.

Your repository is set up and ready. Next up, you will build the actual website that your pipeline will deploy.

Build Your Website

Your repository is cloned and your tools are ready. Now you need something for the pipeline to deploy.

In this step, you'll create a personal landing page using HTML and CSS. These are the files your CI/CD pipeline will automatically pick up and publish to the internet in the next steps.

In this step, get ready to:
  • Create an HTML landing page.
  • Add CSS styling for a clean, dark-themed layout.
  • Test the site in your browser before deploying.
Create your HTML file

Your landing page needs a structure. HTML defines what content appears on the page and how it is organized.

  • In VS Code's Explorer sidebar on the left, hover over the MY-FIRST-PIPELINE folder name.
  • Click the New File icon that appears (a document icon with a "+" sign).
  • Type index.html and press Enter to create the file.
  • Paste the following code into 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 First CI/CD Pipeline</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Hi, I'm a DevOps Learner</h1>
            <p class="tagline">This site deploys automatically with every push.</p>
        </header>
        <main>
            <section class="about">
                <h2>About This Project</h2>
                <p>This website is deployed using a CI/CD pipeline built with GitHub Actions. Every time I push code to the main branch, it goes live automatically.</p>
            </section>
            <section class="skills">
                <h2>What I Learned</h2>
                <ul>
                    <li>Writing GitHub Actions workflows in YAML</li>
                    <li>Configuring automated deployment triggers</li>
                    <li>Setting up GitHub Pages with Actions</li>
                    <li>The CI/CD push-to-deploy loop</li>
                </ul>
            </section>
            <section class="links">
                <h2>Find Me Online</h2>
                <a href="https://github.com" class="link-btn">GitHub</a>
                <a href="https://linkedin.com" class="link-btn">LinkedIn</a>
            </section>
        </main>
        <footer>
            <p>Deployed with GitHub Actions</p>
        </footer>
    </div>
</body>
</html>

What does this code do?

This HTML creates a personal landing page with several sections that showcase your project.

  • The <head> section sets the page title and links to your CSS stylesheet.
  • The <header> holds a headline and tagline that visitors see first.
  • Three <section> blocks organize your about text, skills list, and links.
  • The <footer> credits GitHub Actions as the deployment method.
  • Save index.html by pressing Cmd+S (macOS) or Ctrl+S (Windows).

You won't see the styled result yet. The next substep adds the CSS that makes the page look polished.

File not appearing in the sidebar?

  • Make sure you clicked the New File icon on the folder name, not on an existing file.
  • Confirm the file is named exactly index.html with no extra spaces or capital letters.
  • If you accidentally created the file inside a subfolder, drag it to the root level in the Explorer sidebar.

Still stuck? Help me create a new file in VS Code's Explorer sidebar.

Style your page with CSS

CSS controls how the page looks. You'll add a dark background, centered layout, and styled buttons to make the landing page visually appealing.

  • In the Explorer sidebar, click the New File icon on the MY-FIRST-PIPELINE folder again.
  • Type style.css and press Enter.
  • Paste the following code into style.css:
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #0d1117;
    color: #e6edf3;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    max-width: 600px;
    padding: 2rem;
    text-align: center;
}

header {
    margin-bottom: 2rem;
}

h1 {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    color: #58a6ff;
}

.tagline {
    font-size: 1.1rem;
    color: #8b949e;
}

h2 {
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
    color: #f0f6fc;
}

section {
    margin-bottom: 2rem;
}

.about p {
    line-height: 1.6;
    color: #c9d1d9;
}

.skills ul {
    list-style: none;
    text-align: left;
    display: inline-block;
}

.skills li {
    padding: 0.4rem 0;
    color: #c9d1d9;
}

.skills li::before {
    content: "✓ ";
    color: #3fb950;
}

.link-btn {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    margin: 0.3rem;
    background-color: #21262d;
    color: #58a6ff;
    text-decoration: none;
    border-radius: 6px;
    border: 1px solid #30363d;
    transition: background-color 0.2s;
}

.link-btn:hover {
    background-color: #30363d;
}

footer {
    margin-top: 2rem;
    color: #484f58;
    font-size: 0.85rem;
}

What does this CSS do?

This stylesheet gives your page a dark, GitHub-inspired look with clean spacing.

  • The * reset removes default browser margins so everything aligns consistently.
  • The body uses flexbox to center your content vertically and horizontally on a dark background (#0d1117).
  • The .link-btn class creates button-styled links with hover effects and rounded corners.
  • Green checkmarks (#3fb950) appear before each skill item using the ::before pseudo-element.
  • Save style.css by pressing Cmd+S (macOS) or Ctrl+S (Windows).

You'll see the full styled page when you open the HTML file in your browser in the next substep.

Not sure if the file saved?

  • Look at the file tab in VS Code. A white dot on the tab means unsaved changes.
  • Confirm style.css is at the same level as index.html in the Explorer sidebar, not inside a subfolder.

Need help? My CSS file doesn't seem to be saving or is in the wrong location.

✔️ Awesome, I've got everything!

Great. Double check that both index.html and style.css are saved, then continue to test your site.

ⓧ 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 First CI/CD Pipeline</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Hi, I'm a DevOps Learner</h1>
            <p class="tagline">This site deploys automatically with every push.</p>
        </header>
        <main>
            <section class="about">
                <h2>About This Project</h2>
                <p>This website is deployed using a CI/CD pipeline built with GitHub Actions. Every time I push code to the main branch, it goes live automatically.</p>
            </section>
            <section class="skills">
                <h2>What I Learned</h2>
                <ul>
                    <li>Writing GitHub Actions workflows in YAML</li>
                    <li>Configuring automated deployment triggers</li>
                    <li>Setting up GitHub Pages with Actions</li>
                    <li>The CI/CD push-to-deploy loop</li>
                </ul>
            </section>
            <section class="links">
                <h2>Find Me Online</h2>
                <a href="https://github.com" class="link-btn">GitHub</a>
                <a href="https://linkedin.com" class="link-btn">LinkedIn</a>
            </section>
        </main>
        <footer>
            <p>Deployed with GitHub Actions</p>
        </footer>
    </div>
</body>
</html>

Here is the complete style.css:

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #0d1117;
    color: #e6edf3;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    max-width: 600px;
    padding: 2rem;
    text-align: center;
}

header {
    margin-bottom: 2rem;
}

h1 {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    color: #58a6ff;
}

.tagline {
    font-size: 1.1rem;
    color: #8b949e;
}

h2 {
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
    color: #f0f6fc;
}

section {
    margin-bottom: 2rem;
}

.about p {
    line-height: 1.6;
    color: #c9d1d9;
}

.skills ul {
    list-style: none;
    text-align: left;
    display: inline-block;
}

.skills li {
    padding: 0.4rem 0;
    color: #c9d1d9;
}

.skills li::before {
    content: "✓ ";
    color: #3fb950;
}

.link-btn {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    margin: 0.3rem;
    background-color: #21262d;
    color: #58a6ff;
    text-decoration: none;
    border-radius: 6px;
    border: 1px solid #30363d;
    transition: background-color 0.2s;
}

.link-btn:hover {
    background-color: #30363d;
}

footer {
    margin-top: 2rem;
    color: #484f58;
    font-size: 0.85rem;
}
Test your site locally

Before you deploy anything through a pipeline, confirm the page looks correct on your own machine.

  • Open File Explorer (Windows) or Finder (macOS).
  • Navigate to your my-first-pipeline folder.
  • Double-click index.html to open it in your default browser.

You should see a dark-themed page with a blue heading that reads "Hi, I'm a DevOps Learner", a skills list with green checkmarks, and two button-styled links at the bottom.

Page looks unstyled or plain white?

  • Make sure style.css is in the same folder as index.html. If it is in a subfolder, the link in the HTML cannot find it.
  • Check that the filename is exactly style.css (not styles.css or Style.css). The <link> tag in the HTML references style.css exactly.
  • Try a hard refresh in your browser: Cmd+Shift+R (macOS) or Ctrl+Shift+R (Windows).

Still not working? Help me figure out why my CSS isn't loading on my HTML page.

Your website files are ready. Next up, you'll write the CI/CD workflow that automatically deploys these files to the internet every time you push code.

Write Your CI/CD Workflow

Your website looks great locally, but right now deploying it means manually uploading files every time you make a change. GitHub Actions lets you automate that entire process with a workflow file that lives inside your project.

A workflow file is a set of instructions written in YAML that tells GitHub exactly what to do when you push code. In this step, you will write a workflow that automatically deploys your site to GitHub Pages every time you push to the main branch.

In this step, get ready to:
  • Create the workflow directory structure that GitHub Actions looks for.
  • Write a deployment workflow in YAML with triggers, permissions, and jobs.
  • Understand how the build and deploy jobs connect into a pipeline.
Create the workflow directory

GitHub Actions only picks up workflow files stored in a specific folder path: .github/workflows/. Without this exact folder structure, GitHub will not detect your workflow.

  • Open VS Code's integrated terminal by pressing Ctrl+` (macOS and Windows).
  • Create the workflow directory by running this command:

macOS

mkdir -p .github/workflows

Windows

mkdir .github/workflows
  • Confirm the folder was created by running:
ls .github

You should see workflows listed in the output.

Don't see the workflows folder?

Make sure you ran the command from your project root (the my-first-pipeline folder). If your terminal opened somewhere else, run cd my-first-pipeline first.

Help me troubleshoot my missing .github/workflows directory

Create the deployment workflow file

This file is the heart of your CI/CD pipeline. It tells GitHub Actions when to run, what permissions it needs, and what jobs to execute.

  • In VS Code's Explorer sidebar, expand the .github folder, then workflows.
  • Right-click inside the workflows folder and select New File.
  • Name the file deploy.yml.
  • Add the workflow configuration by pasting this code into deploy.yml:
name: Deploy to GitHub Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

What does this configuration do?

  • name gives your workflow a human-readable label that shows up in the Actions tab.
  • on: push: branches: [main] triggers the workflow every time you push code to the main branch.
  • workflow_dispatch lets you trigger the workflow manually from the GitHub web interface.
  • permissions grants the workflow access to read your code and write to GitHub Pages.
  • concurrency prevents multiple deployments from running at the same time.

You won't see a change yet. The next chunk defines the jobs that do the actual work.

  • Below the concurrency section, add the jobs that build and deploy your site:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Pages
        uses: actions/configure-pages@v5

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: "./"

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

What do these jobs do?

Your workflow has two jobs that run in sequence:

  • build checks out your code, configures the Pages environment, and uploads your entire project folder as a deployment artifact.
  • deploy takes that artifact and publishes it to GitHub Pages. The needs: build line ensures deploy only runs after build finishes successfully.

This two-job structure is a common pipeline pattern. If the build fails, deploy never runs, protecting your live site from broken code.

  • Save deploy.yml.

Your pipeline is fully defined, but it will not run until you push your code to GitHub in the next step.

Seeing red squiggles in the YAML?

YAML is sensitive to indentation. Make sure you are using spaces (not tabs) and that each level is indented by exactly 2 spaces. Check that jobs: is at the very start of a line with no spaces before it.

Help me fix my deploy.yml YAML errors

✔️ Awesome, I've got everything!

Great. Double check you have saved deploy.yml before moving on.

ⓧ I'd like to double check the full code

Here is the complete deploy.yml file. Make sure yours matches exactly:

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Pages
        uses: actions/configure-pages@v5

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: "./"

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4
Understand the workflow structure

Take a step back and look at what you have built. Your workflow defines a complete deployment pipeline in a single file.

How does the pipeline flow?

When you push code to main, GitHub detects the workflow file and kicks off the pipeline:

  • Trigger: Your push activates the workflow.
  • Build: The build job checks out your code and packages it as an artifact.
  • Deploy: Once build succeeds, the deploy job publishes the artifact to GitHub Pages.

The needs: build keyword creates the dependency chain. Without it, both jobs would run at the same time and deploy might try to publish before the artifact exists.

Your pipeline is ready and waiting. Next up, you will push your code and watch GitHub Actions run the entire workflow automatically.

Push and Watch Your Pipeline Run

Your website and workflow file exist on your local machine, but GitHub Actions can only run when code lives on GitHub.

In this step, you will push your code to GitHub and watch the pipeline spring to life. Once GitHub receives your workflow file, it detects the trigger and runs the jobs automatically.

In this step, get ready to:
  • Push your code to GitHub with Git.
  • Watch your pipeline execute in the Actions tab.
  • Visit your live website deployed by the pipeline.
Commit and push your code

Git needs you to stage your files, package them into a commit, and then send that commit to GitHub. These three commands handle the entire process.

  • In VS Code, open the terminal by pressing Ctrl+` (backtick key, top-left of your keyboard).
  • Stage, commit, and push all your files by running these commands:
git add .
git commit -m "Add website and CI/CD pipeline"
git push origin main

What do these commands do?

  • git add . stages every file in your project for the next commit.
  • git commit -m "..." packages the staged files into a snapshot with a descriptive message.
  • git push origin main sends your commit to the main branch on GitHub.

First time pushing? You may see a sign-in prompt

If this is your first time pushing to GitHub from this machine, Git will open a browser window asking you to sign in to your GitHub account. Sign in and authorize access. This only happens once.

  • After the push completes, you should see output in your terminal that ends with a line referencing your main branch.

Push failed or permission denied?

  • If you see a sign-in popup, complete the GitHub authentication in your browser and try the push command again.
  • If you see "remote: Permission denied", double check that the repository URL matches your GitHub username. Run git remote -v to verify.
  • If you see "nothing to commit", make sure you saved all your files in VS Code before running git add . again.

Help me troubleshoot my git push

Watch your pipeline run

The moment your code arrives on GitHub, the workflow trigger fires. GitHub detected a push to main and is now running your deploy.yml file.

  • Open your repository page on GitHub in your browser.
  • Click the Actions tab near the top of the page (next to Pull requests).
  • You should see a workflow run titled Add website and CI/CD pipeline (matching your commit message).
  • Click on the workflow run to open it.
  • You will see a visualization showing your two jobs: build and deploy. Watch as each step turns green.

What is happening behind the scenes?

GitHub spins up a fresh virtual machine, checks out your code, packages your HTML and CSS into an artifact, and then deploys that artifact to GitHub Pages. The entire process takes about 30-60 seconds.

Green checkmarks on every step mean the pipeline succeeded. A red X means something failed. Click on any step to read its logs.

  • Wait until both jobs show green checkmarks before moving on.

Seeing a red X on one of the jobs?

  • Click on the failed job, then click the failed step to read the error logs.
  • If the deploy job fails with a permissions error, go back to your repository Settings then Pages and confirm the source is set to GitHub Actions.
  • If the build job fails, check that your deploy.yml file is saved inside the .github/workflows/ folder path exactly.

Help me debug my failing GitHub Actions workflow

Visit your live site

Your pipeline finished. Your website is now live on the internet at a public URL that anyone can visit.

  • Open a new browser tab.
  • Navigate to your live site URL:
https://[[GITHUB_USERNAME="YOUR-USERNAME"]].github.io/my-first-pipeline/
  • You should see your personal landing page with your name, the dark background, the blue heading, and the skill list you built in the previous step.

What just happened?

You pushed code and it appeared on the internet without you touching a server, copying files, or clicking a deploy button. That is CI/CD in action. The pipeline handled everything.

Seeing a 404 page?

  • GitHub Pages can take 1-2 minutes after the workflow finishes to become available. Wait a moment and refresh.
  • Double check the URL uses your exact GitHub username (case-sensitive) and the repository name my-first-pipeline.
  • Confirm the Actions tab shows both jobs with green checkmarks. If the deploy job has not finished yet, the site is not live yet.

Help me figure out why my GitHub Pages site is not loading

Your pipeline works. You pushed code once and it went live on the internet automatically. Next up, you will make a change to your site and watch the full CI/CD loop repeat itself.

Make a Change and See Auto-Deploy

Your website is live on the internet, deployed automatically by the pipeline you built.

Now it's time to prove the "continuous" part of CI/CD. You'll make a visible change to your site and push it. Without any manual deployment steps, your pipeline picks up the change and updates the live site automatically.

In this step, get ready to:
  • Edit your website's content in VS Code.
  • Push the change and watch your pipeline auto-deploy it.
  • Verify the full CI/CD loop by seeing your live site update.
Edit your site

To see auto-deployment in action, you need to make a change that's visible on the page. You'll update the heading text in your HTML file.

  • In VS Code, open index.html.
  • Find the <h1> tag inside the <header> section. It currently says:
<h1>Hi, I'm a DevOps Learner</h1>
  • Change the text between the <h1> tags to something personal. For example, replace it with your name:
<h1>Hi, I'm [[YOURNAME="your name here"]]</h1>

Why this change?

Any visible change works here. The goal is to see a difference between your current live site and what gets deployed next. Changing the heading makes it easy to confirm the auto-deploy worked.

  • Save index.html.
Push the change

Your workflow triggers on every push to the main branch. Committing and pushing your edit is all it takes to kick off a new deployment.

  • Stage, commit, and push your change by running these commands in VS Code's terminal:
git add .
git commit -m "Update site content"
git push origin main

What do these commands do?

git add . stages all changed files for commit. git commit -m "Update site content" saves the changes locally with a message describing what you did.

git push origin main sends your commit to GitHub. The moment GitHub receives it, your workflow triggers automatically.

Push rejected or authentication failed?

If you see an authentication error, GitHub may be prompting you to sign in. Follow the browser popup or credential helper that appears.

If the push is rejected because of remote changes, run git pull origin main first, then try pushing again.

Help me fix a git push error.

Verify auto-deployment

This is where the CI/CD loop comes full circle. Your push triggered the workflow, and now you can watch it deploy your update in real time.

  • Open your repository on GitHub in your browser.
  • Click the Actions tab.
  • You should see a new workflow run labelled Update site content. Click into it to watch the steps execute.

What should I see?

You should see a second workflow run appear in the list (your first run from the previous step is still there). The new run shows a yellow spinner while in progress, then green checkmarks once both the build and deploy jobs finish.

  • Once the workflow finishes with green checkmarks, open your live site:
https://[[GITHUB_USERNAME="YOUR-USERNAME"]].github.io/my-first-pipeline/
  • Refresh the page. You should see your updated heading text live on the internet.

This is CI/CD in action. Every push automatically updates your live site with zero manual deployment steps.

Site not showing your change?

Wait for the workflow to finish (green checkmarks on both jobs) before refreshing your site. Deployment takes about 30-60 seconds after the workflow starts.

If the workflow passed but your page looks the same, try a hard refresh. Press Cmd+Shift+R (macOS) or Ctrl+Shift+R (Windows) to clear your browser cache.

Help me figure out why my updated site isn't showing.

Secret mission

Add a Linting Quality Gate

Your pipeline deploys whatever you push, even if your HTML is broken. Add an automated quality gate that scans your code for errors and blocks deployment when something is wrong.

Clean Up Your Resources

Clean Up Your Resources

This project runs entirely on free GitHub services, so there are no ongoing costs. Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

  • A public GitHub repository (my-first-pipeline).
  • A GitHub Pages site hosted at your repository's URL.
  • GitHub Actions workflow minutes (free for public repositories).
  • Local project files on your computer.

Keep everything running

No action needed. Choose this if you are still actively building or want your site to stay live. Your GitHub Pages site remains accessible indefinitely at no cost. Push updates anytime.

Pause - I'll come back to this later

Since this project has no running processes or paid resources, there is nothing to pause. Your site stays live at no cost and your repository stays available whenever you return.

  • If you want to stop the site from being publicly accessible while keeping the code, go to your repository on GitHub.
  • Click Settings.
  • In the left sidebar, click Pages.
  • Under Source, select None to disable GitHub Pages deployment. Your code remains in the repository and you can re-enable Pages later.

Delete - I don't want to use this again

Remove all project resources and start fresh. This deletes your repository, GitHub Pages site, and workflow history permanently.

  • On GitHub, navigate to your my-first-pipeline repository.
  • Click Settings.
  • Scroll down to the Danger Zone section and click Delete this repository.
  • Click I want to delete this repository.
  • Click I have read and understand these effects.
  • Type the repository name to confirm, then click Delete this repository.

Delete local files by running this in PowerShell:

cd ~/Desktop
Remove-Item -Recurse -Force my-first-pipeline

This removes the cloned project folder from your Desktop.

That's a Wrap!

That's a Wrap!

Nice work. You just built a real CI/CD pipeline from scratch and deployed a live website that updates automatically every time you push code. That is the core of DevOps.

You've learned how to:

  • Wrote a GitHub Actions workflow in YAML that triggers automatically on every push to main.
  • Deployed a live website to GitHub Pages with zero manual steps using a fully automated pipeline.
  • Verified the full CI/CD loop by pushing a change and watching it go live automatically.
  • Added an automated quality gate that blocks broken code from deploying.

Ready to quiz yourself?