Deploying to GitLab Pages

Written by Camille on Tue Jan 25 2022

I use Namecheap as the registrar for my domain, and 11ty as my static site generator. Here's how I got set up on GitLab Pages after creating my repository.

🌀 Using my custom domain with GitLab Pages 🌀

This was a bit of an ordeal as I came across conflicting information. Here's what worked for me:

1

In the GitLab repository, go to SETTINGS>PAGES. Click on NEW DOMAIN. Type in the domain (example.com) and click CREATE NEW DOMAIN. You'll receive a verification code that will need to be entered into Namecheap's Advanced DNS settings for the domain.

2

In the dashboard for Namecheap, click on MANAGE for the domain you want to use. Click on ADVANCED DNS and then ADD NEW RECORD to create the following records1,2:

Type Host Value
ALIAS Record @ [username].gitlab.io.
TXT Record _gitlab-pages-verification-code gitlab-pages-verification-code=[your_code_here]
URL Redirect Record www example.com

📝1: Remove any records that were previously generated by Namecheap as these records will conflict.

📝2: The URL Redirect is optional.

3

Wait for the verification code TXT Record to process. Once enough time has passed, return to the GitLab repository and refresh the verification status for the domain. That's it! ✌︎

☀ Deploying with 11ty ☀

In order to deploy this site on GitLab Pages, I had to update the yaml file as follows:

image: node:latest

before_script:
  - npm install

pages:
  stage: deploy
  script:
    - npx eleventy --output=public
  cache:
    paths:
      - node_modules/
  artifacts:
    paths:
      - public
  only:
    - "main"

It took a bit of time to get this blog set up but I'm excited to start documenting my journey 😃

Thanks for reading! 👓