Sekenario Masalah
Saya memiliki sebuah URL yang cukup panjang dan tidak begitu mudah untuk diingat maupun ditulis.
https://covid19-indo-harian.herokuapp.com
Dampaknya adalah membuat orang kesulitan untuk berkunjung kembali.
Maka, saya pun mencari solusi untuk membuat URL tersebut menjadi lebih catchy.
Seperti ini,
https://bandithijo.github.io/covid19
Cukup catchy kan? Gak juga yaa? Hehehe
Pokoknya lumayan mudah diingat lah yaa. Karena cukup mengakses URL dari blog ini dan menambahkan /covid19
.
Emang bisa begitu, bang?
Bisa banget, mas Bro! Caranya juga sangat mudah.
Pemecahan Masalah
Kita akan menggunakan jekyll-redirect-from gem.
Pasang pada Gemfile
.
Gemfile
1
2
3
4
5
6
# If you have any plugins, put them here!
group :jekyll_plugins do
# ...
# ...
gem 'jekyll-redirect-from', '~> 0.16.0'
end
Kemudian install dulu,
$ bundle install
Selanjutnya, definisikan pada _config.yml
_config.yml
1
2
3
4
plugins:
# ...
# ...
- jekyll-redirect-from
Setelah semua konfigurasi gem di atas selesai, kita akan membuat sebuah page yang akan digunakan sebagai halaman redirect.
Beri nama sesuai nama permalink.
Misal, dalam kasus saya, permalinknya mau seperti ini /covid19/
, maka nama file pagenya adalah covid19.html
.
Kemudian buka file page tersebut. Dan isikan hanya bagian front matter saja.
covid19.html
1
2
3
4
---
permalink: '/covid19/'
redirect_to: 'https://covid19-indo-harian.herokuapp.com/'
---
Selesai!
Dokumentasi lebih lengkap dapat teman-teman baca pada halaman README dari jekyll-redirect-from gem di GitHub. Alamat URL nya sudah saya berikan pada bagian referensi di bawah.
Tambahan
Membuat Redirecting Layout
Kalau hanya menggunakan cara di atas, maka halaman redirect kita akan putih polos saja.
Tentu ini akan “berbahaya” apabila respon yang diberikan oleh web server tujuan ternyata lambat. Pengunjung dapat kabur meninggalkan halaman redirecting yang putih polos.
Maka dari itu, kita dapat menyiasati dengan menghias halaman redirecting kita.
Buat layout dengan nama _layouts/redirect.html
.
_layouts/redirect.html
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Redirecting to </title>
<meta http-equiv="refresh" content="0; URL=">
<link rel="canonical" href="">
</head>
<body>
<h3>Redirecting...</h3>
</body>
</html>
Saya hanya mencontohkan sederhana, namun teman-teman dapat bermain-main dengan layout ini, seperti memberikan gif loading dan sebagainya.
Perhatikan bagian page.redirect.to
, adalah variabel yang saya pergunakan pada front matter dari page yang saya pergunakan untuk membuat page redirect.
Sekedar Simpan
Sebelum menggunakan jekyll-redirect-from gem, saya sempat mencoba menggunakan cara manual dengan mengisi file page untuk redirect seperti di bawah ini.
covid19.html
1
2
3
4
5
6
7
8
9
---
permalink: '/covid19/'
---
<!DOCTYPE html>
<meta charset="utf-8">
<title>Redirecting to https://example.com/</title>
<meta http-equiv="refresh" content="0; URL=https://example.com/">
<link rel="canonical" href="https://example.com/">
Namun, sayangnya tidak dapat digunakan pada GitHub Page.
Mungkin cara ini bisa menjadi alternatif untuk teman-teman yang ingin menggunakannya pada SSG selain Jekyll. Meskipun saya belum pernah mencobanya.
Sekian, mudah-mudahan dapat bermanfaat.
Terima kasih (^_^)
Referensi
-
docs.github.com/en/enterprise/2.13/user/articles/redirects-on-github-pages
Diakses tanggal: 2020/07/06 -
github.com/jekyll/jekyll-redirect-from
Diakses tanggal: 2020/07/06
Lisensi

Atribusi-NonKomersial-BerbagiSerupa 4.0 Internasional (CC BY-NC-SA 4.0)
Penulis

BanditHijo adalah nama pena saya –meminjam istilah keren dari para penulis. Teman-teman menyebut saya sebagai Linux Enthusiast. Saya memang gemar mengutak-atik sistem operasi ini. Sistem operasi ini memberikan saya kebebasan untuk mengekspresikan ide-ide dalam membantu menyelesaikan pekerjaan saya sehari-hari.
- Rizqi Nur Assyaufi