Topics Map > Engineering Digital Service > Services > GitLab

GitLab Tutorials – Learn how to use GitLab CI

Learn how to use GitLab CI to deploy a simple static website to GitLab pages.

Setting Up GitLab CI Pipeline for GitLab Pages

ℹ️

GitLab Pages is available to all users on code.umd.edu and allows you to publish static websites directly to pages.umd.edu from your GitLab repository.

Table of Contents

Overview

GitLab Pages allows you to publish static websites directly from your GitLab repository. This guide walks you through setting up a basic CI/CD pipeline to automatically build and deploy your static website to GitLab Pages whenever you push changes to your repository.

Prerequisites

  • A GitLab account on code.umd.edu
  • A GitLab repository containing your static website files
  • Basic familiarity with Git and GitLab

Step 1: Create a .gitlab-ci.yml File

At the root of your repository, create a file named .gitlab-ci.yml. This file defines how GitLab CI will build and deploy your website. For a basic HTML/CSS/JavaScript website, use this configuration:

pages: stage: deploy script: - mkdir .public - cp -r * .public - mv .public public artifacts: paths: - public only: - main

This configuration:

  • Creates a job named pages in the deploy stage
  • Copies all files to a public directory
  • Publishes the public directory as an artifact
  • Only runs when changes are pushed to the main branch

Step 2: Adjust for Specific Static Site Generators

For Jekyll:

pages: stage: deploy image: ruby:2.7 script: - bundle install - bundle exec jekyll build -d public artifacts: paths: - public only: - main

For Hugo:

pages: stage: deploy image: klakegg/hugo:0.92.2-ext-alpine script: - hugo artifacts: paths: - public only: - main

For React (create-react-app):

pages: stage: deploy image: node:16 script: - npm install - npm run build - mv build public artifacts: paths: - public only: - main

Step 3: Commit and Push Your CI Configuration

After creating the .gitlab-ci.yml file:

git add .gitlab-ci.yml git commit -m "Add GitLab Pages configuration" git push origin main

Step 4: Monitor the Pipeline

  1. Go to your GitLab repository
  2. Navigate to CI/CD > Pipelines
  3. You should see your pipeline running
  4. Wait for it to complete successfully

Step 5: Access Your Published Website

Once the pipeline completes successfully:

  1. Go to Settings > Pages in your GitLab repository
  2. Find the URL to your published website (typically https://[username].pages.umd.edu/[repository-name])
  3. Note: It may take a few minutes for the site to become available after the first deployment

Troubleshooting

Pipeline Fails

If your pipeline fails:

  1. Check the job logs for specific error messages
  2. Verify that your .gitlab-ci.yml syntax is correct
  3. Ensure your project structure is compatible with the configured build process

Custom Domain

To use a custom domain:

  1. Go to Settings > Pages
  2. Add your custom domain
  3. Follow the verification instructions

Performance Optimization

For better performance:

  • Use GitLab CI caching to speed up builds
  • Optimize your asset files (images, CSS, JS)
  • Consider using a CDN for additional speed

Example: Complete CI Configuration with Caching

pages: stage: deploy image: node:16 cache: paths: - node_modules/ script: - npm install - npm run build - mv build public artifacts: paths: - public only: - main

Where Can I Find More Documentation?

Where Can I Get Support?

Open a support request with the Engineering Digital Service team using this form.


Keywords:
GitLab, CI/CD, GitLab Pages, Static website, Continuous integration, Continuous deployment, Pipeline, code.umd.edu, Web publishing, Static site generators, Jekyll, Hugo, React, .gitlab-ci.yml, Repository, Artifacts, Build process, Deployment, Caching, Custom domain 
Doc ID:
148749
Owned by:
Nicholas B. in Engineering IT
Created:
2025-03-04
Updated:
2025-03-04
Sites:
University of Maryland Engineering IT