Cara hosting website dengan Vercel dan Netlify

Bismillahirrahmanirrahim

Pembahasan kali ini, saya akan membagikan cara hosting website static kita menggunakan Vercel dan Netlify agar website yang kita buat dapat dipamerkan atau dilihat oleh orang lain. Dengan menggunakan Vercel ataupun Netlify kita dengan mudah mem-publish atau meng-hosting projek website kita hanya cukup menghubungkan repository yang ada di akun Github kita sendiri, sebenarnya selain Github ada juga seperti Bitbucket dan GitLab, tapi disini aku jelaskan nya menggunakan Github ya. Sesuaikan aja sama yang kamu gunakan. Mari kita mulai :)

Persyaratan

1. Mempunyai akun Github (Daftar apabila belum punya) Daftar
2. Download & Install software Git Download Git
3. Mempunyai akun Vercel (Daftar apabila belum punya) Daftar
4. Mempunyai akun Netlify (Daftar apabila belum punya) Daftar

Setelah persyaratan nya sudah dilengkapi. Kita mulai dengan Github terlebih dahulu dimana kita membuat repository pada Github lalu di push projek lokal kita ke website nya Github menggunakan Git.

Membuat Repository di Github

Apabila sudah terdapat repository projek di akun Github kamu, langkah ini bisa kamu lewati.

1. Apabila kamu sudah membuat akun Github, silahkan login dan masuk ke dalam halaman membuat repository baru Buat repository baru
2. Isikan form sesuai aturan, untuk bagian Public atau Private silahkan pilih public dan untuk Initialize this repository with: abaikan saja dulu ya :”). Lalu tekan Create Repository.
3. Lalu akan ada tampilan perintah untuk push ke Github. Untuk itu kita lewati dulu, buka folder projek kamu lalu klik kanan pada mouse dan buka Git (Jika sudah menginstall nya).

• Di Windows jika klik kanan pada mouse buka yang bertuliskan Git Bash Here
• Di GNU/Linux bertuliskan Open in Terminal (Saya menggunakan Linux Mint)
• Di MacOS saya kurang tau hehe (Mungkin sama dengan di GNU/Linux)

4. Kemudian cek versi git mu git dengan perintah:

   git --version

   pada hari ini aku memakai git versi 2.31.1. Selanjutnya saya asumsikan kamu sudah memberikan konfigurasi awal yaitu username dan email, apabila belum kamu bisa lihat di Config Git pada teks To set your global username/email configuration:
5. Oke, setelah configurasi git telah selesai ketikan perintah dibawah ini untuk push ke Github kita:

   git init
   git add .
   git commit -m "first commit"
   git branch -M main
   git remote add origin https://github.com/usernameGithub/nama-repo-kamu.git
   git push -u origin main

   
6. Silahkan refersh halaman browser Github nya
7. Setelah itu? sudah, untuk membuat repository baru panjang juga ya :”)

Hosting dengan Vercel

1. Silahkan buka website Vercel dan login, saya asumsikan kamu sudah daftar dan mempunyai akunnya
2. Klik New Project
3. Lalu pilih Continue with Github dan akan meminta perizinan untuk menginstall vercel. Disini kamu disuruh pilih All repositoriess atau Only select repositories, disini saya All repositories. Lalu install, dan nanti akan ada repo yang telah kita buat sebelumnya di Github (repo projek kamu). Klik Import pada repo tersebut.
4. Lalu dibagian Select Vercel Scope disini saya memilih personal account, karena kita belum ada team dan ini hanya untuk latihan sederhana saja ya :”)
5. Lalu tekan continue
6. Berhubung website yang di deploy sederhana, kita tidak perlu ubah-ubah lagi. Langsung deploy aja. Dan tunggu…..
7. Ini website yang telah saya buat dengan hosting Vercel di https://cara-hosting-vercel-dan-netlify.vercel.app/. Gimana website temen-temen, huff panjang juga yak hahaha. Kalo ada kendala bisa japri saya di Telegram Rian dan bisa juga pamerin website temen-temen semua.

Okee, deploy dengan vercel sudah kelar :”. Selanjut nya kita deploy dengan netlify, let’s go bruhhhh….

Hosting dengan Netlify

1. Silahkan buka website Netlify dan login, saya asumsikan kamu sudah daftar dan mempunyai akunnya
2. Lalu tekan tombol New site from Git, setelah itu pilih Github (sesuaikan saja jika kamu pengguna selain Github)
3. Otomatis akan membuka popup browser baru untuk meminta Authorized
4. Setelah itu akan muncul repo yang tersimpan di Github kita, pilih repo projek kamu
5. Karena kita hanya web static saja yang sederhana. Tekan langsung pada tombol Deploy site dibawah, lalu tunggu…..
6. Jika ada pesan published artinya website kita sudah dapat diakses oleh orang lain, namun disini nama website kita masih aneh
7. Untuk mengatasi itu kamu klik bagian Domain settings, scroll sedikit kebawah klik bagian options dan Edit site name
8. Edit nama domain nya sesuai keinginan kamu, lalu save
9. Dan domain akan berubah sesuai input yang kamu edit dan domain sebelumnya tidak bisa kamu akses lagi, kamu bisa cek website yang saya buat ini dengan hosting dari Netlify di https://cara-hosting-vercel-dan-netlify.netlify.app/

Hummmm…. Panjang juga ya? gapapa lah ya hehe, baca nya disesuai kebutuhan aja. Jika ingin hosting dengan Netlify bagian Vercel bisa kamu lewati begitupun sebaliknya jika kamu ingin hosting dengan Vercel. Mungkin itu saja yang dapat saya bagikan, apabila ada saran dan kritik berikan di kolom komentar atau japri saya via Telegram Rian.

Terima kasih semua, semoga dapat bermanfaat :D