GitLab Pages with Cloudflare

How to setup GitLab Pages using a custom domain name and using Cloudflare for managing your DNS records.

In this example, we're setting up a GitLab Pages website with the following assumptions.

• We're not using the Let's Encrypt SSL certificates provided by GitLab. I had trouble getting this to work with Cloudflare.
• We're going to generate a free SSL certificate using Cloudflare. We'll copy over the SSL certificatep details to GitLab.
• We're managing our DNS records using Cloudflare.
• The domain we're trying to assign to the website is notes.samsuniverse.com.

Prerequisites

• You have a domain alrady registered.
• You already have a free Cloudflare account.

Create a SSL Certificate

Login to your Cloudflare account and create an origin SSL certificate.

• Make sure your Cloudflare account has SSL/TLS encryption mode is set to Full or Full (strict).
• Create a Origin SSL certificate. Copy the PEM certificate and the private key and save it in a file. You'll need these values to enter in GitLab later.
• Cloudflare doesn't combine both PEM and root certificates in one, so we need to copy the root certificate (aka "intermediate") Cloudflare Origin CA — RSA Root. You'll need this later in GitLab.

Here is the Cloudflare Orign CA Root certificate you'll need later. You can find it at Cloudflare Origin CA — RSA Root also. It's the "Cloudflare Origin RSA PEM" one.

-----BEGIN CERTIFICATE-----
MIIEADCCAuigAwIBAgIID+rOSdTGfGcwDQYJKoZIhvcNAQELBQAwgYsxCzAJBgNV
BAYTAlVTMRkwFwYDVQQKExBDbG91ZEZsYXJlLCBJbmMuMTQwMgYDVQQLEytDbG91
ZEZsYXJlIE9yaWdpbiBTU0wgQ2VydGlmaWNhdGUgQXV0aG9yaXR5MRYwFAYDVQQH
Ew1TYW4gRnJhbmNpc2NvMRMwEQYDVQQIEwpDYWxpZm9ybmlhMB4XDTE5MDgyMzIx
MDgwMFoXDTI5MDgxNTE3MDAwMFowgYsxCzAJBgNVBAYTAlVTMRkwFwYDVQQKExBD
bG91ZEZsYXJlLCBJbmMuMTQwMgYDVQQLEytDbG91ZEZsYXJlIE9yaWdpbiBTU0wg
Q2VydGlmaWNhdGUgQXV0aG9yaXR5MRYwFAYDVQQHEw1TYW4gRnJhbmNpc2NvMRMw
EQYDVQQIEwpDYWxpZm9ybmlhMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKC
AQEAwEiVZ/UoQpHmFsHvk5isBxRehukP8DG9JhFev3WZtG76WoTthvLJFRKFCHXm
V6Z5/66Z4S09mgsUuFwvJzMnE6Ej6yIsYNCb9r9QORa8BdhrkNn6kdTly3mdnykb
OomnwbUfLlExVgNdlP0XoRoeMwbQ4598foiHblO2B/LKuNfJzAMfS7oZe34b+vLB
yrP/1bgCSLdc1AxQc1AC0EsQQhgcyTJNgnG4va1c7ogPlwKyhbDyZ4e59N5lbYPJ
SmXI/cAe3jXj1FBLJZkwnoDKe0v13xeF+nF32smSH0qB7aJX2tBMW4TWtFPmzs5I
lwrFSySWAdwYdgxw180yKU0dvwIDAQABo2YwZDAOBgNVHQ8BAf8EBAMCAQYwEgYD
VR0TAQH/BAgwBgEB/wIBAjAdBgNVHQ4EFgQUJOhTV118NECHqeuU27rhFnj8KaQw
HwYDVR0jBBgwFoAUJOhTV118NECHqeuU27rhFnj8KaQwDQYJKoZIhvcNAQELBQAD
ggEBAHwOf9Ur1l0Ar5vFE6PNrZWrDfQIMyEfdgSKofCdTckbqXNTiXdgbHs+TWoQ
wAB0pfJDAHJDXOTCWRyTeXOseeOi5Btj5CnEuw3P0oXqdqevM1/+uWp0CM35zgZ8
VD4aITxity0djzE6Qnx3Syzz+ZkoBgTnNum7d9A66/V636x4vTeqbZFBr9erJzgz
hhurjcoacvRNhnjtDRM0dPeiCJ50CP3wEYuvUzDHUaowOsnLCjQIkWbR7Ni6KEIk
MOz2U0OBSif3FTkhCgZWQKOOLo1P42jHC3ssUZAtVNXrCk3fw9/E15k8NPkBazZ6
0iykLhH1trywrKRMVw67F44IE8Y=
-----END CERTIFICATE-----

Gitlab Pages

Below is the GitLab Pages configuration you'll need. The process for getting to this configuration was not straightforward for me.

Important Notes:

• Create a SSL certificate in Cloudflare before you get here.
• Have a working GitLab pages already up and accessible.
• Do NOT have the checkbox for Force HTTPS checked. I think GitLab or the SSL verification process needs to access your site using HTTP before the domain with SSL is setup completely.
• You can have the checkbox for Use unique domain checked.

The steps involved are:

1. Create a domain (specify your domain name).
2. Disable Automatic certificate management using Let's Encyrpt.
3. Copy your PEM certificate and the private key from Cloudflare into the corresponding fields.
4. In the Certificate (PEM) field make sure to append Cloudflare Orign CA Root from above. Cloudflare doesn't combine both PEM and root certificates in one, so we need to do this. Paste it below your PEM certificate (jump a line between the last row of your cert -----END CERTIFICATE----- and the first row of the intermediate cert -----BEGIN CERTIFICATE-----).
5. Click Create new domain to create the domain.
6. Make sure to verify your domain in Cloudflare by creating a TXT entry with the text provided by GitLab. Do not delete the record as it may be used for reverification purposes.
7. After your domain has been created in GitLab and the SSL certificate has successfully been created in GitLab, you can check the Force HTTPS checkbox.
8. You can then also set the Primary domain dropdown to your domain (e.g. https://notes.samsuniverse.com). Make sure to save the changes.

References

Setting up GitLab Pages with Cloudflare Certificates

Cloudflare Origin CA