Pemrograman

Bahasa

Framework

Peralatan

Cara Menambahkan SSL Gratis dari Cloudflare untuk Github Pages (Kostum Domain)

Ardianta Pargo dalam Jaringan
19 April 2017 · 10:56

Cara Menambahkan SSL Gratis dari Cloudflare untuk Github Pages (Kostum Domain)

Pada dasarnya Github telah memberikan SSL untuk setiap halaman github (Github Pages). Akan tetapi, untuk halaman github yang menggunakan domain sendiri tidak diberikan.

Contoh Halaman github dengan SSL:

https://petanikode.github.io

Lihat, di sana https menandakan SSL-nya aktif.

Sedangkan untuk kostum domain, seperti http://petanikode.com tidak diberikan SSL.

Mengapa Menggunakan SSL?

Petani Kode memang sebuah halaman statis yang dibuat dengan Hugo.

Sepertinya SSL tidak terlalu dibutuhkan, karena tidak ada pemerosesan data melalui form yang akan dikirim ke database.

Tapi, menurut beberapa pakar SEO: menggunakan SSL/https di blog akan meningkatkan kepercayaan mesin pencari.

Saya percaya… karena beru saja membaca: HTTPS as a ranking signal.

Karena itu, petani kode harus menggunakan SSL 😄.

Mengaktifkan SSL Cloudflare

Pertama pastikan pengaturan DNS-nya seperti ini:

Konfigurasi DNS Cloudflare

Artinya, website kita yang di Github akan melewati Cloudflare kemudian diteruskan ke Client.

Setelah itu masuk ke Crypto, kemudian atur SSL menjadi Full.

Pengaturan SSL Cloudflare

Ada empat pilihan: off, flexible, full, dan full (strict).

Perbedaanya seperti ini:

Perbedaan pengaturan SSL Cloudflare

Sumber: blog.cloudflare.com

Membuat Page Rules

Agar http dialihkan ke https, maka kita perlu membuat page rules.

Silahkan masuk ke Page Rules, kemudian tambahkan rules seperti ini.

Pengaturan Page Rules untuk HTTPS

Tambahkan juga rules untuk cache-nya seperti ini:

Pengaturan Page Rules untuk Cache

Karena kita ingin menggunakan alamat dengan https maka perlu diubah Konfigurasinya.

Di Hugo, baseurl-nya diubah menjadi seperti ini:

baseurl = "https://www.petanikode.com/"

Sedangkana di repositori githubnya:

CNAME: petanikode.github.io/CNAME

www.petanikode.com

Percobaan dan Masalah

Saat melakukan percobaan, saya kira SSL-nya tidak bekerja dengan baik.

Terlihat di browser, ketika membuka https://www.petanikode.com warnya abu-abu.

SSL Belum aman

Hal ini disebabkan karena ada beberapa link gambar yang masih menggunakan HTTP.

Kemudian Saya mencoba mencarinya di page source:

Link aset yang masih menggunakan http

Setelah mengetahui, gambar atau assets yang masih menggunakan http selanjutnya tinggal mengubahnya menjadi https.

Pada Hugo, Konfigurasinya saya letakan di config.toml.

Mengubah link gambar dari http menjadi https

…dan akhirnya SSL sudah aktif.

SSL Petani kode sudah aktif

Akan tetapi, ada satu lagi masalah yang muncul.

Semua komentar menghilang, karena link yang tersimpan di disqus adalah link versi sebelumnya.

Mungkin nanti akan saya perbaiki 😄, yang penting sekarang sudah HTTPS.