CI/CD Explained: Build a Simple Pipeline with GitHub Actions 🛠️
Eva Clari

Eva Clari @eva_clari_289d85ecc68da48

About: I’m Eva Clari 👋, a Technical Writer who loves building cool stuff for the web and sharing what I learn along the way. You’ll mostly find me writing about web development and software engineering.

Location:
London
Joined:
Jan 29, 2025

CI/CD Explained: Build a Simple Pipeline with GitHub Actions 🛠️

Publish Date: May 9
7 2

🚀 Automate your workflow, ship code faster, and break fewer things.

CI/CD isn't just for big teams or large-scale enterprise apps; it's for every developer who wants to deliver better code faster. Whether building a portfolio project or working on production-ready software, having a CI/CD pipeline in place can save you hours and avoid late-night debugging marathons.

In this post, we’ll walk through:

  • What CI/CD actually means (in plain English),
  • Why you should be using it,
  • How to build your first CI pipeline using GitHub Actions,
  • And how to expand it toward full continuous deployment.

🤔 What is CI/CD?

CI/CD stands for:

  • Continuous Integration (CI): Automatically building and testing your code whenever you push changes.
  • Continuous Deployment (CD): Automatically pushing your tested, verified code into production (or staging).

Put: Every time you push code to your repo, CI/CD makes sure it works and optionally delivers it straight to your users. No more “it worked on my machine” moments.


🔥 Why Does CI/CD Matter?

Here's what a CI/CD pipeline brings to your workflow:

  • Catches bugs early (run tests on every commit)
  • Reduces deployment stress (automated builds & releases)
  • Speeds up releases (no more manual deployments)
  • Promotes better collaboration (clean, tested codebase)

CI/CD isn't just about automation, it's about confidence in every line you ship.


⚙️ Why GitHub Actions?

GitHub Actions is a powerful automation engine built right into GitHub. It lets you run workflows based on events like push, pull_request, or even issue_comment.

What makes it great:

  • No third-party setup
  • Free for public repos
  • Massive ecosystem of prebuilt actions
  • Easy-to-read YAML configs

You can use it for testing, linting, deploying, and even sending Slack notifications.


🚧 What We’re Building

Let’s set up a CI pipeline for a sample Node.js project that:

  1. Runs on push and pull requests
  2. Installs dependencies
  3. Runs unit tests
  4. Builds the app

You'll be able to take this and extend it to React, Python, Go, Docker, or your stack of choice.


🗂 Project Structure

Make sure your repo looks something like this:

my-app/
├── .github/
│   └── workflows/
│       └── ci.yml
├── package.json
├── src/
├── tests/
└── ...
Enter fullscreen mode Exit fullscreen mode

🧩 Writing the Workflow File

Inside .github/workflows/ci.yml, add:

name: CI Pipeline

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build-and-test:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm install

      - name: Run tests
        run: npm test

      - name: Build the app
        run: npm run build
Enter fullscreen mode Exit fullscreen mode

Breakdown:

  • 🧪 Runs tests with npm test
  • 🧱 Builds the app with npm run build
  • 🚀 Works on every push and PR to main

You can customize these steps based on your stack (e.g., add linters, code coverage, etc.).


🧪 Testing Your CI Setup

  1. Make a change in your repo.
  2. Push it or open a pull request.
  3. Head over to the Actions tab in GitHub.
  4. Watch your pipeline in real time 🎉

Green means good. Red? Time to debug.


🚀 Bonus: Add CD (Continuous Deployment)

Want to auto-deploy after passing tests? Add another step!

For GitHub Pages:

- name: Deploy to GitHub Pages
  uses: peaceiris/actions-gh-pages@v3
  with:
    github_token: ${{ secrets.GITHUB_TOKEN }}
    publish_dir: ./dist
Enter fullscreen mode Exit fullscreen mode

For Vercel, Netlify, Render, etc.:

Most modern hosting platforms provide GitHub Actions or CLIs. You’ll just:

  1. Add your deployment token as a GitHub Secret
  2. Call the CLI in your workflow

🔐 Managing Secrets

Secrets like API keys or deploy tokens should never be hardcoded. Instead:

  • Go to your repo’s Settings > Secrets and Variables > Actions
  • Add secrets like VERCEL_TOKEN, API_KEY, etc.
  • Use them like this:
env:
  MY_SECRET: ${{ secrets.MY_SECRET }}
Enter fullscreen mode Exit fullscreen mode

🧠 Best Practices for CI/CD Pipelines

  • ✅ Keep builds fast (avoid bloated steps)
  • ✅ Separate CI and CD jobs
  • ✅ Add linters and code formatters
  • ✅ Use caching to speed up builds
  • ✅ Test across environments with matrix builds

📚 Learn More

If you’re looking to go deeper, especially in Android CI/CD, check out this course:

🎓 CI/CD for Android Developers Training

A hands-on, instructor-led program to build real CI/CD pipelines tailored for Android apps.

Other helpful links:


🧩 Wrapping Up

CI/CD isn't just for large teams;; it's for anyone who wants to automate, test, and ship code better. Thanks to tools like GitHub Actions, you can get started in minutes.

Start small. Automate what you can. And keep iterating. 💡


💬 Have you set up a CI/CD pipeline before? What tools are you using? Share your experience or drop your questions in the comments!

Comments 2 total

  • Michael Liang
    Michael LiangMay 9, 2025

    Really helpful for devops.

  • Jonghwan Park
    Jonghwan ParkMay 12, 2025

    Thank you for concise explanations! It was educational to review

Add comment