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

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

My journey kicks off from reading textbooks as a former Medical Student to digging bugs as a Software Engineer – a delightful rollercoaster of career twists. Embracing failure with the grace of a Cat avoiding water, I've seamlessly transitioned from Stethoscope to Keyboard. Armed with ability for learning and adapting faster than a Heart Beat, I'm on a mission to turn Code into a Product.

- Rizqi Nur Assyaufi

d98d8237fef8f1017d0be931b6e291341cbe6ca8