Deploy Pertama: Online-kan Aplikasimu Gratis

Aplikasi yang hanya bisa dibuka di laptopmu belum benar-benar jadi. Begitu aplikasinya online, kamu bisa membukanya dari HP, membagikan link-nya ke teman, dan orang lain bisa mencobanya. Proses memindahkan aplikasi dari laptop ke internet ini disebut deploy.

Di tutorial ini kamu akan men-deploy aplikasi pencatat pengeluaran dari tutorial aplikasi pertama dengan AI ke Cloudflare Pages, gratis. Ada dua cara:

1. Drag-and-drop: unggah folder lewat browser. Paling cepat, cocok untuk percobaan pertama.
2. Terhubung ke GitHub: setiap kali kamu menyimpan perubahan ke GitHub, situsnya diperbarui otomatis. Ini cara yang dipakai untuk jangka panjang, termasuk oleh situs yang sedang kamu baca.

Aplikasimu belum dari tutorial itu? Tidak masalah. Cara ini berlaku untuk situs statis apa pun: halaman HTML, portofolio, atau hasil build framework seperti Astro.

Apa itu deploy, dan kenapa Cloudflare Pages

Situs statis adalah situs yang isinya berupa file siap kirim: HTML, CSS, JavaScript, dan gambar. Aplikasi pencatat pengeluaran kita termasuk statis, karena semua logikanya berjalan di browser dan datanya disimpan di browser juga. Situs statis adalah yang paling mudah dan paling murah untuk di-deploy.

Ada banyak layanan untuk situs statis, misalnya Cloudflare Pages, Netlify, Vercel, dan GitHub Pages. Konsepnya sama di semua layanan. Kita memakai Cloudflare Pages karena:

• punya paket gratis yang cukup untuk proyek pribadi,
• otomatis memberi alamat nama-proyek.pages.dev lengkap dengan HTTPS,
• bisa dipakai dengan dua cara di atas, dan
• nanti mudah disambungkan ke domain sendiri.

Batas paket gratis dan nama menu di dashboard bisa berubah. Kalau ada yang berbeda dari tutorial ini, cek dokumentasi Cloudflare Pages.

Sebelum mulai: siapkan folder public

Buat struktur folder seperti ini:

pencatat-pengeluaran/
├── public/
│   └── index.html      ← file aplikasimu
└── (file lain proyekmu, kalau ada)

Kenapa harus di dalam folder public? Karena semua isi folder yang di-deploy bisa diunduh siapa saja. Dengan memisahkan file yang memang untuk publik, kamu tidak akan tanpa sengaja mengunggah catatan pribadi, file .env berisi kunci rahasia, atau file kerja lainnya. Soal kunci rahasia, kita bahas tuntas di artikel environment variable dan secrets.

Kamu juga butuh akun Cloudflare. Daftar gratis di dash.cloudflare.com.

Cara 1: Drag-and-drop (paling cepat)

1. Masuk ke dashboard Cloudflare, lalu buka menu Workers & Pages.
2. Klik Create, pilih Pages, lalu pilih opsi untuk mengunggah file (biasanya berlabel Upload assets atau Drag and drop your files).
3. Isi nama proyek, misalnya catatanku. Nama ini menjadi alamatmu: catatanku.pages.dev. Kalau sudah dipakai orang lain, Cloudflare akan menyarankan variasi lain.
4. Seret folder public ke kotak unggahan (bisa juga file .zip berisi folder itu).
5. Klik Deploy. Tunggu beberapa detik sampai muncul link situsmu.

Buka link-nya, lalu coba di HP. Aplikasimu sudah online. 🎉

Memperbarui situs: setelah mengubah index.html, buka proyekmu di dashboard, buat deployment baru, dan unggah lagi folder public.

Yang perlu diketahui tentang cara ini:

• Batasnya 1.000 file per unggahan, lebih dari cukup untuk aplikasi kecil.
• Proyek yang dibuat lewat unggahan tidak bisa diubah menjadi proyek yang terhubung ke GitHub. Kalau nanti ingin pindah ke cara 2, kamu membuat proyek baru.
• Setiap pembaruan harus diunggah manual. Lama-lama ini merepotkan, dan mudah lupa versi mana yang sedang online.

Cara 2: Terhubung ke GitHub (untuk jangka panjang)

Dengan cara ini, Cloudflare memantau repository GitHub-mu. Setiap kali kamu mengirim (push) perubahan ke GitHub, Cloudflare otomatis men-deploy versi terbaru. Belum punya repository? Ikuti dulu Git dan GitHub untuk kerja tim. Lima belas menit cukup.

1. Pastikan proyekmu sudah ada di GitHub, lengkap dengan folder public/index.html.
2. Di dashboard Cloudflare: Workers & Pages → Create → Pages → pilih opsi menghubungkan ke Git (Connect to Git).
3. Izinkan Cloudflare mengakses akun GitHub-mu. Sebaiknya pilih akses hanya ke repository yang diperlukan, bukan semua repository.
4. Pilih repository proyekmu, lalu isi pengaturan build:

5. Klik Save and Deploy. Build pertama biasanya selesai dalam satu atau dua menit.

Mulai sekarang alurnya menjadi: ubah kode, commit, push, dan beberapa saat kemudian versi terbarunya sudah online. Kalau kamu bekerja di branch lain, Cloudflare juga membuat alamat pratinjau terpisah, sehingga perubahan bisa dicek dulu sebelum masuk ke versi utama.

Untuk proyek yang memakai framework (misalnya Astro, React, atau Next.js), pengaturannya sedikit berbeda: build command diisi perintah build-nya (misalnya npm run build) dan output directory diisi folder hasil build (misalnya dist). Cloudflare biasanya mengisinya otomatis saat kamu memilih framework preset.

Setelah online: uji lagi

Jangan anggap selesai hanya karena link-nya terbuka. Ulangi uji dari tutorial aplikasi pertama, kali ini di alamat online-nya:

• Tambah dan hapus catatan. Totalnya benar?
• Refresh halaman. Datanya masih ada?
• Buka dari HP. Tampilannya nyaman dipakai?
• Perhatikan ikon gembok di address bar. Situs .pages.dev otomatis memakai HTTPS.

Satu hal yang sering membingungkan: catatan yang kamu buat saat aplikasi dibuka dari file di laptop tidak ikut pindah. Data localStorage disimpan per alamat situs dan per browser. Alamat catatanku.pages.dev dianggap situs baru, jadi datanya mulai dari kosong. Begitu juga di HP: datanya terpisah dari laptop.

Aman sebelum dibagikan

Sebelum link-nya kamu sebar, pastikan:

• Tidak ada kunci rahasia di dalam folder yang di-deploy. Ingat, semua isinya bisa diunduh orang lain.
• Tidak ada data pribadi yang ikut tertulis di kode, misalnya data contoh berisi nama dan nomor HP orang sungguhan.
• Kalau memakai cara 2 dan repository-nya publik, seluruh kode dan riwayatnya bisa dibaca siapa saja.

Error yang sering muncul

Situs menampilkan halaman 404, padahal deploy berhasil. Cloudflare tidak menemukan index.html di akar situs. Biasanya karena yang diunggah adalah folder di atasnya (misalnya pencatat-pengeluaran, bukan public), atau output directory tidak diisi public. Pastikan index.html ada langsung di dalam folder yang di-deploy.

Build gagal di cara 2. Buka log build di dashboard dan cari baris merah pertama. Untuk situs tanpa framework, pastikan build command exit 0 dan output directory public. Untuk proyek dengan framework, coba jalankan perintah build yang sama di laptopmu. Kalau di laptop gagal, di Cloudflare juga akan gagal.

Perubahan tidak muncul setelah push. Cek di dashboard apakah deployment terbaru sudah selesai. Kalau sudah, coba refresh paksa dengan Ctrl + Shift + R, karena browser kadang masih menyimpan versi lama.

Nama proyek tidak tersedia. Nama .pages.dev harus unik di seluruh Cloudflare. Tambahkan kata lain, misalnya catatanku-afa. Nanti, setelah memasang domain sendiri, nama ini tidak terlalu penting lagi.

Pertanyaan yang sering diajukan

Apakah benar-benar gratis?

Paket gratis Cloudflare Pages cukup untuk proyek pribadi dan situs kecil. Batasnya (misalnya jumlah build per bulan) bisa berubah, jadi cek halaman harga resminya. Untuk aplikasi statis seperti contoh di sini, kamu tidak perlu memasukkan kartu kredit.

Bisakah memakai alamat sendiri, misalnya catatanku.id?

Bisa. Kamu perlu membeli domain lalu menyambungkannya ke proyek Pages. Caranya kita bahas di Domain, DNS, dan HTTPS untuk pemula.

Bagaimana dengan aplikasi yang punya database atau login?

Aplikasi seperti itu tidak lagi sepenuhnya statis: ada bagian yang harus berjalan di server. Cloudflare dan layanan lain punya solusinya, tetapi itu topik level berikutnya di jalur ini. Untuk sekarang, kuasai dulu deploy situs statis.

Kenapa tidak pakai hosting biasa (cPanel)?

Hosting biasa tetap bisa dipakai: unggah file lewat File Manager atau FTP. Bedanya, layanan seperti Cloudflare Pages memberi HTTPS otomatis, alamat pratinjau, dan deploy otomatis dari GitHub tanpa perlu mengurus server. Untuk situs statis, pengalaman ini jauh lebih nyaman.

Kesimpulan

Deploy adalah langkah yang mengubah “jalan di laptop” menjadi “bisa dipakai orang”. Untuk percobaan pertama, drag-and-drop folder public sudah cukup. Untuk proyek yang akan terus berkembang, sambungkan ke GitHub supaya setiap perubahan otomatis online.

Langkah berikutnya di jalur Deploy & Production: memasang domain sendiri lengkap dengan HTTPS, dan memastikan kunci rahasia tidak pernah ikut ter-deploy.