Project I : Automating CI/CD Pipeline for a Simple Web Application

WeeklyTechReview
Dec 21, 2024
3 min read

Updated: Dec 22, 2024

In this guide, we’ll walk through the process of creating a simple web application and automating its deployment using a CI/CD pipeline with GitHub Actions and Netlify. CI/CD (Continuous Integration and Continuous Deployment) is an essential part of modern development workflows, allowing you to automate building, testing, and deploying your code seamlessly.

We’ll break the process into clear steps:

Creating a basic web application.
Hosting it on GitHub.
Setting up GitHub Actions for automating the build and deployment process.
Deploying the application to Netlify, a popular platform for hosting static websites.

Step 1: Setting Up the Project

Task: Create the basic structure of the project.

Create a Simple Web Application:

To start, we need a basic web application. Let’s create a Web-Application Project. Here is a simple file structure to organize the project:

/MyPortfolio

├── index.html

├── styles.css

└── README.md

Folder Structure image — Folder Structure

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Portfolio</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to My Portfolio</h1>
  <p>This is a simple website to demonstrate CI/CD automation.</p>
</body>
</html>

styles.css

body {
font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

Initialize a Git Repository:

To start versioning the project with Git, we need to initialize a Git repository and commit our changes.

Open a terminal and navigate to the project directory.
Run the following commands to initialize the repository:
bash

git init
git add .
git commit -m "Initial commit"
git branch -M main

Push Code to GitHub:

Create a new repository on GitHub (e.g., Web-Application).
Push the local repository to GitHub:
bash
Copy code
git remote add origin <repository-URL> git push -u origin main

Now your code is hosted on GitHub and ready for the next step!

Step 2: Creating a CI/CD Workflow with GitHub Actions

Task: Automate the deployment process.

GitHub Actions is a powerful tool that allows you to automate various workflows in your GitHub repositories, including Continuous Integration (CI) and Continuous Deployment (CD).

Create a GitHub Actions Workflow:

We will create a simple workflow file that listens for code changes pushed to the main branch, then automatically deploys it to Netlify.

Create the directory .github/workflows/ in your project.
Inside this folder, create a file named deploy.yml with the following contents:

name: Deploy to Netlify
on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

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

      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v2.0
        with:
          publish-dir: "./"
          production-deploy: true
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

Pipeline Image — Pipeline in Actions Tab

This workflow does the following:

Triggers on pushes to the main branch.
Checks out the code to the workflow.
Deploys the site to Netlify using the nwtgck/actions-netlify action.

Set Up Netlify:

Sign up for Netlify at Netlify.
Create a new site on Netlify and connect it to your GitHub repository. Netlify will ask for access to your GitHub, and once you approve, it will list your available repositories.
After setting up, you'll get a Site ID and Auth Token that are required for deployment.

Test the Workflow:
Now that everything is set up, it's time to test the workflow. Here's what you need to do:
1. Make a small change to your index.html file (for example, change the text inside the <h1> tag).
2. Commit and push the changes to the main branch:

git add .
git commit -m "Update homepage"
git push

Go to the Actions tab in GitHub to see the workflow running. It should automatically deploy your site to Netlify. After the deployment is successful, your site will be live!

Common Errors and Difficulties You Might Encounter

Missing Secrets: If your deployment fails with an error like "NETLIFY_AUTH_TOKEN not found," ensure you've added the NETLIFY_AUTH_TOKEN and NETLIFY_SITE_ID as secrets in your GitHub repository.
Build Failures: If the build fails, check the logs in the GitHub Actions tab. Common causes include misconfigured paths, missing files, or dependencies that aren’t installed.
Permissions Issues: If the GitHub Actions workflow fails to deploy, check that Netlify is correctly connected to your GitHub repository, and you’ve granted the necessary permissions.
Workflow Not Triggering: Make sure that your .github/workflows/deploy.yml file is in the correct directory and is properly configured to listen for changes to the main branch.
Netlify Deployment Failures: Verify that you’ve set up the correct Site ID and Auth Token. You can find these in your Netlify account settings.