In this post, we will be looking at a very specific product: GitLab Pages.

Why GitLab

GitLab has some really cool reasons to be chosen for hosting Static Pages

Inbuilt pipelines, so you don't need to look for another service to build your sites

Private repos which can have public sites

If you wanna go pro (paid plans), it has basic plan cheaper than GitHub

Basic process

To host site on Gitlab, you would need to create the CI/CD file named as .gitlab-ci.yml which will trigger the build pipeline for Gitlab and then deploy the site for you on the domain structure as per your namespace; namespace can be either username or group-name

So what should go the .gitlab-ci.yml file? But before that, what is yml file?

YAML is a configuration file generally used by CI/CD (Continuous Integration/Continuous Deployment) environments.

For Gitlab pages, the YAML file will have steps to

Pick the image to use as platform where it will build the artefacts. The images can be the docker images as well. So you can find the favoured one and use here.

Definition of type of JOB, which is specifically named pages in this case

Then what stage this pipeline is for, like test, deploy etc. For the pages, it is deploy stage

Then it will have scripts/commands to execute which will prepare final build for us

Then we will define the artefacts to keep after the build is completed

Now we have some different scenarios where our YAML file will be a bit different

Static HTML site

For static site, you just need to put all the stain files in public directory and it will deploy with above configuration.

Though if you don not have any public directory and have all the code/files in src dir , you can create the public dir and copy the necessary files in that dire in the scripts section; like as follows: