author Ahmad Muhardian

Cara Menggunakan SSL Gratis dari Cloudflare untuk Github Pages (Kustom Domain)


Cara Menambahkan SSL Gratis dari Cloudflare untuk Github Pages

Gihub pages merupakan layanan hosting web statis dari Github. Layanan ini sebenarnya sudah memberikan SSL Gratis untuk domain yang menggunakan .github.io.

Lalu bagaimana dengan yang kustom domain atau domain sendiri?

Untuk yang kustom domain, kita bisa menggunakan SSL gratis dari Cloudflare. Cloudflare merupakan layanan untuk CDN, DNS Management, Cache, SSL, dll.

Saya kira, setiap website harus menggunakan Cloudflare, karena bnayak manfaat yang bisa didapat dari sana.

Oke, lalu bagaimana cara memanfaatkan SSL gratis dari Cloudflare untuk Github pages?

Mari kita simak…

Mengapa Menggunakan SSL?

SSL akan mempengaruhi kualitas website kita.

Apabila di sana ada input data melalui form, maka wajib hukumnya menggunakan SSL.

Mengapa?

Karena akan jauh lebih aman dibandingkan yang tanpa SSL.

Sehingga akan meningkatkan kepercayaan bagi pengguna website tersebut.

SSL juga dapat meningkatkan ranking website pada mesin pencari atau SEO.1

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

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

Perbedaanya seperti ini:2

Perbedaan pengaturan SSL Cloudflare

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 Ruels untuk HTTPS

Tambahkan juga rules untuk cache-nya seperti ini:

Pengaturan Page Rules untuk Cache

Mengubah CNAME dan Konfigurasi Hugo

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 Petanikode

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.

Baca Juga ini

Cara Hosting/Deploy Hugo di Github

Cara Hosting/Deploy Hugo di Github

Github memiliki layanan hosting Static Page yang bisa kita manfaatkan untuk hosting Hugo. Pada dasarnya SSG seperti Hugo akan membuat sebuah file statis yang (biasanya) berada di dalam direktori public. Nah direktori ini yang akan kita upload ke Github agar website atau blog kita bisa dibuka melalui: https://username.github.io atau kustom domain sendiri. Berdasarkan panduan di dokumentasi Hugo, ada empat cara yang bisa dilakukan untuk hosting Hugo di Github: Hosting ke direktori doc Hosting ke cabang gh-pages Hosting ke halaman personal/organisasi Hosting Github dengan Continuous Integration (CI) Kita akan mencoba cara yang nomer 3, karena menurut saya cukup gampang.

Cara Redirect Halaman di Hugo untuk Mempertahankan Trafik

Cara Redirect Halaman di Hugo untuk Mempertahankan Trafik

Hingga saat ini, proses migrasi Petani Kode ke Hugo masih belum selesai. Mengapa saya katakan demikian? Karena banyak artikel yang belum diedit. Banyak artikel yang link-nya error 404, alias tidak ditemukan. Terpantau dari laporan Google Webmaster, error 404-nya tembus sampai 546 halaman. Hal ini akan membuat banyak orang kecewa, termasuk juga saya. Karena sudah banyak artikel yang terindeks di google, di-share di sosial media, dan link lainnya.

Cara Redirect Domain dengan CloudFlare

Cara Redirect Domain dengan CloudFlare

Saya akhirnya mengurus jaringan lagi, setelah sekian lama tidak belajar jaringan. Pada proses migrasi kemarin, proses propagasi domain memakan waktu cukup lama. Domain Petani Kode www.petanikode.com masih menunjukan halaman 404. Namun, domain yang tanpa menggunakan www, sudah bisa diakses. Karena tidak ingin semua pengunjung mendapatkan error 404, saya harus melakukan redirect ke domain baru yang tidak menggunakan www. Berikut ini caranya. 1. Masuk ke Halaman Pages RulesSilahkan buka halaman Pages Rules di Cloudflare.

Cara Menggunakan SSH di Github

Cara Menggunakan SSH di Github

SSH memungkinkan kita untuk melakukan push ke repository github tanpa login. Berbeda dengan cara yang biasa (melalui HTTPS), kita harus memasukkan username dan password setiap kali melakukan push. Tapi dengan SSH kita tidak akan melakukan itu lagi. 1. Membuat Key SSHJalankan perintah ssh-keygen pada termnial. Kemudian inputkan id (identitas) SSH anda. Untuk passpharse dikosongkan saja. Maka di dalam direktori ~/.ssh/ akan tercipa file key baru. 2.

Cara Membuat Halaman Github Kurang dari 10 Menit

Cara Membuat Halaman Github Kurang dari 10 Menit

Halaman Github (Github Pages) merupakan layanan hosting web statis yang diberikan oleh Github. Layanan ini diberikan secara gratis dan kita juga akan mendapatkan subdomain .github.io. Bagaimanakah cara membuatnya? Baiklah, pastikan anda sudah punya akun Github dan sudah menginstal Git. Kemudian silahkan ikuti langkah-langkah berikut, tidak sampai 10 menit kok. 1. Buat Repositori BaruBuatlah repositori baru dengan nama username.github.io. Gunakan username github Anda, contoh petanikode.github.io. 2.

Saya tidak Bisa Bahasa Pemrograman Go, Terpaksa ini yang Saya Lakukan

Saya tidak Bisa Bahasa Pemrograman Go, Terpaksa ini yang Saya Lakukan

Ada cerita menarik yang saya alami ketika migrasi Petani Kode dari Blogger ke Hugo. Waktu itu, ketika saya ingin mengimpor konten dari Blogger ke Hugo, ada sesuatu yang kurang dari skrip Go yang disediakan. Kekuarangnnya tidak mampu membuat atau mengambil gambar (thumbnail) untuk setiap artikel. Saya kemudian berpikir, mungkin nanti saya bisa edit setiap gambar untuk artikel. Namun, rasanya akan sangat melelahkan melakukannya karena jumlah artikelnya sampai ratusan. Tidak ingin melakukan hal yang berulang-ulang seperti kata orang, Don’t Repeat Yourself di singkat DRY.