How to deploy an application to GitLab pages

Let's say we want to develop a simple application inspired by Homework for Life. Before we even start development, let's figure out preview deployment first.

GitLab pages

GitLab pages is a hosting infrastructure we access in a free plan of a GitLab project. It's turned on by default, but we have to make sure we correctly name our Continuous Integration (CI) steps.

Username or organization gotcha

For everything to work smoothly, make sure to avoid . in the user or organization name you set up pages for. I had to rename my account from to how-to-dev because otherwise, the HTTPS wouldn't work with the page's domain.


To start, let's limit ourselves to HTML. GitLab Pages will work only when we put the files in public folder, so let's create our index files directly there. public/index.html:

<!DOCTYPE html>
    <meta charset="utf-8" />
    <title>Homework for life</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <h1>Homework for life</h1>

      <input type="date" />
      <textarea placeholder="Put your story"></textarea>

The file is nothing else than basic HTML & placeholder for the future app.


We configure CI with .gitlab-ci.yml:

      - public
    - echo 'deploying...'
  • pages: - the name is important here - any other value will not cause GitLab to deploy public to pages
  • artifacts.paths = public - another key value to make sure deployment happens. Without - nothing will be deployed
  • script: ... - my minimalistic approach backfired without scripts the file doesn't validate correctly, so I put it a dummy value here


The successful deployment will look like: pipelines.png



In this article, we have seen how to deploy an application to GitLab Pages.