CI/CD and GitHub Actions

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:
bash 
	.github/
	  workflows/
	    deploy.yml
  1. Add this code to deploy.yml:
yaml 
	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: ${{ steps.deployment.outputs.page_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
  1. 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
  1. jobs: deploy:
  • This is the main task the workflow will do
  • In our case, it’s deploying our website
  1. 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

  1. Add the workflow file to your repository:
bash 
	git add .github/workflows/deploy.yml
	git commit -m "Add GitHub Actions workflow"
	git push
  1. Go to the “Actions” tab in your repository
  2. 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