Tutorial Cara Redirect URL dari Blogger ke Hugo


JagoTekno.com - Setelah migrasi dari Blogger ke Hugo ada satu hal yang sangat penting untuk diperhatikan yaitu trafik pengunjung. Trafik pengunjung sangat erat kaitannya dengan url yang terpasang di situs.

Apabila situs sudah berjalan cukup lama dan sudah mendapatkan pengunjung yang banyak maka jangan sampai mereka kabur gara-gara kesalahan.

Sebagaimana diketahui bahwa url memiliki format yang selalu ada yaitu tahun dan bulan dan diakhiri dengan .html di tiap artikel. Format url seperti ini disebut uglyurl.

Contohnya seperti ini : domain.com/2022/12/artikel.html

Nanti setelah pindah ke Hugo, alangkah baiknya url seperti ini diganti menjadi prettyurl.

Jadinya seperti ini : domain.com/artikel/

Tapi jangan asal mengubahnya, ada triknya supaya pengunjung tetap bisa mengakses situs anda tanpa kendala sama sekali.

Kita tidak akan menghapus url lamanya, kita hanya perlu mengubahnya menjadi alias url, dan url baru dibuat secara otomatis nanti.

Untuk melakukan hal ini anda harus menggunakan linux / unix / macos atau setidaknya text editor yang sudah mendukung terminal, misalnya Vscode, karena kita akan menggunakan satu unix tool bernama sed.

Sudah tidak sabar? Mari kita mulai.

Cara redirect url dari blogger ke hugo

Penting! Backup folder content / post

Copy paste folder content/post anda ke suatu tempat untuk mencegah hal-hal yang tidak diinginkan. Karena perintah sed ini akan mengubah secara permanen apa yang ada di tiap file artikel.

Bekerja di folder artikel

Buka folder artikel anda. Misalnya, disini saya memiliki folder artikel bernama post.

cd post

Pastikan format frontmatter tiap artikel sudah sesuai

Frontmatter adalah beberapa baris pengaturan untuk setiap artikel pada file markdown artikel anda. Biasanya diawali dengan — atau +++.

Format frontmatter yang digunakan yaitu seperti ini :

Kondisinya seperti ini. Yang perlu diperhatikan adalah baris url: /

Membuat aliases

Aliases merupakan fitur hugo yang akan meredirect url lama ke url baru.

keren banget Hugo.

Pastikan anda hanya bekerja di folder artikel/post anda. Buka terminal lalu tekan ls untuk melihat list artikel anda.

Kemudian untuk mengeksekusi kita masukkan saja perintah ini :

sed -i '' -e "s|url: /20*|url: /20|pg; s|url: /20|aliases: /20|g" *.md

Gunanya untuk membuat baris baru yang diawali dengan aliases.

Sehingga jadinya seperti ini. Silahkan cek lagi artikel anda untuk memastikanya.

Hapus tahun dan bulan yang ada di url

Setelah itu pada baris sebelumnya, kita akan hapus tahun dan bulan sekaligus di setiap artikel.

Perintanya seperti ini :

sed -i '' -e '/^url: /s@/..../../@/@' *.md

Silahkan memeriksa lagi file artikel anda. Pastikan sudah berubah menjadi seperti ini :

Hapus .html yang ada di baris url:

Supaya url nya menjadi pretty url, kita hapus lagi .html yang ada di baris url:

Masukkan kode berikut :

sed -i '' -e 's/^url/url/; s/.html$//' *.md

Perintah di atas, belum selesai karena akan menghilangkan .html di belakang aliases juga. Silahkan lanjutkan dengan perintah berikut :

sed -i '' -e 's/^aliases.*/&.html/' *.md

Sehingga hasilnya seperti ini :

Selesai.

Silahkan cek kembali artikel markdown anda. Semoga hasilnya sesuai ekspektasi.

Akhir kata

Cara di atas tentu memiliki best practice jika anda memiliki pengetahuan menggunakan unix system dengan lebih baik. Hanya saya pisahkan satu per satu baris supaya lebih gampang dimengerti.

Intinya adalah fitur Aliases ini terasa sangat membantu kita dalam melakukan redirect url sehingga pengunjung tidak hilang saat melakukan navigasi.

Menurut saya ini adalah fitur paling keren, karena sangat memudahkan untuk kita mendapatkan url yang SEO Friendly dan tentunya tetap bisa mempertahankan trafik blog/situs.

Demikian artikel singkat cara redirect url blogger ke hugo dari uglyurl menjadi pretty url yang seo friendly.

Semoga bermanfaat.

Migrasi situs dari Blogger ke HUGO
Ditulis oleh Rafi pada Friday, 20 May 2022
mrfdn author

Rafi

  • 15 year+ of Linux user.
  • 5 years+ blogger and web developer.

Jika artikel yang dibuatnya ternyata bermanfaat, support dengan cara

Baca juga

Script Set Category Hugo Markdown

Script Set Category Hugo Markdown

words min read
Hugo if Isset Tutorial

Hugo if Isset Tutorial

words min read
Cara Install Tailwind Hugo

Cara Install Tailwind Hugo

words min read

comments powered by Disqus