I love using GitLab for all of my source control needs. You can imagine how happy I was to discover that the same service could be used to create a simple website for a project portfolio. Here is the short process needed to get your own static website up and running.

Setting up your GitLab repository

The first step to host a website from a git repository is to of course create the repository. If you do no have a custom domain name, then you can name the repository based on your user name to have a nicer URL than your typical repository will allow. For example, the repository for my nwneisen gitlab user would be:

nwneisen.gitlab.io

Once your repository is setup, you will need to add your static website files. You can create all of these by hand but I recommend using a static site generator such as Hugo. These allow you to create html templates for each of your pages and reuse them with different content written in markdown language.

The final file needed is your .gitlab-ci.yml in the root directory of your project. This file tells GitLab how it should generate a publish your static website files. The content of this file will vary depending on the type of static site generator you are using. A Hugo website could start with the following:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

image: monachus/hugo

variables:
  GIT_SUBMODULE_STRATEGY: recursive

pages:
  stage: deploy
  script:
    - hugo
  artifacts:
    paths:
      - public/
    only:
      - master

After pushing these changes, you are ready for the next step.

Viewing your website

Since .gitlab-ci.yml was added to your project, GitLab will see this file and process its contents in a pipeline. GitLab will start another pipeline and process the changes every time you push a change to the repo’s master branch. You can view the status of this pipeline by opening your project in GitLab and navigating to CI/CD -> Pipelines. This page shows a history of pipelines ran and clicking one will allow you to view the details of the pipeline. This can be very useful if you pipeline is failing and you need to debug why.

The final part of this process is the entire point: viewing your website. You can view the URL of your website by navigating to Settings->Pages. This page will show a URL of the path in with GitLab published your website to.