Setting Up Static Page Blog on GitLab

Static Site Generator

After GitHub adapted Jekyll long time ago, numerous static site generators came out to the world. I explored new ones, but I always come back to old friend, Pelican.

SSL or TLS, HTTPS or the Certificate

I used to have my blog on GitHub with a custom domain. But I keep getting emails with “suggestions” from CloudFlare. The main problem is that I could not set CloudFlare’s SSL/TLS mode into “Full (strict)” and “Flexible” was my best option. The reason is that I only made an alias (a.k.a. DNS CNAME record) from my custom domain to the GitHub’s page. And there is no way to put the certificate information.

Any how, I gave up with GitHub Pages and decided to move to GitLab.

And, ta-da! GitLab provides very kind walkthrough to setup CloudFlare’s certificate with GitLab Pages although the article is aged and a small detail needs to be updated. They are as follows:

The Walkthrough

Prerequisite
Step 1. Add DNS Record
  1. add a CNAME record
    • for example, a <your.domain> record pointing to <your-repo>.gitlab.io.
Step 2. Generate CloudFlare Origin Certificate
  1. on the left menu, expand the SSL/TLS menu item
  2. select the Origin Server menu item
  3. click Create Certificate
  4. choose the domain and click Create
  5. now you have the PEM and the private key
Step 3. Add the Certificate to Your GitLab Pages Project
  1. on GitLab, navigate to Settings > Pages.
  2. click New Domain
  3. copy & paste the PEM and certificate from CloudFlare
  4. DO NOT SUBMIT THE FORM yet
Step 4. The Trick

CloudFlare does not combine both PEM and root certificates in one. If you have submitted, you will get an error saying the certificates missing the intermediate CA.

Copy the following CA, the CloudFlare’s Origin CA, and paste it below your PEM.

-----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-----
Step 5. Apply the changes
  1. click Create New Domain
  2. Ta-da! 🎉
By @soundlake in
Tags : #HTTPS, #certificate, #GitLab, #CloudFlare, #Pelican, #IT,