DEV Community

Cover image for Tutorial Membuat Redirect Di CMS Draftbox
MauCariApa.com
MauCariApa.com

Posted on • Originally published at maucariapa.com

Tutorial Membuat Redirect Di CMS Draftbox

Pada artikel lain, kami telah membahas apa itu Draftbox dan mengapa kami migrasi dari WordPress ke Draftbox. Selain itu, kami telah menulis 4 CMS Jamstack yang direkomendasikan untuk pengguna yang baru hijrah ke Jamstack.

Pada artikel kali ini, kita akan belajar bagaimana membuat redirect 301/302 seperti pada Apache atau Nginx. Idenya sama, namun pendekatannya berbeda. Jika Nginx menggunakan konfigurasi file .conf, sedangkan Apache menggunakan .htaccess untuk mengimplementasikan redirect 301 permanen atau 302 temporer.

Draftbox menggunakan Netlify sebagai server, DNS (opsional) dan CDN-nya. Dengan fitur-fitur dan keandalan Netlify, Draftbox mampu menampilkan website dengan uptime yang cepat dan menampung banyak visitor; Netlify juga menawarkan paket gratis yang cukup lega untuk pengguna.

Karena menggunakan Netlify, redirect tadi menjadi agak mustahil mengingat Netlify tidak memiliki konfigurasi .htaccess seperti Apache dan .conf seperti Nginx. Untuk mengatasi hal ini, Anda dapat menggunakan dua pendekatan, yang pertama melalui Netlify Redirects dan kedua menggunakan Draftbox Redirects.

null

Beberapa waktu lalu, kami coba menghubungi tim Draftbox dan menanyakan apakah redirect di Draftbox dibatasi. Jawaban mereka tidak ada batasan mengenai berapa jumlah redirect yang dapat ditambah. Itu Artinya, Anda dapat menambahkan beberapa redirect sekaligus.

Pada tutorial ini, kami akan menggunakan pendekatan kedua, yaitu Draftbox Redirect karena dapat menyematkan banyak redirect tanpa batas dan gratis.

Membuat redirect ads.txt untuk AdSense

Google merekomendasikan website yang telah menjadi penayang untuk membuat file ads.txt di website mereka. Hal ini guna mencegah kehilangan earning AdSense. Di sisi lain, ini merupakan kepatuhan penayang terhadap peraturan dan kebijakan Google.

Pembuatan redirect di Draftbox & repositori GitHub

Untuk mengaktifkan Redirect, Anda dapat menggunakan menu Advanced Options > Redirects.

null

Setelah itu, Klik + Add Menu Item untuk menambahkan redirect. Anda masuk atau daftar GitHub & buat repositori baru . Langkah selanjutnya membuat ads.txt di repository tersebut.

null

Setelah membuat ads.txt, langkah selanjutnya klik tombol Raw dan path asli dari file akan terlihat.

null


https://raw.githubusercontent.com/phantomhell/maucariapadotcom/main/ads.txt
Enter fullscreen mode Exit fullscreen mode

URL diatas hanya sebagai contoh, untuk live demo, gunakan URL GitHub Anda.

Setelah selesai, salin link raw tersebut dan tempel di Draftbox Redirect.

null

Di bagian From, buat /ads.txt. Sedangkan di bagian To, gunakan url raw github yang telah di salin. Untuk status Anda dapat menggunakan 301 atau 302.

Terapkan perubahan yang telah dibuat

Berbeda dengan WordPress, Drupal atau CMS sejenis. Di Draftbox, Anda perlu menerapkan perubahan secara manual. Setelah membuat perubahan, akan muncul tombol Publish Now.

Dengan mengklik tombol tersebut, Draftbox akan memberitahu Netlify bahwa telah terjadi perubahan di Draftbox yang harus segera diterapkan. Namun tidak hanya perubahan konfigurasi, setiap artikel yang dibuat harus melalui proses ini sesaat setelah diterbitkan agar tampil di halaman website.

null

null

Pengujian

Untuk menguji apakah redirect berfungsi dengan baik, buka url https://maucariapa.com/ads.txt. Apabila mengarah ke raw GitHub, artinya redirect yang telah kita buat berhasil dengan baik. Namun sebaliknya, jika yang tampil halaman 404; artinya redirect yang kita buat gagal.

URL diatas hanya sebagai contoh, untuk live demo, gunakan URL website Anda.

Contoh redirect berhasil

null

Contoh redirect yang gagal

null

Kesimpulan

Selain membuat redirect untuk ads.txt, Anda dapat menggunakan metode ini untuk membuat robots.txt, menampilkan iklan dari pihak ketiga seperti Infolinks. Menampilkan push notification dari OneSignal atau SendPulse.

Originally published at MauCariApa.com on April 16, 2021.

Top comments (0)