CDN Berkas Statis Blogger dengan Domain Sendiri Menggunakan GitHub Pages

CDN Berkas Statis Blogger dengan Domain Sendiri Menggunakan GitHub Pages

CDN berkas statis Blogger bertujuan agar proses memuat situs web menjadi lebih cepat karena masih mengakses dari domain sendiri.
CDN Berkas Statis Blogger dengan Domain Sendiri

Setelah sebelumnya saya membahas tutorial menggunakan CDN dengan domain sendiri untuk gambar Blogger. Kali ini saya akan membuat tutorial CDN lainnya untuk berkas statis yang mungkin akan dipasang pada blog Blogger.

Konten statis yang dimaksud kali ini bisa berupa berkas CSS, gambar, JavaScript, HTML, dan sebagainya.

CDN Konten Statis dengan Domain Sendiri

Mengapa harus menggunakan domain sendiri untuk tautan berkas-berkas statis?

Tujuannya agar proses memuat situs web menjadi lebih cepat. Karena jika menyimpan dengan menggunakan domain lain, peramban akan menganggap Anda membuka situs web berbeda.

Jika menggunakan CMS lain, kita disarankan untuk menyimpan berkas statis di pihak ketiga, tetapi Anda tidak perlu melakukannya ketika Anda menggunakan Blogger.

Blogger sendiri menggunakan server Google yang kehandalannya sangat baik. Tetapi Anda akan kesulitan untuk menyimpan berkas seperti JavaScript atau fon.

Untuk mengatasi masalah ini, Anda bisa memanfaatkan penyimpanan dari pihak ketiga. Saya sendiri menggunakan GitHub untuk menyimpan berkas statis dan memanfaatkan Cloudflare untuk mengelola cache.

GitHub Page

Jika Anda memiliki TLD (Top Level Domain) sendiri, Anda bisa menghubungkan GitHub Page dengan subdomain Anda sendiri. Baik Anda menggunakan custom domain Blogger atau dengan hosting sendiri.

Mengapa harus menggunakan GitHub Page?

Bagi pengguna Blogger, akan berguna untuk menyimpan berkas CSS, gambar, JavaScript, HTML, dan sebagainya.

Sedangkan bagi pengguna WordPress.org atau situs web dengan hosting sendiri, ini akan menghemat penggunaan space hosting dan bandwidth.

Saya sendiri menggunakan GitHub Page yang terhubung dengan domain yang terintegrasi dengan Cloudflare sebagai CDN, sehingga tidak perlu menggunakan CDN yang lain seperti Statically, RawGit, JsDelivr dan sejenisnya.

Apa keuntungan Menggunakan GitHub Page?

Berikut adalah beberapa keuntungan yang bakal Anda dapatkan jika menggunakan GitHub Page (Halaman Github):

  • Gratis. Anda tidak perlu mengeluarkan uang untuk membuat server sendiri. Meski demikian, anak perusahaan Microsoft ini juga menyediakan versi berbayar.
  • Bisa Custom Domain. GitHub Page menyediakan fitur custom domain, sehingga akan terkesan lebih professional seperti milik kita sendiri. Saya menggunakan subdomain cdn.zakiy.my.id untuk GitHub Page bagi blog ini.
  • Keamanan Terjamin. GitHub sudah menjamin keamanan bagi penggunanya dengan fitur seperti otentifikasi ganda. Berbeda ketika jika Anda menggunakan hosting milik sendiri, yang mengharuskan menjaga keamanan server dengan lebih ketat.
  • Tanpa Batasan Kapasitas. Anda akan mendapatkan repositori tanpa batasan kapasitas dari GitHub tetapi ukuran masing-masing berkasnya dibatasi maksimal sebesar 500 MB untuk paket Gratis, 2 GB untuk paket Team (Pro), dan 50 GB untuk paket Enterprise.
  • Mudah. Anda cukup membutuhkan waktu kurang dari 5 menit saja membuat GitHub Page jika mengikuti panduan di artikel ini.

Cara Membuat GitHub Page dengan Domain Sendiri

Bagi Anda yang tertarik membuat subdomain dengan GitHub Page, silahkan ikuti langkah-langkah berikut ini:

1. Login ke GitHub / buat akun GitHub jika Anda belum punya.

2. Buka tautan Jekyll Now, kemudian klik Fork.

CDN Berkas Statis Blogger dengan Domain Sendiri

3. Kemudian klik Settings.

CDN Berkas Statis Blogger dengan Domain Sendiri

4. Ganti nama repository-nya sesuai keinginan Anda. Misalkan saya menggunakan nama cdnblogger.github.io, seperti gambar di bawah. kemudian Rename.

CDN Berkas Statis Blogger dengan Domain Sendiri

5. Masuk ke dasbor domain Anda, kemudian atur DNS-nya. Sebagai contoh saya membuat subdomain cdn, maka pada kolom name masukan cdn, type-nya pilih CNAME dan pada kolom target isikan alamat GitHub Page Anda, sebagai contoh cdnblogger.github.io pada gambar berikut:

CDN Berkas Statis Blogger dengan Domain Sendiri

6. Setelah disimpan, silahkan kunjungi GitHub. Kemudian klik pada Repositori GitHub Page Anda. Setting > Page > Custom Domain > Save.

CDN Berkas Statis Blogger dengan Domain Sendiri

Tunggu beberapa saat untuk propagasi DNS, apabila HTTPS sudah tersedia, silahkan klik Enforce HTTPS. Terkadang, Anda tidak bisa menggunakan SSL dari GitHub, di sini Anda bisa memanfaatkan SSL dari Cloudflare.

Lamanya propagasi bisa berbeda-beda, saya sendiri sekitar 5 menit dan subdomain sudah bisa diakses.

Cara Mengatur Cache Berkas CDN GitHub di Cloudflare

Langkah berikutnya yang cukup diperlukan adalah mengatur masa cache di CDN Anda di Cloudflare. Secara default, cache hanya berlaku 24 jam. Meski demikian, saya tidak memaksa Anda untuk mengikuti langkah setelah ini.

Langkah-langkahnya adalah sebagai berikut:

1. Login ke Cloudflare.

2. Pilih domain Anda.

3. Klik Rules.

CDN Berkas Statis Blogger dengan Domain Sendiri

4. Klik Create Page Rules.

CDN Berkas Statis Blogger dengan Domain Sendiri

Dan isikan seperti berikut:

CDN Berkas Statis Blogger dengan Domain Sendiri

Jangan lupa untuk menyesuaikan dengan nama domain Anda.

Klik Save.

Jika Anda mengubah berkas statis di GitHub, jangan lupa untuk Purge Cache di Cloudflare atau berkas Anda tidak akan berubah hingga kuki kadaluarsa.

Semoga bermanfaat.

Referensi:
kang-ismet.com