Skip to content

GitLab Pages

GitLab Pages is a feature that allows you to publish static websites directly from a GitLab repository. You can host your website under a URL like

https://pages.ice.ri.se/<group>/<project>

Create a page

For this tutorial, we will use the example from https://gitlab.com/pages/plain-html.

  1. Create a new group in ICE Connect GitLab.
  2. Create a new project in the group. The group and project name will be used in the URL of your website.

  3. Create a .gitlab-ci.yml file in the root of your repository. See the example below. This file will be used to build and deploy your website from a directory named public.

    .gitlab-ci.yml
    image: busybox

pages:
  stage: deploy
  script:
  - echo 'Nothing to do...'
  artifacts:
    paths:
    - public
    expire_in: 1 day
  rules:
    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH

  4. Create a public directory in the root of your repository. This directory will contain the static HTML content of your website.

  5. Create a index.html file in the public directory. This file will be the entry point of your website.

    public/index.html
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="generator" content="GitLab Pages">
    <title>Plain HTML site using GitLab Pages</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="navbar">
    <a href="https://pages.gitlab.io/plain-html/">Plain HTML Example</a>
    <a href="https://gitlab.com/pages/plain-html/">Repository</a>
    <a href="https://gitlab.com/pages/">Other Examples</a>
    </div>

    <h1>Hello World!</h1>

    <p>
    This is a simple plain-HTML website on GitLab Pages, without any fancy static site generator.
    </p>
</body>
</html>

  6. Optional: Also create a style.css file in the public directory. This file will be used to style your website.

    public/style.css
    body {
  font-family: sans-serif;
  margin: auto;
  max-width: 1280px;
}

.navbar {
  background-color: #313236;
  border-radius: 2px;
  max-width: 800px;
}

.navbar a {
  color: #aaa;
  display: inline-block;
  font-size: 15px;
  padding: 10px;
  text-decoration: none;
}

.navbar a:hover {
  color: #ffffff;
}

  7. Commit and push your files to GitLab. The GitLab CI/CD pipeline will automatically build and deploy your website.

  8. In the GitLab web interface, go to Deploy > Pages and make sure Use unique domain is disabled. The URL of your website will then be https://pages.ice.ri.se/<group>/<project>.

Static site generators

For larger projects, you can deploy for example Material for MkDocs to generate documentation from Markdown files. Check out the source code for the ICE Connect documentation for an example.

Private pages

Pages Access Control allows you to restrict access to your website to users who are logged in to GitLab. This is currently not supported on ICE Connect GitLab.