GitLab Pages#

GitLab Pages allow you to create and host websites directly from your GitLab repositories. When you push content to your repository, GitLab automatically builds and deploys your site, making it accessible via a URL like https://your-username.gitlab.surrey.ac.uk/your-project.

Example Use cases:

  • Project documentation: Always up-to-date with your code

  • Portfolios: Professional websites showcasing your work

  • Conference materials: Host slides, visualisations and supplementary materials

Workflow#

In order to get a Pages site set up, do the following:

  1. Set up your repository - Fork one of the sample repos below or re-use an existing one

  2. Create content in your repository (HTML, Markdown, R Shiny, etc.)

  3. Add a `.gitlab-ci.yml` file that tells GitLab how to build your site (if it does not already exist)

  4. Push to GitLab - your site is automatically built and deployed

  5. Select Visibility - By default Pages are only visible to project members after login. To increase visibility, go to your project Settings > General > Visibility > Pages > select Everyone

  6. Set URL - GitLab will generate a unique project URL by default. In your new project, go to Deploy > Pages to ensure Pages are enabled and to find your app’s URL. You might want to de-select the Use unique domain option

  7. Access your site at https://your-username.gitlab.surrey.ac.uk/project-name

Note

All GitLab CI jobs must include the pages tag to be picked up by the Gitlab Pages runner.

Sample Repositories#

We have created some Pages enabled sample repositories that you can fork, clone, modify, and learn from:

Static HTML Portfolio

A simple portfolio site showcasing research projects, publications, and CV.

Repository: https://gitlab.surrey.ac.uk/RSS/pages-example-static

Live demo: https://rss.pages.surrey.ac.uk/pages-example-static/

Features:

  • Basic HTML/CSS structure

  • Research project showcases

  • Publication lists

  • Contact information

  • Mobile-responsive design

R Shiny Web App based on WebR / WebAssembly

Interactive data visualisation built with R Shiny for static deployment

Repository: https://gitlab.surrey.ac.uk/RSS/pages-example-r-shiny

Live demo: https://rss.pages.surrey.ac.uk/pages-example-r-shiny

Features:

  • Interactive data visualisation with R, Plotly, and shinylive

  • R package management in the deployment pipeline (CI/CD)

Code Documentation Generation using Sphinx

Automatically generates documentation from your code comments and README files. Our example also includes static pages for hosting additional project information, e.g., an introduction, methodology, publication, etc.

Repository: https://gitlab.surrey.ac.uk/RSS/pages-example-sphinx

Live demo: https://rss.pages.surrey.ac.uk/pages-example-sphinx

Features demonstrated:

  • Automated code documentation

  • Static page hosting for further project information

  • Search functionality

  • Integration with research workflow

Technologies: Sphinx (Python-based)