How to host an HTML page in GitLab Pages

GitLab is a software for managing version control of git. They have a free and paid community version. You can also use their servers and host your projects, whether they are public or private.

To better understand ourselves, we will say that it is something similar to GitHub.

GitLab Pages gives you the opportunity to create web pages using several static site generators. Some of the best known are Jekyll, Pelican, Hugo, etc. In this article, we will focus on html pages and we will see step by step how to host our projects in GitLab.

To begin with, you must be familiar with git and have a GitLab account. If you are not registered you can do it using your GitHub, BitBucket, Twitter or Google credentials.

Once you have logged in, create a new project and upload your html code with its index.html file and dependencies, like css style sheets, javascript scripts, fonts, images, etc…

index.html
assets
   ↳styles.css
   ↳scripts.js
Readme.md
   .gitlab-ci.yml

Once your project is hosted in GitLab repository, create a new file in the root of your project called .gitlab-ci.yml and put the following code:

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

This new file contains a script, that creates a new directory, copies your project in that directory and gains access to it. The script will be executed only in the master branch.

Once you have saved the file and it is in your master branch, GitLab will execute the script. You can see the execution status in Pipelines of your project. To have access, click on CI / CD from the GitLab sidebar.

This task may take several minutes, but once it is completed, your site will be hosted in GitLab Pages under the address https://<username>.gitlab.io/<projectname>.

It is important to know that everytime you push to the master branch, the script in .gitlab-ci.yml will executed and your site will be updated with the changes.

¡Congratulations! You just implemented a continuous integration!

With this method, you can publish a project web page without having to buy a domain. However it is not exclusive, GitLab also allows the use of external domains.

If you wish to know more please follow us.

Some links of interest::

• What are the GitLab Pages? https://pages.gitlab.io/
• GitLab Pages documentation http://docs.gitlab.com/ee/pages/README.html
• Types of GiLab Pages https://gitlab.com/groups/pages