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

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.

FILEGemfile
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

FILE_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.

FILEcovid19.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.

FILE_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.

FILEcovid19.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

  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


Lisensi

logo_cc-by-nc-sa
Tulisan ini dilisensikan dengan :
Atribusi-NonKomersial-BerbagiSerupa 4.0 Internasional (CC BY-NC-SA 4.0)

Penulis

bandithijo

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

038086bd42fac4db5229658509c7108a9fe65aea