Mendeploy static site menjadi sangat mudah dan cepat berkat platform hosting modern seperti Netlify dan Vercel. Keduanya menawarkan alur kerja yang sangat efisien, terintegrasi dengan Git, dan dilengkapi dengan CDN global, SSL otomatis, serta fitur serverless functions yang canggih. Jika Anda membangun situs menggunakan Static Site Generator (SSG) seperti Next.js (mode SSG), Gatsby, Hugo, Astro, Jekyll, atau bahkan HTML/CSS/JavaScript biasa, Netlify dan Vercel adalah pilihan yang sangat populer.

Baca Juga : Perbandingan GitLab vs GitHub vs Bitbucket

Mari kita bahas cara deploy ke kedua platform ini.

Persiapan Awal

Sebelum Anda memulai, pastikan Anda memiliki:

1. Proyek Static Site: Pastikan situs statis Anda sudah siap dan berada dalam sebuah repository Git (misalnya di GitHub, GitLab, atau Bitbucket).

2. Akun Netlify/Vercel: Daftar akun gratis di Netlify.com atau Vercel.com. Anda bisa login menggunakan akun GitHub/GitLab/Bitbucket Anda, yang akan mempermudah integrasi.

Deploy ke Netlify

Netlify terkenal dengan kesederhanaan dan fitur-fitur yang kuat untuk Jamstack.

Langkah 1: Hubungkan Repositori Git Anda

1. Login ke akun Netlify Anda.

2. Di dashboard, klik tombol "Add new site" atau "New site from Git".

3. Pilih "Import an existing project".

4. Pilih penyedia Git Anda (GitHub, GitLab, atau Bitbucket). Anda mungkin perlu memberikan otorisasi kepada Netlify untuk mengakses repositori Anda.

5. Pilih repository yang berisi static site Anda.

Langkah 2: Konfigurasi Pengaturan Build

Setelah memilih repositori, Netlify akan mencoba mendeteksi pengaturan build Anda secara otomatis. Jika tidak, Anda perlu mengkonfigurasinya secara manual:

• Branch to deploy: Pilih branch Git yang ingin Anda deploy (biasanya main atau master).

• Build command: Perintah yang akan dijalankan Netlify untuk membangun situs Anda.

  • Contoh: npm run build (untuk Next.js, Gatsby, Astro) atau hugo (untuk Hugo) atau jekyll build (untuk Jekyll).

  • Jika situs Anda hanya HTML/CSS/JS statis murni tanpa proses build (misalnya, hanya folder statis), Anda bisa biarkan kosong.

• Publish directory: Folder tempat file hasil build Anda akan berada.

  • Contoh: out (untuk Next.js SSG), public (untuk Gatsby, Hugo), dist (untuk Astro, Vite).

Langkah 3: Deploy Situs Anda

1. Setelah mengkonfigurasi pengaturan build, klik tombol "Deploy site".

2. Netlify akan mulai menjalankan proses build. Anda bisa melihat log build secara real-time di dashboard.

3. Setelah build selesai, situs Anda akan hidup di URL Netlify sementara (misalnya https://namarandom-12345.netlify.app).

Langkah 4: Tambahkan Custom Domain (Opsional)

1. Di dashboard situs Anda di Netlify, pergi ke "Domain management".

2. Klik "Add a custom domain".

3. Masukkan nama domain Anda dan ikuti instruksi Netlify untuk mengkonfigurasi DNS (biasanya dengan menambahkan catatan CNAME atau NS di penyedia domain Anda).

Fitur Penting Netlify Lainnya:

• Netlify Functions: Fungsionalitas serverless (AWS Lambda di bawah hood) yang dapat Anda gunakan untuk backend ringan.

• Forms: Kemampuan bawaan untuk menangani pengiriman formulir tanpa perlu backend kustom.

• Branch Deploys: Setiap push ke branch selain main dapat membuat deploy preview unik.

• Rollbacks: Mudah kembali ke versi deploy sebelumnya jika ada masalah.

Deploy ke Vercel

Vercel (sebelumnya ZEIT Now) adalah platform yang dioptimalkan untuk Next.js, tetapi juga mendukung static site dan serverless functions dengan sangat baik.

Langkah 1: Hubungkan Repositori Git Anda

1. Login ke akun Vercel Anda.

2. Di dashboard, klik "Add New..." atau tombol "New Project".

3. Pilih penyedia Git Anda (GitHub, GitLab, atau Bitbucket). Anda mungkin perlu memberikan otorisasi kepada Vercel untuk mengakses repositori Anda.

4. Pilih repository yang ingin Anda deploy.

Langkah 2: Konfigurasi Pengaturan Proyek

Vercel akan mencoba mendeteksi framework dan pengaturan build Anda secara otomatis. Anda dapat menyesuaikannya di bagian "Configure Project":

• Framework Preset: Vercel akan menyarankan framework (misalnya Next.js, Create React App, Hugo, Gatsby, SvelteKit). Pilih yang sesuai. Jika tidak ada, pilih "Other".

• Root Directory: Jika kode Anda berada di dalam folder di dalam repositori (misalnya my-project/website), tentukan folder tersebut di sini.

• Build Command: Perintah untuk membangun situs Anda (misalnya npm run build). Vercel akan mengisinya secara otomatis jika mendeteksi framework Anda. Jika situs Anda hanya statis, ini bisa kosong.

• Output Directory: Folder tempat file hasil build Anda berada (misalnya out, public, dist, .next). Vercel juga akan mengisinya secara otomatis.

Langkah 3: Deploy Situs Anda

1. Setelah mengkonfigurasi, klik tombol "Deploy".

2. Vercel akan mulai membangun proyek Anda. Anda akan melihat log build secara real-time.

3. Setelah deploy selesai, situs Anda akan aktif di URL Vercel (misalnya https://nama-proyek-random.vercel.app).

Langkah 4: Tambahkan Custom Domain (Opsional)

1. Di dashboard proyek Anda di Vercel, pergi ke tab "Settings", lalu pilih "Domains".

2. Masukkan nama domain Anda dan klik "Add".

3. Ikuti instruksi Vercel untuk mengkonfigurasi DNS (biasanya dengan menambahkan catatan A atau CNAME di penyedia domain Anda).

Fitur Penting Vercel Lainnya:

• Serverless Functions (API Routes): Integrasi mendalam dengan serverless functions (terutama untuk Next.js API Routes), memungkinkan Anda membuat backend API tanpa mengelola server.

• Preview Deployments: Setiap push ke branch selain main akan otomatis membuat preview deployment dengan URL unik. Ini bagus untuk review tim.

• Automatic SSL: Sertifikat SSL/TLS otomatis untuk semua domain.

• Edge Functions: Jalankan kode server-side di edge (dekat dengan pengguna) untuk respons yang lebih cepat.

Baca Juga : Github Copilot, Apakah Menggantikan Programmer di Masa Depan?

Perbandingan Singkat Netlify vs. Vercel

Fitur / Kriteria	Netlify	Vercel
Fokus Utama	Jamstack, SSG, serverless functions umum	Next.js, SSG, serverless functions (Edge)
Integrasi Git	GitHub, GitLab, Bitbucket	GitHub, GitLab, Bitbucket
Kecepatan Deploy	Sangat cepat	Sangat cepat
Build Settings	Deteksi otomatis & konfigurasi manual	Deteksi otomatis & konfigurasi manual
Custom Domains	Mudah dikonfigurasi, SSL otomatis	Mudah dikonfigurasi, SSL otomatis
Serverless Functions	Netlify Functions (AWS Lambda)	Vercel Functions (Edge & Node.js Lambda)
Preview Deployments	Ya, untuk setiap branch	Ya, untuk setiap branch / pull request
Fitur Lain	Netlify Forms, Identity, Analytics	Vercel Analytics, Image Optimization
Rekomendasi	Serbaguna untuk semua jenis SSG, blog, situs marketing, formulir.	Sangat optimal untuk proyek Next.js, aplikasi full-stack ringan.

Baik Netlify maupun Vercel adalah pilihan yang sangat baik untuk mendeploy static site. Keduanya menawarkan pengalaman developer yang luar biasa, performa tinggi berkat CDN, dan keamanan yang kuat.

• Jika Anda menggunakan Next.js dan ingin memaksimalkan semua fitur yang ditawarkannya (termasuk SSR dan Edge Functions), Vercel seringkali menjadi pilihan yang paling alami karena dikembangkan oleh tim di balik Next.js.

• Jika Anda menggunakan SSG lain (Gatsby, Hugo, Astro, Jekyll) atau hanya HTML/CSS/JS murni, dan mencari platform yang sangat fleksibel dengan fitur-fitur seperti built-in forms dan autentikasi, Netlify adalah pilihan yang sangat tangguh.

Pada akhirnya, Anda tidak akan salah memilih salah satu dari mereka. Keduanya akan memberikan situs statis Anda kinerja dan stabilitas yang luar biasa di seluruh dunia.