DEV Community

Cover image for How to Set Up a CI/CD Pipeline with GitLab: A Beginner's Guide
Arbythecoder
Arbythecoder

Posted on

31

How to Set Up a CI/CD Pipeline with GitLab: A Beginner's Guide

Introduction to CI/CD and GitLab

In modern software development, Continuous Integration (CI) and Continuous Deployment (CD) are essential practices. CI involves automatically integrating code changes into a shared repository multiple times a day, while CD focuses on deploying the integrated code to production automatically. These practices help ensure high software quality and faster release cycles.

GitLab is a comprehensive DevOps platform that integrates source control, CI/CD, and other DevOps tools. This guide will walk you through setting up a simple CI/CD pipeline on GitLab, perfect for beginners and intermediate users.

Prerequisites and Setup

Tools Needed:

Basic Knowledge Required:

  • Basic understanding of Git commands.
  • Familiarity with GitLab's interface.

Creating a GitLab Repository

1. Log In to GitLab:

  • Go to GitLab and log in with your credentials.

2. Create a New Project:

  • Click on the "New Project" button.
  • Select "Create blank project".
  • Fill in the project name (e.g., MyFirstPipeline), description (optional), and set the visibility level.
  • Click "Create project".

Image description

3. Clone the Repository:

  • Copy the HTTPS clone URL from the GitLab repository page.
  • Open your terminal and run: sh git clone <your-repository-URL> cd <your-repository-name>

Image description

4. Add Initial Files:

  • Create a simple application or add existing files to the repository.
  • For example, create an index.html file for a static website: sh echo "<!DOCTYPE html> <html> <head> <title>Welcome to My First Project</title> </head> <body> <h1>Hello, World!</h1> <p>This is my first static website hosted using GitLab CI/CD.</p> </body> </html>" > index.html

5. Commit and Push the Changes:

  • Add the file to your repository: sh git add index.html git commit -m "Add index.html for static website" git push origin main

Writing a .gitlab-ci.yml File

The .gitlab-ci.yml file defines the stages, jobs, and scripts for your CI/CD pipeline. Here's a simple configuration:

** Create the .gitlab-ci.yml File**:

  • In the root directory of your project, create a file named .gitlab-ci.yml.
  • Open the file and add the following content:

     stages:
       - build
       - deploy
    
     build_job:
       stage: build
       script:
         - echo "Building the project..."
         - echo "Build complete."
    
     deploy_job:
       stage: deploy
       script:
         - echo "Deploying the project..."
         - echo "Deploy complete."
    

** Commit and Push the Changes**:

  • Add the file to your repository: sh git add .gitlab-ci.yml git commit -m "Add CI/CD pipeline configuration" git push origin main

Running and Monitoring the Pipeline

  1. Trigger the Pipeline: The pipeline will automatically trigger when you push the .gitlab-ci.yml file.

  2. Monitor the Pipeline:

    • Go to your GitLab project page.
    • Navigate to CI/CD > Pipelines.
    • You should see a new pipeline triggered by your recent push.
    • Click on the pipeline to monitor its progress and view job logs.
  3. Check Job Logs:

    • View the output logs for each job (build and deploy) to ensure they are executing correctly.

Conclusion

Congratulations! You've successfully set up a basic CI/CD pipeline using GitLab. Here’s a quick summary of what we did:

  • Created a GitLab repository.
  • Added a simple index.html file to the repository.
  • Configured a .gitlab-ci.yml file to define our CI/CD pipeline stages and jobs.
  • Triggered and monitored the pipeline.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay