Web Development

Cara Hosting Website Pertamamu Gratis dan Mudah

Ditulis 19 September 2020

Bagikan di

Memiliki website bukanlah sesuatu yang sulit lagi saat ini. Setiap orang bisa memiliki websitenya masing-masing. Apalagi dengan beberapa platform yang menyediakan hosting gratis tanpa dipungut biaya sepeserpun, bahkan kita diberikan domain yang dapat digunakan untuk mengakses website tersebut.

Gambaran website

Ingin tahu bagaimana caranya?

Static Website

Sebelum kita masuk ke bagian panduan, kamu perlu mengetahui mengenai static website atau website statis. Kebanyakan hosting gratis hanya menyediakan hosting untuk website tipe ini. Jadi, apa itu static website?

Static website adalah website yang memiliki konten yang tidak berubah atau tetap. Contoh website yang menggunakan jenis ini adalah website resume atau CV. Data yang ditampilkan pada website ini tidak diambil melalui database, melainkan di-hardcode atau sudah ditulis pada suatu file sebelum diunggah ke hosting.

Tapi jangan khawatir, static website pun bisa menjadi dynamic jika kamu menggunakan API (Application Programming Interface) untuk mengambil data dari suatu database atau tempat lain. Namun, di panduan ini hanya akan mengajarkan cara membuat website statis tanpa data dinamis.

Menggunakan Vercel sebagai Hosting

Vercel adalah salah satu penyedia layanan hosting gratis yang akan kita gunakan. Berikut ini adalah langkah-langkah untuk mendaftarkan diri di hosting ini.

Daftarkan Diri

Pertama, kamu harus mendaftarkan diri dulu di vercel.com. Untuk dapat mendaftarkan diri kamu harus memiliki akun GitHub, GitLab, atau BitBucket.
Download Aplikasi CLI Vercel

Setelah mendaftarkan diri, download aplikasi CLI Vercel melalui npm. Jika kamu belum melakukan instalasi npm, ada baiknya untuk mengikuti panduan instalasi npm terlebih dahulu. Jalankan perintah berikut ini untuk mengunduh aplikasi CLI Vercel ke komputermu,
```
 npm i -g vercel
```
Setelah instalasi selesai, coba jalankan perintah npx vercel -v untuk mengetahui apakah instalasi sukses atau tidak. Jika tidak keluar tulisan mirip seperti di bawah ini, kemungkinan instalasimu gagal dan harus diulang.
```
 $ npx vercel -v
 Vercel CLI 20.1.0
 20.1.0
```

Login Melalui Aplikasi CLI Vercel

Selanjutnya, login ke Vercel menggunakan aplikasi CLI tersebut. Caranya mudah dengan menggunakan perintah npx vercel. Kamu akan disuruh memasukan email yang kamu daftarkan sebelumnya, selanjutkan email konfirmasi akan dikirimkan dan kamu perlu untuk menekan tombol ‘Verify’ di email kamu. Tulisan yang akan keluar kurang lebih seperti ini.

 Vercel CLI 20.1.0
 > No existing credentials found. Please log in:
 We sent an email to xxxxxxxx@gmail.com. Please follow the steps provided inside it and make sure the security code matches Aaaaaaa Bbbbbbb.
 ✔ Email confirmed
 Congratulations! You are now logged in. In order to deploy something, run `vercel`.
 💡  Connect your Git Repositories to deploy every branch push automatically (https://vercel.link/git).

Selamat! Kamu sudah berhasil menggunakan Vercel CLI. Sekarang, saatnya membuat website dan meletakkannya di Vercel sehingga semua orang bisa mengaksesnya. Cukup melakukan dua langkah sederhana berikut ini.

Buat Website Super Sederhana

Buat sebuah folder baru, dan isi folder tersebut dengan sebuah file HTML bernama index.html yang isinya bebas, tapi jika kamu bingung bisa gunakan contoh berikut ini.
```
 <html>
   <head>
     <title>Website Pertama</title>
   </head>
   <body>
     Apa Kabar Dunia?
   </body>
 </html>
```

Unggah Website Kamu ke Vercel

Kemudian jalan kan perintah berikut ini di folder yang berisi index.html tersebut.

 npx vercel

Kamu akan ditanya mengenai beberapa hal, kamu boleh tekan enter sampai beres tanpa mengubah apapun. Berikut kira-kira tulisan yang akan keluar.

 $ npx vercel
 Vercel CLI 20.1.0
 ? Set up and deploy “/.../test”? [Y/n]
 y
 ? Which scope do you want to deploy to? xxxxxxx
 ? Link to existing project? [y/N] n
 ? What’s your project’s name? test
 ? In which directory is your code located? ./
 No framework detected. Default Project Settings:
 - Build Command: `npm run vercel-build` or `npm run build`
 - Output Directory: `public` if it exists, or `.`
 - Development Command: None
 ? Want to override the settings? [y/N] n
 🔗  Linked to xxxxxxx/test (created .vercel and added it to .gitignore)
 🔍  Inspect: https://vercel.com/xxxxxxx/test/cd7doppru [2s]
 p✅  Production: https://test-alpha-tan.vercel.app [copied to clipboard] [9s]
 📝  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
 💡  To change the domain or build command, go to https://vercel.com/xxxxxxx/test/settings

Yak, kamu berhasil membuat website yang dapat diakses melalui internet! Sekarang coba buka link yang muncul di tulisan diatas tepatnya dibagian, Production:. Coba buka melalui browser dan kamu akan melihat bahwa website kamu berhasil dibuat.

Website kamu berhasil diunggah ke Vercel

Vercel memiliki dukungan untuk berbagai jenis frontend framework seperti React, NextJS, Angular, dan Vue. Sehingga kamu bisa menggunakan frontend framework pilihan kamu jika dibutuhkan.

Menggunakan Netlify sebagai Hosting

Bagi kamu yang masih kebingungan dengan CLI dan segala bentuk alat di atas. Tidak masalah! Terdapat hosting gratis lain yang memberikan kenyamanan user interface yang memudahkan pengguna. Netlify adalah salah satu hosting lain yang menyediakan layanan yang mirip dengan Vercel dan tentunya juga gratis.

Berikut adalah langkah-langkah singkat yang perlu kamu lakukan.

Daftarkan Diri

Untuk menggunakan Netlify kamu tentunya harus mendaftarkan diri dulu melalui netlify.com. Kamu bisa menggunakan email kamu untuk mendaftarkan diri.
Buat Website Super Sederhana

Sama seperti langkah di bagian sebelumnya, kamu harus memiliki website untuk diunggah ke hosting. Website sederhana sekalipun tidak masalah. Berikut cara membuat website super sederhana yang bisa kamu lakukan. Pertama, buat sebuah folder baru. Isi folder tersebut dengan sebuah file HTML bernama index.html yang isinya bebas, tapi jika kamu bingung bisa gunakan contoh berikut ini.
```
 <html>
   <head>
     <title>Website Pertama</title>
   </head>
   <body>
     Apa Kabar Dunia?
   </body>
 </html>
```
Unggah Website Kamu ke Netlify

Sekarang, saatnya mengunggah website kamu ke Netlify. Buka app.netlify.com di browser kamu. Kamu akan langsung disuguhkan dengan box untuk mengunggah website kamu seperti ini.

Drag and drop folder yang berisi website kamu ke box tersebut. Secara otomatis Netlify akan membuatkan domain dan membuat website kamu bisa diakses dari internet.

Kamu bisa mengakses kamu dari link yang muncul di dashboard kamu di Netlify.

Selamat! Kamu berhasil membuat website yang bisa diakses oleh banyak orang.

Mungkin kamu sudah sadar bahwa domain yang diberikan tidak dapat dengan mudah diubah. Hal ini merupakan salah satu kelemahan dari hosting gratis ini. Kamu tetap membutuhkan domain kamu sendiri dan biasanya harus membelinya dari tempat lain.

Namun, biasanya menggunakan hosting ini saja sudah cukup untuk banyak hal. Termasuk blog ini, berada di hosting Vercel dan dapat berjalan dengan baik.

Bagikan di

Kolom Diskusi

Sedang memuat...