Skip to content

Host using GitLab Pages

Video Lecture

Host using GitLab Pages Host using GitLab Pages

Description

You may prefer to use GitLab Pages to host your project instead of using GitHub Pages.

The process is very similar. We need to make sure our code can work from a sub path in the URL.

Make sure there is a base directive in your ./vite.config.js.

./vite.config.js

import { defineConfig } from 'vite'
import topLevelAwait from 'vite-plugin-top-level-await'

export default defineConfig({
  plugins: [topLevelAwait()],
  base: './',
})

And make sure the paths in your application work as relative references.

For example,

textureLoader.load('img/lensflare0.png') // ✓

or

textureLoader.load('./img/lensflare0.png') // ✓

but not this,

textureLoader.load('/img/lensflare0.png') // ✕

A single / will indicate to the browser to try and load the resource reference from the web root, rather than from the sub path shown in the final URL provided by GitLab.

The process is mostly similar, but enabling the serving of your scripts through the GitLab pages web server requires the addition of a new file named .gitlab-ci.yml.

We will use the GitLab user interface to create the new file named .gitlab-ci.yml.

  1. Log into your GitLab account and create a New Project/Repository. Then select the Create Blank Project option. Use any name for your project that you would like. GitLab will ignore any invalid characters for your projects final URL automatically as you type.

  2. Open the GitLab Web IDE and create a new folder named public. GitLab will serve this folder through it pages system.

  3. Drag and drop the files and folders from your projects ./dist/ folder into the public folder that you created using the GitLab Web IDE.

  4. To commit all the files to your repository, use the Source Control tab and press Commit to 'main'.

  5. Go back into your GitLab project page. Add a new file in the project root named .gitlab-ci.yml and select the Pages → HTML template.

  6. After a minute or two, go to the Deploy → Pages section of your project, deselect Use unique domain and press Save changes.

Your GitLab pages URL will resemble,

https://<your lowercase gitlab username>.gitlab.io/<name-of-your-new-repository>/

Mine, as shown in the video, was

https://seanwasere.gitlab.io/my-project/

Comments