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 how-to.dev to how-to-dev because otherwise, the HTTPS wouldn't work with the page's domain.

Code

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>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Homework for life</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
  </head>
  <body>
    <h1>Homework for life</h1>

    <form>
      <input type="date" />
      <br>
      <textarea placeholder="Put your story"></textarea>
    </form>
  </body>
</html>

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

Configuration

We configure CI with .gitlab-ci.yml:

pages:
  artifacts:
    paths:
      - public
  script:
    - 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

Deployment

The successful deployment will look like:

Summary

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

How to deploy an application to GitLab pages