Continuous Integration (CI) and Continuous Deployment (CD) enable you to ship updates to your web application seamlessly, without manual intervention. In this post, we'll walk through how to build a basic static site, push it to a GitHub repository, configure GitHub Pages for hosting, and set up automated deployments so that every time you push code, GitHub Pages rebuilds and publishes your changes. By the end, you'll understand:

1. What GitHub Pages is and why it's a great starting point for CI/CD.
2. How CI/CD works in the context of a static website.
3. Prerequisites for following along.
4. Step-by-step instructions to create a new repository, clone it locally, build a simple HTML page, and configure GitHub Pages.
5. How to verify that changes you make locally are automatically deployed.

---

Why Use GitHub Pages for CI/CD?

GitHub Pages is a free service from GitHub that lets you host a static website directly from a GitHub repository. Key benefits:

• Free and Simple: You don't need any cloud hosting provider—just push your code to GitHub and configure Pages.
• Automatic Builds: Whenever you push new commits to the chosen branch, GitHub Pages rebuilds and redeploys your site.
• Custom Domains: By default, GitHub provides a <username>.github.io/<repo> URL, but you can attach your own domain.
• Ideal for Static Sites: If you only need HTML/CSS/JavaScript without server-side code, Pages handles everything. Dynamic server logic (e.g., Node.js or Python backends) requires a separate solution (e.g., AWS, Netlify, or Heroku), but static hosting is fast to set up.

In this guide, we'll show how CI/CD works step by step, deploying a basic "sign-up form" page so you can see how changes propagate from your local machine to the live URL automatically.

---

CI vs. CD in a Nutshell

• Continuous Integration (CI): Every time you push code, GitHub triggers a build process (in this case, simply packaging or validating your static files). You don't need to manually run build scripts or upload files.
• Continuous Deployment (CD): After building, the updated site is automatically published to the live URL. No manual "copy to FTP" or "click Deploy" steps are required. As soon as GitHub Pages finishes, your visitors see the latest version.

Put simply: with CI/CD, push → build → deploy → live, with zero manual steps after the initial setup.

---

Prerequisites

Before you begin, ensure you have:

1. A GitHub Account: Create one at github.com if you don't already have it.
2. Git Installed on Your Machine: So you can run git clone, git add, git commit, and git push.
3. VS Code (or Any Code Editor): We'll use Visual Studio Code here, but any editor (Sublime Text, Atom, etc.) works.
4. Basic HTML Knowledge: We'll build a simple index.html page containing a sign-up form (username + password + confirm password).
5. GitHub CLI or SSH Key (Optional but Recommended): If you prefer using SSH over HTTPS for git clone, make sure your SSH key is registered with GitHub. Otherwise, you can clone via HTTPS.

Once you have these in place, you're ready to dive into creating and deploying your site.

---

1. Create a New GitHub Repository

1. Log in to GitHub and click New repository (the green button on the top right).
2. Give it a name, for example:

   my-github-pages-site

3. Choose Public. (Pages works for both public and private repos if you have GitHub Pro or a paid plan, but public is simplest.)
4. Do not initialize with a README or .gitignore; we'll start from an empty repo.
5. Click Create repository.

At this point, your new repository exists on GitHub, but it's empty. You'll see instructions under "…or create a new repository on the command line" showing how to clone it.

---

2. Clone the Repository Locally

1. Copy the repository's HTTPS (or SSH) URL.
2. Open a terminal on your computer and choose (or create) a folder where you want to store your project. For example, on macOS:

   cd ~/Desktop
   mkdir github-pages-ci-cd
   cd github-pages-ci-cd

3. Clone the newly created repo:

   git clone https://github.com/<your-username>/my-github-pages-site.git

4. Navigate into the repo folder:

   cd my-github-pages-site

Since the repo is empty, you'll see a message like "Cloning into 'my-github-pages-site'… … done. You appear to have cloned an empty repository." That's expected.

---

3. Create Your Basic Static Site

In VS Code (or your editor of choice), open the my-github-pages-site folder. You'll notice it's empty. We'll now create a simple index.html file for our sign-up form.

1. In VS Code, click File → New File and save it as index.html at the root of the repo.
2. Paste the following HTML code (a basic username/password/confirm password form):

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sign Up</title>
     <style>
       body {
         font-family: Arial, sans-serif;
         background-color: #f4f4f4;
         display: flex;
         align-items: center;
         justify-content: center;
         height: 100vh;
       }
       .container {
         background-color: #fff;
         padding: 2rem;
         border-radius: 8px;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         width: 300px;
       }
       .container h2 {
         text-align: center;
         margin-bottom: 1rem;
       }
       .form-group {
         margin-bottom: 1rem;
       }
       .form-group label {
         display: block;
         margin-bottom: 0.3rem;
       }
       .form-group input {
         width: 100%;
         padding: 0.5rem;
         border: 1px solid #ccc;
         border-radius: 4px;
       }
       .btn {
         width: 100%;
         padding: 0.7rem;
         background-color: #007bff;
         color: #fff;
         border: none;
         border-radius: 4px;
         cursor: pointer;
       }
       .btn:hover {
         background-color: #0056b3;
       }
     </style>
   </head>
   <body>
     <div class="container">
       <h2>Create an Account</h2>
       <form>
         <div class="form-group">
           <label for="username">Username</label>
           <input type="text" id="username" placeholder="Enter username" required />
         </div>
         <div class="form-group">
           <label for="password">Password</label>
           <input type="password" id="password" placeholder="Enter password" required />
         </div>
         <div class="form-group">
           <label for="confirm-password">Confirm Password</label>
           <input type="password" id="confirm-password" placeholder="Confirm password" required />
         </div>
         <button type="submit" class="btn">Sign Up</button>
       </form>
     </div>
   </body>
   </html>
   

3. Save the file. This is all the HTML and CSS we need for our static page. No JavaScript or back-end is required since this is purely a demonstration of CI/CD with Pages.

---

4. Preview Locally (Using Live Server)

To confirm your page looks correct before pushing:

1. Install the Live Server extension in VS Code (if you don't already have it).
2. In index.html, click Go Live at the bottom right of VS Code.
3. A new browser tab opens pointing to something like http://127.0.0.1:5500/index.html. You should see your sign-up form styled exactly as above.

If you don't see "Go Live," install the "Live Server" extension, reload VS Code, then try again. Verifying locally ensures you catch any typos before deployment.

---

5. Commit and Push to GitHub

Once you're happy with your local preview, it's time to push the code to GitHub:

1. In the terminal (inside my-github-pages-site), stage all changes:

   git add .

2. Commit your changes with a message:

   git commit -m "Add initial index.html with sign-up form"

3. Push to the main branch:

   git push origin main

Now your index.html is in the main branch on GitHub.

---

6. Configure GitHub Pages

1. On GitHub, navigate to your repository (my-github-pages-site).
2. Click Settings → Pages (in the left sidebar).
3. Under Build and deployment, you'll see Deploy from a branch.
4. For Branch, select main. For Folder, choose / (root).
5. Because index.html is at the repository's root, "root" is the correct folder.
6. Click Save.

Once you save, GitHub immediately triggers a build. Below, you'll see a note:

"Your site is ready to be deployed at https://.github.io/my-github-pages-site/ in a few minutes."

GitHub Pages leverages a built-in GitHub Action behind the scenes to build and deploy a static site. You don't need to write any YAML actions yourself; Pages configures it automatically. But you can check the Actions tab to see the workflow run.

---

7. Verify the Live URL

1. After a minute or two, click the provided URL (e.g., https://.github.io/my-github-pages-site/).
2. You should see the same sign-up form you built locally.
3. Test it in an incognito window or another browser to confirm it's publicly accessible. Anyone with the link can view the page.

At this point, CI/CD is working—you've built, committed, and pushed, and GitHub Pages handled building and deploying automatically.

---

8. Make a Change and Watch CI/CD in Action

Let's modify the form to confirm that updates happen automatically:

1. In VS Code, open index.html.
2. Locate the “Confirm Password” input and change its label text, for example:

<div class="form-group">
  <label for="confirm-password">Verify Password</label>
  <input type="password" id="confirm-password" placeholder="Verify password" required />
</div>

3. Save the file.
4. Stage, commit, and push again:

   git add index.html
   git commit -m "Update confirm password label to 'Verify Password'"
   git push origin main

5. On GitHub, switch to the Actions tab. You'll see a new workflow run—“Github Pages build.” It should complete successfully within a minute.
6. Once that finishes, refresh your live site (e.g., https://.github.io/my-github-pages-site/). You should now see “Verify Password” instead of “Confirm Password.”

Because Pages CI/CD rebuilt and redeployed automatically, the updated label appears live without any extra steps. That's CI/CD in action: every commit triggers a build → Pages deploys changes → visitors see the latest code.

---

9. Custom Domain (Optional)

If you own a custom domain (e.g., www.myawesomesite.com) and want to serve your GitHub Pages site under your own URL:

1. In your repo’s Settings → Pages, under Custom domain, enter www.myawesomesite.com and save.
2. In your DNS provider (e.g., GoDaddy, Namecheap), create a CNAME record pointing www to <your-username>.github.io.
3. It can take up to 24 hours for DNS changes to propagate. Once propagated, visiting www.myawesomesite.com will serve your Pages site.

Using a custom domain is entirely optional—by default, GitHub hosts your site under github.io.

---

10. Tips & Best Practices

• Branching Strategy: If you prefer keeping main “clean” (e.g., only stable releases), you can choose to deploy from a gh-pages branch. Create gh-pages, push index.html there, and set Pages to use gh-pages instead of main. (GitHub Docs: Choosing a Publishing Source)
• Verify Workflow Logs: Under Actions, click the Pages workflow to see build logs. This helps debug if the site doesn’t deploy or shows errors.
• Directory Structure: If your static site is in a subfolder (e.g., /docs), set Pages’ folder setting to /docs. Otherwise, keep it in root.
• HTTPS Enforcement: GitHub Pages automatically sets up HTTPS. Make sure “Enforce HTTPS” is checked under Pages settings.
• 404 Pages & Ongoing Maintenance: Add a 404.html to handle broken links. Keep your repo tidy by removing unused files.

---

Conclusion

By leveraging GitHub Pages, you can set up a fully automated CI/CD pipeline for static websites in just a few steps:

1. Create a new repo on GitHub.
2. Clone it locally and build your static site (e.g., index.html).
3. Push your code to main.
4. Configure GitHub Pages to deploy from main (root folder).
5. Observe the automatic build and deploy process under the Actions tab.

Every time you push a change—whether it’s as simple as updating a label, adding a stylesheet, or introducing a new page—GitHub Pages rebuilds and publishes it. No manual FTP uploads, no separate build server needed. This workflow is ideal for landing pages, documentation, project sites, or any purely static web application.

Ready to try it yourself? Create a repository, paste in the HTML above (or your own static files), configure Pages, and watch your site go live. With CI/CD in place, you can focus on writing code and content, confident that GitHub will handle the “build → deploy → live” cycle automatically. Happy deploying!