web page hosting

How to Host a Website Using GitLab Pages

If you have a website made with HTML and CSS, you can host it for free using GitLab Pages. GitLab Pages takes the files from your GitLab repository and publishes them as a website. For this, you need to create a .gitlab-ci.yml file. This file tells GitLab how to deploy your website. After pushing the file to your repository, GitLab creates a pipeline. When the pipeline finishes successfully, GitLab Pages gives you a URL which you can open in a browser to see your live website.

Understanding the Pipeline

A pipeline is the process GitLab uses to run the instructions written in .gitlab-ci.yml. If the pipeline fails, the website will not be deployed correctly. Sometimes the pipeline can fail because of an invalid YAML file, incorrect indentation, unverified account or a problem in the deployment commands. Another common problem is trying to create a public folder when the folder already exists. For a simple HTML and CSS website, the important thing is that the public folder contains your website files and index.html should be directly inside it.

For example, the structure should look like this:

public/
├── index.html
├── style.css
└── images/

The index.html file is important because it is the main page GitLab Pages looks for when someone opens the website.

Hosting More Than One Website

You can host multiple websites using GitLab Pages, but if the websites are completely different projects, it is better to create a separate GitLab project for each website. For example, you can have one project called youtube-clone and another project called portfolio. Each project can have its own HTML, CSS, .gitlab-ci.yml, pipeline and Pages deployment. This makes the projects easier to manage and prevents one website from affecting another website.
So, GitLab is not only a place to store your code. With GitLab Pages and CI/CD pipelines, you can also use it to turn your HTML and CSS project into a live website that can be accessed through the internet.