Menggunakan Netlify sebagai url shortener

Kamu pasti sudah kenal dengan layanan url shortener seperti bit.ly. Sangat berguna sekali untuk sharing link promosi atau info menarik dengan url yang singkat seperti bit.ly/aBcdE. Lumayan bisa menghemat karakter daripada harus copy paste url aslinya yang panjang.

Tapi barangkali kamu ingin menggunakan fitur branded link dari bit.ly dengan domain sendiri (misalnya toko.onl/smartphone), namun masih berpikir dua kali karena melihat harga termurahnya adalah $29 per bulan dan harus dibayar langsung untuk 1 tahun sebesar $348.

Solusi yang jauh lebih murah adalah dengan menggunakan Netlify redirects yang bisa dipakai gratis. Kamu hanya perlu menyediakan domain saja. Harganya sih variatif, beberapa ada yang bisa diperoleh dengan merogoh kocek kurang dari $10.

Step 1: Buat site baru di Netlify

Hubungkan site yang dibuat dengan repositori di github, agar kamu bisa pakai fitur Continous Deployment dari Netlify.

Step 2: Sediakan domain

Karena tujuannya buat dipakai sebagai url shortener, sebaiknya beli domain dengan jumlah karakter kurang dari 5 karakter.

Step 3: Konfigurasi DNS

Paling gampang adalah dengan menggunakan DNS Netlify. Ganti settingan DNS server domain kamu agar menggunakan DNS server Netlify. Kemudian gunakan domain itu sebagai domain utama untuk site yang sebelumnya sudah kamu buat.

Step 4: Konfigurasi Netlify di local dan buat daftar redirects

Pada root project, buat sebuah file dengan nama netlify.toml

Isinya cukup seperti ini saja

[build]
  publish = "."

Lalu masih di root project, buat sebuah file dengan nama _redirects

$ touch _redirects

Di dalam file ini adalah pasangan short url dan destinasi yang diinginkan. Masing-masing satu baris untuk setiap pasangan url. Ini contoh url yang saya pakai

/open-source        https://dev.to/armedi/merdeka-dengan-open-source-40d6
/vue-react          https://dev.to/armedi/menggunakan-vue-reactivity-pada-komponen-react-2j08
/alpinejs           https://dev.to/armedi/mencoba-alpine-js-tailwind-for-javascript-5hg6
/tailwindcss        https://dev.to/armedi/tailwind-css-dan-bagaimana-menggunakannya-dengan-create-react-app-7ba
/express-jsx        https://dev.to/armedi/menggunakan-jsx-sebagai-view-engine-express-js-d3o

Step 5: Commit dan push ke github

Kalau sebelumnya sudah sukses menyambungkan repositori github dengan Netlify, maka sekarang Netlify sudah otomatis men-deploy. Proses deployment yang sedang berjalan bisa dipantau dari dashboard Netlify.

Kalau sudah sukses, artinya sekarang kamu sudah berhasil memiliki url-shortener sendiri. Cek masing-masing short url yang kamu buat apakah sudah benar atau belum. Misalnya short url yang saya buat mengarah ke postingan artikel di dev.to

Step 6: Otomasi

Untuk penambahan url-url berikutnya, kalau dilakukan secara manual stepnya cukup banyak dan pasti membosankan

Buka directory project
Edit file _redirects
git commit perubahan yang dibuat
git push ke repository di github

Untuk mengotomasi itu semua, kita bisa bikin pakai javascript.

Masih di root project, buat file shorten (nama file bebas, tidak perlu pakai ekstensi .js)

$ touch shorten
$ chmod +x shorten

Kemudian agar script ini bisa diakses di terminal dari directory mana pun, kita akan buat symlink (command di bawah hanya berlaku di Linux dan Mac)

$ ln -s $PWD/shorten /usr/local/bin/shorten

Isi scriptnya lebih kurang seperti ini

Sekarang di terminal kamu bisa menyingkat url dengan menggunakan command seperti

$ shorten https://dev.to/armedi/menggunakan-netlify-sebagai-url-shortener-28jc /url-shortener

# outputnya:
shorten https://dev.to/armedi/menggunakan-netlify-sebagai-url-shortener-28jc to /url-shortener

Dan sudah otomatis terdeploy di Netlify. Bisa diakses di kuy.sh/url-shortener

Note:

Kekurangan menggunakan Netlify redirect dibandingkan dengan bit.ly atau sejenis adalah tidak adanya report statistik, misal seberapa sering link diakses. Kalau kamu merasa penting adanya report, mungkin perlu mempertimbangkan untuk membeli layanan berbayar.

Blog