Buat landing page gratis tanpa Lovable atau Bolt pakai Gemini CLI

Lovable, Bolt, dan v0 memang keren. Kamu tinggal ketik apa yang mau dibuat, lalu mereka generate kode-nya. Tapi begitu limit kredit habis, kamu harus menunggu kredit di-reset atau bayar. Dan harganya tidak murah untuk yang ingin coba-coba.

Ada cara lain yang sepenuhnya gratis dan hasilnya sama bagus. Namanya Gemini CLI - tool open source dari Google yang berjalan langsung di terminal laptop kamu.

Apa itu Lovable, Bolt, dan v0

Ketiganya adalah platform vibe coding berbasis web. Kamu menjelaskan aplikasi yang mau dibuat, lalu AI akan generate kode lengkap yang bisa langsung jalan.

Lovable fokus ke pembuatan aplikasi web full-stack. Kamu bisa bikin landing page, dashboard, bahkan aplikasi dengan database. Hasilnya langsung bisa di-deploy ke domain lovable.app.

Bolt.new punya pendekatan serupa. Kamu ketik prompt, Bolt generate project lengkap dengan frontend dan backend. Preview langsung muncul di browser tanpa perlu setup apa-apa.

v0 dari Vercel lebih fokus ke komponen frontend. Cocok untuk generate UI component, form, dan layout. Tapi tidak include backend atau database seperti Lovable dan Bolt.

Masalahnya: kredit terbatas dan harga yang tidak murah untuk kebanyakan orang, apalagi untuk yang baru belajar coding.

Ketiga platform ini punya free tier, tapi sangat terbatas.

Platform	Free Tier	Harga Berbayar
Lovable	5 kredit/hari (maks 30/bulan)	$25/bulan (Pro)
Bolt.new	1 juta token/bulan, cap 300K/hari	$20/bulan (Pro)
v0	$5 kredit/bulan (~200 kredit)	$20/bulan (Premium)

Lima kredit per hari di Lovable artinya kamu cuma bisa kirim 5 pesan perintah ke AI. Kalau kamu mau buat landing page, itu butuh banyak iterasi dengan feedback dari AI. Setiap revisi itu butuh prompt baru ke AI. Untuk satu landing page sederhana, kamu butuh minimal 10-15 kali revisi. Kredit habis dalam hitungan menit kalau project-nya agak kompleks.

Bolt sedikit lebih dermawan, tapi 300K token per hari tetap bisa habis cepat kalau kamu sedang iterasi desain. Dan kredit yang tidak terpakai di Lovable tidak bisa dibawa ke hari berikutnya.

Masalah lain - semua kode tersimpan di server mereka. Kalau kamu berhenti bayar, akses ke project bisa terbatas.

Alternatifnya: Gemini CLI di lokal

Gemini CLI adalah tool open source dari Google yang berjalan di terminal kamu. Bukan di browser, bukan di cloud - langsung di laptop. Kamu punya kontrol penuh atas semua file yang dihasilkan.

Tool ini menggunakan model Gemini 2.5 Pro (atau Gemini 3 Pro untuk akun tertentu) yang punya context window 1 juta token. Artinya AI bisa memahami seluruh project kamu sekaligus, bukan cuma potongan kecil.

Kenapa Gemini CLI lebih menarik

Gratis dengan limit besar. Kamu dapat 60 request per menit dan 1.000 request per hari hanya dengan login Google account biasa. Bandingkan dengan 5 kredit per hari di Lovable.

Semua file di laptop kamu. Tidak ada vendor lock-in. Kode yang dihasilkan langsung tersimpan di folder project kamu. Mau pindah hosting, edit manual, atau pakai tool lain - bebas.

Open source. Kode Gemini CLI tersedia di GitHub dengan lisensi Apache 2.0. Kamu bisa inspect cara kerjanya dan bahkan kontribusi.

Context window 1 juta token. Gemini bisa membaca dan memahami ratusan file sekaligus. Ini jauh lebih besar dari kebanyakan AI coding tool.

Support MCP server. Gemini CLI bisa terhubung ke Model Context Protocol server untuk kemampuan tambahan seperti akses database, API, atau tool eksternal lainnya.

Berapa limitnya

Fitur	Detail
Request per menit	60
Request per hari	1.000
Model	Gemini 2.5 Pro / Gemini 3 Pro
Context window	1.000.000 token
Harga	Gratis (akun Google biasa)
Kode	Open source (Apache 2.0)

Kalau kamu butuh limit lebih tinggi, bisa upgrade ke Google AI Pro atau Ultra. Tapi untuk membuat landing page, 1.000 request per hari sudah sangat lebih dari cukup.

Cara install Gemini CLI

Gemini CLI butuh Node.js versi 18 atau lebih baru. Kalau belum punya Node.js, install dulu sebelum lanjut.

macOS

Buka Terminal dengan cara klik tombol Command + Space, ketik Terminal, lalu tekan Enter atau klik ikon terminal, lalu jalankan:

# Install Node.js via Homebrew (skip kalau sudah punya)
brew install node

# Install Gemini CLI secara global
npm install -g @google/gemini-cli

# Jalankan Gemini CLI
gemini

Windows

Buka Command Prompt atau PowerShell dengan cara klik tombol Windows + R, ketik cmd, lalu tekan Enter:

# Install Node.js dari https://nodejs.org (download LTS version)
# Setelah install Node.js, buka terminal baru

# Install Gemini CLI secara global
npm install -g @google/gemini-cli

# Jalankan Gemini CLI
gemini

Untuk Windows, kamu juga bisa pakai winget:

winget install OpenJS.NodeJS.LTS
npm install -g @google/gemini-cli
gemini

Linux (Ubuntu/Debian)

Buka terminal lalu klik tombol Ctrl + Alt + T

# Install Node.js via NodeSource
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

# Install Gemini CLI secara global
npm install -g @google/gemini-cli

# Jalankan Gemini CLI
gemini

Tanpa install (langsung pakai)

Kalau tidak mau install global, kamu bisa langsung jalankan dengan npx:

npx @google/gemini-cli

Setup pertama kali

Saat pertama kali dijalankan, Gemini CLI akan meminta kamu untuk:

1. Pilih tema warna - light atau dark
2. Login Google account - browser akan terbuka otomatis untuk autorisasi
3. Selesai - kamu langsung bisa mulai pakai

Tidak perlu API key, tidak perlu kartu kredit. Cukup akun Google biasa.

Bebas pilih tech stack apapun

Ini perbedaan besar yang sering tidak disadari orang. Di Lovable, project kamu otomatis pakai React + Vite + Tailwind. Tidak ada pilihan lain. Bolt juga serupa - stack sudah ditentukan oleh platform.

Dengan Gemini CLI, kamu bebas pakai tech stack apapun:

• Astro + Tailwind - ringan, cepat, cocok untuk landing page dan blog
• Next.js - kalau butuh SSR dan fitur React yang lengkap
• Vue + Nuxt - buat kamu yang lebih nyaman dengan Vue
• Svelte + SvelteKit - minimalis dan performa tinggi
• HTML + CSS biasa - simpel tanpa framework

Kamu yang tentukan, bukan platform. Ini penting karena setiap project punya kebutuhan berbeda. Landing page sederhana tidak perlu React. Blog statis lebih cocok pakai Astro. Gemini CLI mengikuti kemauan kamu, bukan sebaliknya.

Contoh penggunaan: landing page produk herbal

Sekarang bagian yang paling ditunggu. Di contoh ini kita pakai Astro + TailwindCSS - stack yang ringan, cepat, dan sangat cocok untuk landing page.

Di UI terminal yang baru di komputer kamu, buat folder baru, lalu masuk ke folder tersebut:

mkdir landing-herbal && cd landing-herbal

lalu jalankan Gemini CLI dan tunggu hingga gemini prompt muncul:

gemini

Setelah Gemini CLI terbuka, copy-paste prompt berikut:

Buatkan landing page modern untuk menjual produk herbal "HerbalFit"
menggunakan Astro dan TailwindCSS.

Setup:
- Inisialisasi project Astro baru dengan perintah yang sesuai
- Install dan konfigurasi TailwindCSS v4 menggunakan @tailwindcss/vite
- Gunakan font Inter dari Google Fonts

Struktur halaman (buat sebagai src/pages/index.astro):
- Hero section dengan headline yang menjual, sub-headline, dan tombol CTA
  "Pesan Sekarang" yang link ke WhatsApp (wa.me/6281234567890)
- Section keunggulan produk dengan 4 kartu (icon emoji + judul + deskripsi):
  100% bahan alami, BPOM terdaftar, tanpa efek samping, hasil dalam 14 hari
- Section testimoni dari 3 pelanggan dengan nama dan kutipan testimoni
- Section harga dengan 3 paket: Starter (1 botol Rp 150.000), Best Value
  (3 botol Rp 399.000), dan Family Pack (5 botol Rp 599.000). Setiap paket
  punya tombol CTA ke WhatsApp
- FAQ section dengan 4 pertanyaan umum menggunakan elemen details/summary
- Footer dengan disclaimer kesehatan dan link media sosial

Desain:
- Warna hijau daun sebagai primary (#22c55e), putih, dan dark gray
- Responsive mobile-first
- Tambahkan animasi scroll reveal sederhana pakai Intersection Observer
- Tambahkan floating WhatsApp button di kanan bawah
- Semua teks dalam Bahasa Indonesia

Buat komponen terpisah di src/components/ untuk: Hero, Features, Testimonials,
Pricing, FAQ, Footer, dan WhatsAppButton.

Gemini CLI akan membuat seluruh project Astro lengkap - dari konfigurasi sampai komponen. Setelah selesai, install dependencies dan jalankan dev server:

npm install
npm run dev

Astro akan berjalan di http://localhost:4321. Buka alamat ini di browser dan landing page kamu langsung muncul.

Kamu bisa terus minta revisi langsung di Gemini CLI. Misalnya:

• “Ganti warna primary jadi biru tua”
• “Tambahkan section FAQ di atas footer”
• “Buat animasi hero section lebih smooth”
• “Pisahkan Pricing jadi komponen sendiri”

Setiap revisi langsung mengubah file di laptop kamu. Tidak perlu khawatir tentang limitasi kredit atau request. Karena kamu pakai Gemini CLI di laptop sendiri - kamu masih punya ratusan request tersisa hari itu, atau jika benar-benar habis kamu bisa ganti akun google lain dengan cara /logout di CLI. lalu /login lagi menggunakan akun google lain.

Agar gemini tetap bisa melanjutkan revisi tanpa harus mulai dari awal, kamu bisa gunakan command /resume di CLI.

Edit manual pakai VS Code

Salah satu kelebihan Gemini CLI dibanding Lovable atau Bolt - kamu bisa buka project di code editor kapan saja. Tidak perlu tergantung sepenuhnya pada AI untuk setiap perubahan kecil.

Buka folder project di VS Code (install dulu jika belum ada VS Code:

code .

Karena kita pakai Astro, dev server sudah punya hot reload bawaan. Selama npm run dev masih jalan di terminal, setiap kali kamu save file di VS Code, browser otomatis refresh dan menampilkan perubahan terbaru. Tidak perlu extension tambahan untuk live reload.

Mau ganti teks headline? Buka src/components/Hero.astro, edit, save - langsung berubah di browser. Mau ubah warna? Edit class Tailwind-nya. Semua real-time.

Extension VS Code yang berguna untuk project ini:

• Astro - syntax highlighting dan autocomplete untuk file .astro
• Tailwind CSS IntelliSense - autocomplete class Tailwind
• Prettier - format kode otomatis supaya rapi

Workflow yang paling efektif: pakai Gemini CLI untuk generate struktur awal dan perubahan besar, lalu fine-tune detail kecil langsung di VS Code. Gabungan AI dan editing manual ini jauh lebih fleksibel dibanding platform yang mengunci kamu di interface mereka dan stack yang sudah ditentukan.

Simpan project di GitHub

Project yang dibuat Gemini CLI hanya tersimpan di komputer kamu. Supaya tidak hilang dan bisa diakses dari mana saja, simpan ke GitHub.

Pastikan kamu sudah punya akun GitHub dan sudah install Git. Kalau belum, download Git dari git-scm.com.

Inisialisasi repository

Jalankan perintah ini di folder project kamu:

git init
git add .
git commit -m "Initial landing page"

Buat repository di GitHub

Cara termudah adalah pakai GitHub CLI. Install dulu kalau belum punya:

# macOS
brew install gh

# Windows
winget install GitHub.cli

# Linux (Debian/Ubuntu)
sudo apt install gh

Login ke GitHub dan buat repository baru:

gh auth login
gh repo create landing-herbal --public --source=. --push

Selesai. Project kamu sekarang ada di GitHub. Setiap kali ada perubahan, tinggal commit dan push:

git add .
git commit -m "Tambah section FAQ"
git push

Deploy gratis dari GitHub

Kalau project kamu sudah di GitHub, kamu bisa deploy landingpage kamu secara gartis dan tidak perlu membayar hosting. Dua pilihan terbaik:

• Cloudflare Pages - bandwidth unlimited, CDN global 300+ lokasi, preview deployment per pull request. Pilihan terbaik kalau kamu ekspektasi traffic tinggi.
• GitHub Pages - setup paling simpel, langsung dari repository. Cocok untuk project kecil dan portfolio.

Kedua panduan di atas menjelaskan step-by-step deploy lengkap dengan cara setup custom domain dan SSL gratis.

Kapan tetap pakai Lovable atau Bolt

Gemini CLI bukan pengganti total untuk semua use case. Lovable dan Bolt tetap lebih cocok kalau kamu butuh:

• Deploy instan - Lovable dan Bolt bisa deploy ke subdomain mereka dalam satu klik
• Backend dan database terintegrasi - Lovable punya koneksi langsung ke Supabase
• Kolaborasi tim real-time - Interface web mereka mendukung multiple user
• Preview visual langsung - Kamu bisa lihat hasil di browser tanpa setup server lokal

Tapi kalau tujuan kamu adalah membuat landing page statis, portfolio, atau prototype tanpa keluar uang alias gratis - Gemini CLI itu pilihan yang tepat.

Setelah landing page jadi, tinggal deploy gratis ke Cloudflare Pages atau GitHub Pages - agar website kamu bisa diakses dari orang lain dari mana saja.