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 commitperubahan yang dibuat -
git pushke 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.
Top comments (0)