How to configure your DNS records, your own custom domain and cloudflare for your gitlab page

With love from transip.nl and cloudflare.com

 Posted on 26 Januari, 2021  |  

Prerequisites:

  • Set up a gitlab page
  • Have a cloudflare account
  • Have your domain registered at a registrar or at cloudflare

Introduction

In a previous blog i explained howto setup gitlab page. However it is possible to use a custom domainname. And since i’m a nerd, i wanted to configure that aswell.

Register your domain

Register you domain name at a registrar like transip.nl or clouddlfare.com
I used transip.nl myself

  1. Change the nameservers to:
terin.ns.cloudflare.com
zoe.ns.cloudflare.com

When using transip.nl, make sure that Geavanceerd domeinbeheer TransIP-instellingen is set to off
2. Remove the ipv6 (AAAA) record
3. Save all

Cloudflare config

Let’s change the DNS records at cloudflare so it will point in the right direction.

  1. Enter cloudflare and add your domain add a site
  2. remove the ipv6 (AAAA) record
  3. Do a dig on <username>.gitlab.io or <username>.gitlab.io/<projectname>
  4. copy the ipv4 address
  5. Edit the A record of your domain and alter the ip address to the one you just copied. (This will point it to the gitlab page rather than your isp)
  6. Add the following record:
CNAME WWW <username>.gitlab.io
  1. Save

Add a pagerule if you so choose to redirect root (domain.com) to www.domain.com

  1. in Cloudflare click on the rules button
  2. Add a new rule:
    • At the url box type: domain.com/*
    • In the settings dropdown box choose: Forwarding URL
    • As a status code select: 301 permanent redirect
    • And as for the destination url: https://www.domain.com/$1

Set the correct SSL / TLS mode

  1. In cloudflare click on SSL / TLS and then overview
  2. Select Full as SSL / TLS encryption mode
    note: This will make sure all traffic is encrypted and the 301 redirect rule does not come in a http –> https loop

Gitlab page: adding the custom domain

Let’s add your custom domain to the gitlab page configuration

  1. Go to the page’s settings on gitlab You can use this example url and change <username> with your own:
    https://gitlab.com/<username>/<username>.gitlab.io/edit#js-general-project-settings
  2. On the samepage click New domain
  3. Enter your domain here
  4. Slide the bar of Certificate to activated (blue)
  5. Click new domain, voila the domain is added

Gitlab page: verification token

Now we have to register this domain to the gitlab page.

  1. Go to the page’s settings on gitlab and click edit behind your domain
  2. Copy the data next to verification status
  3. Go back to your cloudflare environment, DNS
  4. Add a new record, like underneath: use your own specific record ofcourse ;-)
_gitlab-pages-verification-code.www.customdomain.com TXT gitlab-pages-verification-code=b123451435146324151
  1. Save it
  2. Now the waiting and F5-ing game begins! It can take up to 24 hours for dns records to be globally available to the various (ISP) DNS servers. Usally between 1 and 4 hours though.
  3. After awhile you can verify the status at your gitlab domain page by clicking the refresh arrow behind verification status. When it’s green you’re done here.

Changing the baseurl

  1. In your git repo, open config.toml
  2. Change the baseurl var as follows: note: else CSS etc will not work properly
#baseurl = "https://<username>.gitlab.io"
baseurl = "https://wwww.domain.com"
  1. commit and push the change to git
  2. Merge dev into master
  3. Let the CI/CD pipeline work it’s magic
  4. Voila your gitlab page is reachable on your own (custom) domain.
    Clear history / data / cookies in case it doesn’t work straight away

Used documentation:

gitlab  transip  gitlab page  cloudflare