Mulai April 2020, bandithijo.com akan menggunakan GitHub subdomain menjadi bandithijo.github.io. Penggunaan domain .com tidak sejalan dengan cara pandang saya terhadap sebuah blog, dimana blog harus bisa tetap hidup tanpa saya. Terima kasih (^_^) (bandithijo, 2020/03/25) ●

Menangani Redirect ke Website Lain pada Jekyll

Ditulis: 2020/07/06
Jekyll Tips

بسم الله الرحمن الرحيم

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.

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

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.

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.

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.

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

  1. docs.github.com/en/enterprise/2.13/user/articles/redirects-on-github-pages
    Diakses tanggal: 2020/07/06

  2. github.com/jekyll/jekyll-redirect-from
    Diakses tanggal: 2020/07/06

Penulis

bandithijo

BanditHijo adalah nama pena saya – meminjam istilah keren dari para penulis. Teman-teman menyebut saya sebagai GNU/Linux Enthusiast. Saya memang gemar mengutak-atik sistem operasi ini. Bukan karena hobi tapi karena saya perlu untuk menggunakannya. Hehe.

- Rizqi Nur Assyaufi

Berlangganan via Email

Jangan sampai ketinggalan kabar dan info terbaru mengenai BanditHijo (R)-Chive.
Ayo bergabung!

d9fa304ba660ef3df99f5ad20c41927b51e6ff4b