Menggunakan Netlify 세바가이 URL 단축기

Kamu pasti sudah kenal dengan layanan url shorter seperti bit.ly . Sangat berguna sekali untuk 공유 링크 프로모션 atau 정보 menarik dengan url yang singkat seperti bit.ly/aBcdE. Lumayan bisa menghemat karakter daripada harus 복사 붙여넣기 url aslinya yang panjang.

Tapi barangkali kamu ingin menggunakan fitur 브랜드 링크 dari bit.ly dengan 도메인 센디리(misalnya toko.onl/smartphone), namun masih berpikir dua kali karena melihat harga termurahnya adalah $3.

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.


1단계: Buat 사이트 baru di Netlify

Hubungkan 사이트 yang dibuat dengan 저장소 di github, agar kamu bisa pakai fitur Continous Deployment dari Netlify.


2단계: Sediakan 도메인

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


3단계: 콘피구라시 DNS

Paling 감팡 아달라 뎅간 멩구나칸 DNS Netlify. Ganti settingan DNS server domain kamu agar menggunakan DNS 서버 Netlify. Kemudian gunakan 도메인 itu sebagai 도메인 utama untuk 사이트 yang sebelumnya sudah kamu buat.


4단계: Konfigurasi Netlify di local dan buat daftar 리디렉션

파다 루트 프로젝트, 부아트 세부아 파일 뎅간 나마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 양 사야 파카이

/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

5단계: github에 커밋하기

Kalau sebelumnya sudah sukses menyambungkan 리포지토리 github dengan Netlify, 마카 세카랑 Netlify sudah otomatis men-deploy. 산문 배포 양 세단 베르잘란 비사 디판타우 다리 대시보드 Netlify.

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

kuy.sh/open-source

kuy.sh/vue-react

kuy.sh/alpinejs

kuy.sh/tailwindcss

kuy.sh/express-jsx

6단계: 오토마시

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

부카 디렉토리 프로젝트

파일 편집_redirects

git commit perubahan yang dibuat

git push ke 저장소 di github

Untuk mengotomasi itu semua, kita bisa bikin pakai javascript.

Masih di 루트 프로젝트, buat 파일shorten(nama 파일 bebas, tidak perlu pakai ekstensi .js)

$ touch shorten
$ chmod +x shorten

Kemudian 한천 스크립트 ini bisa diakses di terminal dari 디렉토리 mana pun, kita akan buat symlink(명령 di bawah hanya berlaku di Linux dan Mac)

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

Isi scriptnya lebih kurang seperti ini

$ 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