# 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 - **GitHub Actions:** https://docs.github.com/en/actions - **Vercel docs:** https://vercel.com/docs - **Netlify docs:** https://docs.netlify.com - **Git webhooks:** https://docs.github.com/en/webhooks - **CI/CD tutorial:** Search "CI/CD explained" on YouTube ## 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)