Menggunakan Netlify sebagai url shortener
Tags: netlify, redirects
Published: 2020-09-20 04:18:23


Kamu pasti sudah kenal dengan layanan url shortener seperti [bit.ly](https://bitly.com/). 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](https://docs.netlify.com/routing/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](https://docs.netlify.com/site-deploys/create-deploys/#deploy-with-git) 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](https://docs.netlify.com/domains-https/netlify-dns/) 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

```toml
[build]
  publish = "."
```

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

```bash
$ 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

- [kuy.sh/open-source](https://kuy.sh/open-source)
- [kuy.sh/vue-react](kuy.sh/vue-react)
- [kuy.sh/alpinejs](kuy.sh/alpinejs)
- [kuy.sh/tailwindcss](kuy.sh/tailwindcss)
- [kuy.sh/express-jsx](kuy.sh/express-jsx)

##### Step 6: Otomasi

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

1. Buka directory project
2. Edit file `_redirects`
3. `git commit` perubahan yang dibuat
4. `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)

```bash
$ 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)

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

Isi scriptnya lebih kurang seperti ini

{% gist https://gist.github.com/armedi/24453dfaa86bfca36bf1651a36d51a90 file=shorten %}

Sekarang di terminal kamu bisa menyingkat url dengan menggunakan command seperti

```bash
$ 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](https://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.