GitLab CI/CD and GitLab Pages 1

In this post I will try and explain how to deploy a simple javascript application on GitLab pages, using Continuous Deployment with a live working example.

For those that don’t know about GitLab, it’s an online GIT repository, just like GitHub that offers web-based DevOps tools. Where GitLab really shines, is it’s Continuous Integration (CI) and Continuous Delivery (CD) capabilities.

GitLab’s definitions for CI and CD:

Continuous Integration is the practice of integrating code into a shared repository and building/testing each change automatically, as early as possible – usually several times a day.

Continuous Delivery adds that the software can be released to production at any time, often by automatically pushing changes to a staging system.
Continuous Deployment goes further and pushes changes to production automatically.

https://about.gitlab.com/product/continuous-integration/

In my example I created a simple javascript application that shows some images on the screen, on which I use GitLab’s CI/CD to automatically deploy my pushed changes on GitLab’s Pages. Check out the code and the GitLab Page that is created.

Oh it’s worth mentioning here that GitLab’s Pages can hosts static websites only (HTML, CSS and JS).

.gitlab-ci.yml

The way to configure GitLab’s CI is by adding a configuration file called .gitlab-ci.yml, which tells the GitLab runner what to do (NOTE: It needs to be placed at your root directory and file is written in YAML)

There are three stages which GitLab runner runs, build, test, and deploy. In our example we only use the deploy stage which is triggered only when commits are pushed on the master branch. Check out the code i used below.

pages:
  stage: deploy
  script:
  - mkdir .public
  - cp -r * .public
  - mv .public public
  artifacts:
    paths:
    - public
  only:
  - master

Take a look also on a more detailed tutorial by GitLab on pages setup and the documentation on .gitlab-ci.yml and GitLab Pages.