← Back to articles

CI CD Deployment

Path: Computer Tech/System Configuration/Environment Setup/Dev Environment and Versioning/CI CD Deployment.mdUpdated: 2/3/2026

CI/CD Deployment

What Is CI/CD?

CI/CD = Continuous Integration / Continuous Deployment

Simple explanation: Push code to GitHub β†’ automatic build β†’ automatic deployment β†’ site goes live

Traditional workflow:

bash
# Make changes
# Build locally
# FTP upload to server
# Test in production

CI/CD workflow:

bash
git push origin main
# Done! Everything else is automatic

How It Works

  1. You push code to GitHub/GitLab/Bitbucket
  2. Webhook triggers your hosting platform
  3. Platform pulls the latest code
  4. Build process runs (if needed)
  5. Site deploys automatically
  6. You get notified of success/failure

Time saved: Hours per week β†’ Seconds per deployment

Key Concepts

Continuous Integration (CI):

  • Automatically test code when pushed
  • Catch errors before they reach production
  • Multiple developers can work without conflicts

Continuous Deployment (CD):

  • Automatically deploy to production
  • No manual steps required
  • Faster iteration cycles

Pipeline: The series of automated steps from code push to live deployment.

Webhook: GitHub notifies your server when code is pushed.

Common CI/CD Platforms

Platform as a Service (PaaS)

Examples: Vercel, Netlify, Sevalla, Render, Railway

How it works:

  • Connect GitHub repo
  • Select branch to deploy
  • Platform handles everything

Pros:

  • βœ… Zero configuration
  • βœ… Automatic builds
  • βœ… Preview deployments for PRs
  • βœ… One-click rollbacks
  • βœ… Built-in CDN

Cons:

  • ❌ Higher cost (usage-based)
  • ❌ Less control

Best for: Modern web apps (React, Vue, Next.js, Astro)

VPS with Git Hooks

Examples: DigitalOcean, Linode, Hostinger VPS, AWS EC2

How it works:

  • Set up Git webhook manually
  • Write deployment script
  • Server pulls and builds on push

Pros:

  • βœ… Full control
  • βœ… Lower cost (flat monthly rate)
  • βœ… Can customize everything
  • βœ… Better for complex setups

Cons:

  • ❌ Requires initial setup
  • ❌ Manual configuration
  • ❌ You maintain the server

Best for: Custom setups, cost-conscious projects, learning

GitHub Actions

Built into GitHub

How it works:

  • Create .github/workflows/deploy.yml
  • Define build and deploy steps
  • Runs on GitHub's servers

Pros:

  • βœ… Free for public repos
  • βœ… Integrates perfectly with GitHub
  • βœ… Flexible and powerful
  • βœ… Can deploy anywhere

Cons:

  • ❌ YAML configuration required
  • ❌ Learning curve

Best for: Open source projects, complex workflows

Example Workflows

Static Site (Astro, Hugo, Jekyll)

Traditional:

  1. Edit markdown
  2. Run build locally
  3. FTP upload to server
  4. Hope nothing breaks

With CI/CD:

  1. Edit markdown
  2. git push origin main
  3. Done!

Node.js App

Traditional:

  1. Make code changes
  2. SSH into server
  3. Pull latest code
  4. npm install
  5. Restart server manually

With CI/CD:

  1. git push origin main
  2. Server automatically updates

WordPress

CI/CD is less common (theme/plugin files vs database content)

Can use for:

  • Theme development
  • Plugin deployment
  • Config file syncing

Speed Comparison

Build tools matter:

  • npm: Standard, slower
  • Bun: 3x faster than npm
  • pnpm: 2x faster than npm
  • Yarn: Similar to npm

Static sites are fastest:

  • Pre-built HTML/CSS/JS
  • No server processing
  • Can use global CDN

Setting Up CI/CD

Option 1: Use a PaaS (Easiest)

  1. Sign up (Vercel, Netlify, Sevalla)
  2. Connect GitHub repo
  3. Select branch
  4. Deploy

Time: 5 minutes

Option 2: VPS with Git Hooks

  1. SSH into server
  2. Install dependencies (Node.js/Bun)
  3. Clone repo
  4. Create deployment script
  5. Set up webhook endpoint
  6. Configure GitHub webhook

Time: 30-60 minutes (one-time setup)

Option 3: GitHub Actions

  1. Create .github/workflows/deploy.yml
  2. Define build steps
  3. Add deployment credentials
  4. Push to GitHub

Time: 20-40 minutes

Best Practices

Use environment variables:

  • Never commit API keys
  • Store secrets in platform settings
  • Different values for dev/staging/production

Test before deploying:

  • Run builds locally first
  • Use preview deployments
  • Have a rollback plan

Monitor deployments:

  • Check deployment logs
  • Set up notifications
  • Track build times

Use branches:

  • main β†’ production
  • develop β†’ staging
  • Feature branches β†’ preview deployments

Common Issues

Build Fails

Check:

  • Dependencies installed correctly?
  • Environment variables set?
  • Build command correct?
  • Enough memory/CPU?

Old Version Still Showing

Check:

  • Deployment actually succeeded?
  • Clear CDN/browser cache
  • Correct files deployed?

Slow Builds

Solutions:

  • Use faster package manager (Bun > npm)
  • Cache dependencies
  • Optimize build process
  • Reduce bundle size

Cost Comparison

PaaS platforms:

  • Free tier: Often available
  • Paid: $10-100+/month (usage-based)
  • Best for: Small to medium traffic

VPS:

  • Cost: $4-20/month (fixed)
  • Best for: Predictable traffic, multiple projects

GitHub Actions:

  • Free: 2,000 minutes/month (public repos)
  • Paid: $0.008/minute over limit

When to Use CI/CD

Yes, use CI/CD if:

  • βœ… You deploy frequently
  • βœ… Multiple people work on the project
  • βœ… You want to catch errors early
  • βœ… You value automation

Skip CI/CD if:

  • ❌ One-page static site that never changes
  • ❌ No version control used
  • ❌ Updating once per year

Learning Resources

Summary

CI/CD = Automation for deployments

Benefits:

  • Save time
  • Reduce errors
  • Deploy faster
  • Better collaboration

Options:

  • Easy: PaaS platforms (Vercel, Netlify, Sevalla)
  • Control: VPS with Git hooks
  • Flexible: GitHub Actions

Get started:

  1. Choose a platform
  2. Connect your repo
  3. Push code
  4. Watch it deploy automatically

Time from push to live: 30 seconds to 3 minutes (depending on platform and build size)