What is CI/CD?

CI/CD is made up of two parts that help us automatically get our websites online:

1. Continuous Integration (CI)

Think of this like an automatic building system. When you and your team push code to GitHub, CI automatically:

  • Takes everyone’s new code
  • Combines it together
  • Builds it into a website

It’s like having a robot assistant that takes all the pieces of your website and puts them together automatically.

2. Continuous Deployment (CD)

This is the part that puts your website online automatically. Once your website is built, CD:

  • Takes the finished website files
  • Puts them online
  • Makes them available to visitors

It’s like having another robot that takes your finished website and automatically publishes it for everyone to see.

The great thing about CI/CD is that it happens automatically every time you push your code to GitHub. You don’t need to do these steps manually anymore!

What is GitHub Actions?

GitHub Actions is GitHub’s built-in tool for CI/CD. It’s free for public repositories and lets you create automated workflows.

A workflow is like a list of instructions that tells GitHub what to do when you push your code. For example:

  1. When someone pushes code
  2. Build the website
  3. Put it online

Creating Your First GitHub Action

Let’s create a simple workflow that deploys a website to GitHub Pages.

  1. First, create this folder structure in your repository:
.github/
  workflows/
    deploy.yml
  1. Add this code to deploy.yml:
2. Add this code to `deploy.yml`:

```yaml
name: Deploy to GitHub Pages

on:
  # Run this workflow when code is pushed to the main branch
  push:
    branches: [ main ]
  
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions needed for GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one deployment at a time
concurrency:
  group: "pages"
  cancel-in-progress: false
  
jobs:
  deploy:
    environment:
      name: github-pages
      url: $
      
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        
      - name: Setup Pages
        uses: actions/configure-pages@v4
        
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: '.'  # Upload the entire repository
          
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Understanding the Workflow

Let’s break down what this workflow does:

  1. name: Deploy to GitHub Pages
    • This is just the name of your workflow
  2. on: push: branches: [ main ]
    • This tells GitHub when to run the workflow
    • In this case, it runs when someone pushes code to the main branch
  3. jobs: deploy:
    • This is the main task the workflow will do
    • In our case, it’s deploying our website
  4. The steps: section lists everything that happens:
    • Checkout code: Gets your code from GitHub
    • Setup Pages: Prepares GitHub Pages for deployment
    • Upload artifact: Uploads your website files
    • Deploy to GitHub Pages: Makes your website live

Setting Up GitHub Pages

Before your workflow will work, you need to:

  1. Go to your repository settings
  2. Scroll down to “Pages”
  3. Under “Build and deployment”:
    • Source: Choose “GitHub Actions”

Testing Your Workflow

Step 1: Add the workflow file to your repository:

git add .github/workflows/deploy.yml
git commit -m "Add GitHub Actions workflow"
git push

Step 2: Go to the “Actions” tab in your repository

Step 3: You should see your workflow running

If everything worked:

  • Your website files will be uploaded
  • GitHub Pages will update with your new site

What We Learned

  • CI/CD helps automate checking and deploying your code
  • GitHub Actions is a free tool for creating CI/CD workflows
  • Workflows are like instruction lists for what to do with your code
  • You can use workflows to automatically deploy to GitHub Pages

Remember:

  • Always check your files locally before pushing
  • Check the Actions tab if something goes wrong
  • Make sure your repository settings are correct

Video

What is CI/CD? Using a Github Action workflow to deploy to Github Pages.

Video

Tags: