Feb 7, 2017 - Marcia Ramos    

Setting up GitLab Pages with CloudFlare Certificates

How to set up GitLab Pages with a CloudFlare SSL/TLS Certificate for your (sub)domain

CloudFlare SSL/TLS certificates are free to use. If you want your GitLab Pages site to work with them, it's as simple as could be. There's just a trick you might not know about (yet)!

We assume you're familiar with SSL/TLS, DNS, GitLab Pages, and CloudFlare.


On this page


Introduction

With GitLab Pages, you can deploy a static website with custom domains/subdomains and SSL/TLS support.

This tutorial responds to the issue "Support CloudFlare CA please!", and other cases where GitLab users asked specifically how to add a CloudFlare certificate to GitLab Pages. 😉 Anything else is outside the scope of this post.

If you don't know how to set up your GitLab Pages site, or why you should care about SSL/TLS:

In case you don't know about it yet, we're bringing GitLab Pages to GitLab Community Edition! 🎉

Step-by-Step Quick Guide

To create this step-by-step guide, I'll use my subdomain https://cloudflare.marcia.ml as an alias for the website originally deployed to https://gitlab-tests.gitlab.io/jekyll.

The codebase is a simple Jekyll site built with its default theme, available at https://gitlab.com/gitlab-tests/jekyll.

STEP 1. DNS Record

On CloudFlare, navigate to the tab DNS and create a new DNS record (CNAME or A) pointing your subdomain (CNAME) or root domain (A) to your GitLab Pages site.

The image below shows both CNAME and A records (for the purposes of this demo), but of course, you will only need one of them. For this example, I used the CNAME record pointing gitlab-tests.gitlab.io to my subdomain cloudflare.marcia.ml:

setup CloudFlare DNS

For projects on GitLab.com, the DNS A record should point your custom domain to GitLab Pages' server IP address 52.167.214.135.

Update: GitLab Pages IP address on GitLab.com has changed from 104.208.235.32 to 52.167.214.135. Updated by Marcia Ramos on 2017/03/06.

If you'd already set this up, just jump to the second step.

STEP 2. Generate your Certificate

  1. Navigate to the tab Cripto.
  2. Generate your certificate:

    generate certificate

  3. Choose the domain, subdomain, or wildcard to apply the cert to, then click Next:

    choose-domain

  4. Your certificate and private key have been generated. Leave the tab and the modal window open:

    modal with certificate

STEP 3. Add the Custom (sub)domain and the Certificate to your GitLab Pages Project

From a new tab, go to GitLab, and navigate to your project's Settings > Pages > + New Domain:

configure GitLab Pages

Copy the PEM certificate and the private key from the tab you've left open on CloudFlare, and paste it into their respective fields in GitLab:

Add PEM certificate to Pages

STEP 4. The Trick

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 from the code block below, and paste it below your certificate (PEM) just added to GitLab:

Copy CloudFlare's Origin CA — RSA Root:

-----BEGIN CERTIFICATE-----
MIID/DCCAuagAwIBAgIID+rOSdTGfGcwCwYJKoZIhvcNAQELMIGLMQswCQYDVQQG
EwJVUzEZMBcGA1UEChMQQ2xvdWRGbGFyZSwgSW5jLjE0MDIGA1UECxMrQ2xvdWRG
bGFyZSBPcmlnaW4gU1NMIENlcnRpZmljYXRlIEF1dGhvcml0eTEWMBQGA1UEBxMN
U2FuIEZyYW5jaXNjbzETMBEGA1UECBMKQ2FsaWZvcm5pYTAeFw0xNDExMTMyMDM4
NTBaFw0xOTExMTQwMTQzNTBaMIGLMQswCQYDVQQGEwJVUzEZMBcGA1UEChMQQ2xv
dWRGbGFyZSwgSW5jLjE0MDIGA1UECxMrQ2xvdWRGbGFyZSBPcmlnaW4gU1NMIENl
cnRpZmljYXRlIEF1dGhvcml0eTEWMBQGA1UEBxMNU2FuIEZyYW5jaXNjbzETMBEG
A1UECBMKQ2FsaWZvcm5pYTCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEB
AMBIlWf1KEKR5hbB75OYrAcUXobpD/AxvSYRXr91mbRu+lqE7YbyyRUShQh15lem
ef+umeEtPZoLFLhcLyczJxOhI+siLGDQm/a/UDkWvAXYa5DZ+pHU5ct5nZ8pGzqJ
p8G1Hy5RMVYDXZT9F6EaHjMG0OOffH6Ih25TtgfyyrjXycwDH0u6GXt+G/rywcqz
/9W4Aki3XNQMUHNQAtBLEEIYHMkyTYJxuL2tXO6ID5cCsoWw8meHufTeZW2DyUpl
yP3AHt4149RQSyWZMJ6AyntL9d8Xhfpxd9rJkh9Kge2iV9rQTFuE1rRT5s7OSJcK
xUsklgHcGHYMcNfNMilNHb8CAwEAAaNmMGQwDgYDVR0PAQH/BAQDAgAGMBIGA1Ud
EwEB/wQIMAYBAf8CAQIwHQYDVR0OBBYEFCToU1ddfDRAh6nrlNu64RZ4/CmkMB8G
A1UdIwQYMBaAFCToU1ddfDRAh6nrlNu64RZ4/CmkMAsGCSqGSIb3DQEBCwOCAQEA
cQDBVAoRrhhsGegsSFsv1w8v27zzHKaJNv6ffLGIRvXK8VKKK0gKXh2zQtN9SnaD
gYNe7Pr4C3I8ooYKRJJWLsmEHdGdnYYmj0OJfGrfQf6MLIc/11bQhLepZTxdhFYh
QGgDl6gRmb8aDwk7Q92BPvek5nMzaWlP82ixavvYI+okoSY8pwdcVKobx6rWzMWz
ZEC9M6H3F0dDYE23XcCFIdgNSAmmGyXPBstOe0aAJXwJTxOEPn36VWr0PKIQJy5Y
4o1wpMpqCOIwWc8J9REV/REzN6Z1LXImdUgXIXOwrz56gKUJzPejtBQyIGj0mveX
Fu6q54beR89jDc+oABmOgg==
-----END CERTIFICATE-----

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-----):

Add intermediate certificate

STEP 5. Apply the Changes

  1. Click Create New Domain.
  2. Ta-da! 🎉

    Screen_Shot_2016-12-21_at_13.52.02

It works fine with the encryption set to "Full" or "Full (strict)" on CloudFlare:

Set Cloudflare SSL to full strict

Wrap Up

That's it, now your site runs on HTTPS with a custom domain and a free CloudFlare certificate, valid up to 15 years!

Comments, questions, suggestions? Please comment below or tweet @GitLab! 😀


Cover image by Rita Morais, licensed under CC0 1.0.

For the latest and most detailed news follow @gitlab on Twitter. Future blog posts suggestions RSS

Install GitLab in 2 minutes

With Ubuntu, Debian, CentOS, and Raspbian packages or from source

Install GitLab Now

Try GitLab Enterprise Edition risk-free for 30 days.

No credit card required. Have questions? Contact us.