Custom Domain Gitlab Pages Dengan Idwebhost di Cloudflare + Sertifikat SSL/TLS Gratis

Punya Gitlab Pages? dan mau custom domain gitlab pages agar terlihat lebih profesional?

Sebenarnya dalam dokumentasi gitlab sudah disertakan bagaimana caranya setting domain, baik menggunakan root domain ataupun CNAME.

Namun dokumentasinya cukup menyulitkan jika tidak terlalu paham bahasa inggris, ditambah jika domain yang kita gunakan berasal dari Idwebhost ataupun penyedia domain lain. Karena di dokumentasinya hanya menyertakan bagaimana setting gitlab pages dari cloudflare.

Oke, pada artikel ini akan saya bagi menjadi beberapa bab:

Apa Itu Gitlab Pages

Bagi yang sudah tau, silakan lanjut saja pada bab selanjutnya.

Gitlab pages adalah sarana yang diberikan Gitlab untuk meng-host file static sehingga dapat ditampilkan layaknya sebuah website.

Selain gitlab juga ada Github pages, keduanya sama saja. Namun jika project anda bukan opensource disarankan menggunakan gitlab. Karena untuk membuat github pages, github meminta kita untuk opensource.

Kenapa harus gitlab/github pages

Kenapa harus menggunakan sarana mereka?

Sebenarnya tidak harus juga, anda bisa langsung menggunakan hosting kalau mau, tapi dengan sarana gitlab dan github pages kita bisa menghemat pengeluaran untuk menyewa hosting yang mahal, asalkan tadi, file kita adalah file static.

Apa itu file static

Intinya file kita hanya html, css dan javascript. Ketiga file tersebut berjalan di sisi client, bukan di sisi server. Oleh karena itu disebut file static. Baca secara lengkap perbedaan website static dan dynamic di dokumentasi gitlab.

Kenapa harus custom domain

Secara default, gitlab sudah memberikan domain yang cukup bagus, yaitu *.gitlab.io. Demikian juga github sudah memberikan domain *.github.io.

Namun jika kita ingin mengubahnya menjadi www.hobikoding.com contohnya, kita harus meng-custom domain kita.

Mengalihkan Idwebhost ke Cloudflare

Salah satu penyedia layanan domain dan hosting adalah idwebhost. Bukan bermaksud promosi karena jujur saja saya juga pernah mengalami hal yang tidak menyenangkan dengan cs idwebhost, saat itu ketika saya order domain organisasi yang katanya bisa di proses dengan surat pengantar organisasi ternyata tidak bisa, harus menyerahkan sk pendirian organisasi dan pertama kalinya saya kecewa dengan idwebhost karena saya telah bayar domain tersebut.

Oke kita lupakan ceritanya, balik lagi ke topik hehe 😃

  1. Untuk mengalihkan idwebhost ke cloudflare, terlebih dahulu kita perlu membuat akun cloudflarenya.

  2. Jika sudah, tambahkan site dengan menekan menu Add Site. Masukan domain, kemudian tekan tombol Add Site.

    Cloudflare akan mengquery dns kita, tekan saja Next.

  3. Kemudian pada menu select plan, pilih sesuai kebutuhan. Saya sendiri memilih yang Free.

  4. Setelah itu cloudflare akan menampilkan dns management kita di idwebhost. Tekan saja Continue karena kita bisa mengaturnya lagi nanti.

  5. Selanjutnya kita diminta untuk mengganti nameserver ke ip yang cloudflare berikan. Contoh

    ns1.idwebhost.id ──────> k******.cloudflare.com
    ns2.idwebhost.id ──────> l******.cloudflare.com
    
  6. Masuk ke member area idwebhost, kemudian ganti nameserver sesuai ip yang diberikan cloudflare, jika tekan Ganti Nameserver.

  7. Kembali ke halaman cloudflare, tekan Continue

    Proses penggantian nameserver dapat memakan waktu hingga satu hari. Cloudflare akan mengecek penggantian secara berkala, jadi tunggu saja hingga proses penggantian nameserver selesai.

Setting SSL/TLS Certificates untuk gitlab pages

Apabila domain kita sudah dialihkan ke cloudflare, selanjutnya kita setting DNS.

  1. Masuk ke akun gitlab, kemudian pilih repository yang akan disetting domainnya. Pilih menu Pengaturan repository -> Pages -> New Domain

  2. Pada kolom Domain masukkan domain custom, contoh: hobikoding.com

  3. Kemudian jika anda ingin alamat domainnya menggunakan https maka masukkan Certificat PEM dan Key (PEM). Dimana kita mendapatkannya?

  4. Caranya yaitu masuk ke menu Crypto pada akun cloudflare domain anda, kemudian pada pengaturan SSL:

    • apabila alamat gitlab pages https://gitlabpages.gitlab.io maka pilih Full.
    • apabila alamat gitlab pages http://gitlabpages.gitlab.io maka pilih Flexible
  5. Selanjutnya pada pengaturan Origin Certificates, buat sertifikat dengan Create Certificates. Isi domain dengan www.domain.com contoh www.hobikoding.com kemudian tekan Next.

  6. Cloudflare akan memberikan Certificat PEM dan Key (PEM), masukkan kedua kode tersebut ke pengaturan domain pada gitlab. Kemudian pada kolom Certificat PEM tambahkan kode berikut:

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

    Catatan:

    Antara Certificate PEM dengan kode di atas diberi enter sehingga akan nampak seperti ini

    *****************************************************dBGao4sYdE=
    -----END CERTIFICATE-----
    
    -----BEGIN CERTIFICATE-----
    MIID/DCCAuagAwIBAgIID+rOSdTGfGcwCwYJKoZIhvcNAQELMIGLMQswCQYDVQQG
    
  7. Setelah itu tekan Create New Domain

Setting domain gitlab pages dari cloudflare

  1. Setelah kita membuat domain di gitlab, selanjutnya kita memverifikasi domain tersebut dengan cara masuk ke menu DNS pada akun cloudflare. Kemudian buat pengaturan DNS seperti berikut ini (dengan catatan)

  2. Atur dns sebagai berikut:

    TypeNameValue
    Ahobikoding.com35.185.44.232
    CNAMEwwwgitlabpages.gitlab.io
    TXT_gitlab-pages-verification-code.wwwgitlab-pages-verification-code=**********

    Catatan:

    1. 35.185.44.232 merupakan DNS dari Gitlab
    2. ganti hobikoding.com dengan domain anda
    3. ganti gitlabpages.gitlab.io dengan alamat gitlab anda
    4. ganti _gitlab-pages-verification-code.www dengan kode yang diberikan oleh gitlab pada halaman verifikasi domain sebelumnya
    5. ganti gitlab-pages-verification-code=********** dengan kode yang diberikan oleh gitlab pada halaman verifikasi domain sebelumnya
  3. Jika sudah, kembali ke halaman verifikasi gitlab dan tekan verifikasi. Apabila gagal, tunggu hingga 24 jam kemudian verifikasi kembali.

Redirect domain.com ke www.domain.com

Jika anda berhasil mengikuti semua langkah di atas, maka kita sudah bisa mengakses gitlab pages menggunakan domain custom kita seperti www.hobikoding.com.

Namun ketika kita buang www-nya akan terjadi error. Hal ini karena kita belum redirect domain.com ke www.domain.com.

Cara redirectnya yaitu:

  1. Masuk menu Page Rules pada akun cloudflare

  2. Buat pengaturan baru dengan menekan tombol Create Page Rule

  3. Buat pengaturan Forwarding URL (301 - Permanent Redirect) dari domain.com/* ke https://www.domain.com/$1 dan dari domain.com/ ke https://www.domain.com

  4. Tekan Save and Deploy