This guide will walk you through setting up GitLab Pages, creating a static website, and deploying it. You’ll also learn how to use GitLab CI/CD pipelines to automate the process, ensuring your site stays up-to-date with every change.

What Is GitLab Pages?

GitLab Pages is a built-in service that lets you publish static websites from your GitLab repository. It supports any static site generator, such as Jekyll, Hugo, or Gatsby, as well as plain HTML, CSS, and JavaScript files.

Key Features of GitLab Pages:

  • Custom Domains: Use your domain name for professional branding.
  • HTTPS Support: Automatically enable secure connections using Let’s Encrypt certificates.
  • CI/CD Integration: Automate the deployment process with pipelines.
  • Access Control: Restrict access to your site with authentication options.

Step 1: Enabling GitLab Pages

Before deploying a static website, you need to enable GitLab Pages for your project:

  1. Go to Settings: Navigate to your project in GitLab and click on Settings > Pages.
  2. Verify Pages Domain: If you want to use a custom domain, verify its ownership in the Pages settings.

Step 2: Creating a Static Website

To create a static website, you can use any static site generator or plain HTML. Here’s an example using a simple HTML setup:

.
├── public/
│   ├── index.html
│   ├── style.css
└── .gitlab-ci.yml

Example index.html file:

Welcome to My GitLab Pages Site

This is a sample static website deployed using GitLab Pages.

Example style.css file:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
    padding: 50px;
}

h1 {
    color: #333;
}

Step 3: Configuring .gitlab-ci.yml for GitLab Pages

The .gitlab-ci.yml file defines the pipeline for building and deploying your site to GitLab Pages. Here’s an example:

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

Explanation:

  • stage: Specifies the deployment stage.
  • script: Copies static files to the .public directory, which GitLab Pages uses for deployment.
  • artifacts: Defines the files to deploy.
  • only: Ensures the pipeline runs only on the main branch.

Step 4: Pushing Code to GitLab

Commit and push your code to the repository:

git add .
git commit -m "Add static site for GitLab Pages"
git push origin main

Once pushed, GitLab will automatically trigger the pipeline to deploy your site.

Step 5: Accessing Your GitLab Pages Site

After the pipeline completes, you can access your site at:

https://.gitlab.io//

If you’ve configured a custom domain, use that URL instead.

Best Practices for GitLab Pages

Here are some tips to optimize your GitLab Pages deployment:

  • Use a Static Site Generator: Automate content creation with tools like Jekyll or Hugo.
  • Secure Your Site: Enable HTTPS for secure communication.
  • Automate Builds: Integrate build steps into your pipeline for dynamic site generation.
  • Optimize Performance: Minify CSS and JavaScript files to improve load times.

Common Use Cases for GitLab Pages

  • Project Documentation: Host detailed documentation for your projects or APIs.
  • Portfolio Sites: Showcase your skills and projects with a personal website.
  • Blogs: Create a static blog using a generator like Jekyll or Gatsby.

Conclusion

GitLab Pages makes it easy to deploy static websites and documentation directly from your repositories. By integrating GitLab CI/CD, you can automate the deployment process and ensure your site stays up-to-date with every commit. Start exploring GitLab Pages today and bring your projects to life on the web!