Cara Host Website Statis Gratis di 2026: GitHub Pages, Cloudflare Pages & Form Kontak

Memilih platform hosting website statis yang tepat bisa menghemat ratusan dolar per tahun sekaligus menjaga situsmu tetap cepat, aman, dan mudah dikelola. Di 2026, opsi paket gratis sudah jauh lebih matang, dan platform seperti GitHub Pages serta Cloudflare Pages menawarkan infrastruktur siap produksi tanpa biaya sama sekali. Tapi ada satu tantangan yang sering dilewatkan tutorial: bagaimana cara menangani formulir kontak di situs statis ketika tidak ada server yang memproses data? Panduan ini memandu kamu dari awal hingga akhir - mulai dari memilih platform hingga memasang formulir kontak yang berfungsi penuh, lengkap dengan contoh nyata dan batasan yang perlu kamu pahami sebelum memutuskan platform mana yang akan dipakai.

Mengapa Hosting Statis Gratis Layak Dipertimbangkan

Website statis menyajikan file HTML, CSS, dan JavaScript yang sudah dibuat sebelumnya langsung ke browser. Tidak ada PHP, tidak ada runtime Node.js, dan tidak ada query database di setiap pemuatan halaman. Kesederhanaan itulah yang membuat hosting halaman statis gratis begitu andal: tidak ada yang bisa crash, perlu di-patch, atau perlu di-scale.

Untuk bisnis kecil, portofolio, landing page SaaS, dan situs dokumentasi, hosting statis memenuhi semua kebutuhan:

• Kecepatan: File disajikan dari edge node CDN, seringkali dalam waktu kurang dari 100ms secara global.
• Keamanan: Tidak ada runtime sisi server berarti attack surface yang jauh lebih kecil.
• Biaya: Baik GitHub Pages maupun Cloudflare Pages gratis untuk proyek publik dan banyak proyek privat.
• Kemudahan: Push kode ke repositori, dan situs ter-deploy secara otomatis.

Satu-satunya keterbatasan nyata adalah fungsionalitas dinamis. Apa pun yang memerlukan logika sisi server - seperti autentikasi pengguna, keranjang belanja, atau pemrosesan formulir - membutuhkan layanan eksternal. Ingat hal ini saat kita menelusuri langkah-langkah pengaturannya.

Perbandingan Platform: GitHub Pages vs Cloudflare Pages

Kesimpulan singkat: Jika audiensmu bersifat global dan kamu menginginkan waktu muat tercepat, Cloudflare Pages adalah pilihan terbaik. Jika timmu sudah sepenuhnya menggunakan GitHub dan kamu ingin pengaturan sesimpel mungkin, GitHub Pages sudah lebih dari cukup.

Langkah demi Langkah: Deploy di GitHub Pages

Contoh ini mengasumsikan kamu sudah memiliki situs HTML/CSS sederhana yang siap dipublikasikan. Jika kamu menggunakan static site generator seperti Hugo atau Jekyll, prosesnya hampir sama persis.

1. Buat repositori GitHub. Buka github.com/new dan buat repositori publik. Beri nama your-username.github.io jika kamu ingin situs tersaji di domain utama, atau nama apa saja jika kamu ingin di jalur subdirektori.
2. Push file situsmu. Dari folder proyek lokalmu, jalankan:
   Salin

   git init
   git remote add origin https://github.com/your-username/your-repo.git
   git add .
   git commit -m "Initial deploy"
   git push -u origin main

3. Aktifkan GitHub Pages. Di repositori, buka Pengaturan > Pages. Di bawah "Sumber", pilih branch main dan folder /root (atau /docs jika output build-mu ada di sana). Klik Simpan.
4. Tunggu proses deployment. GitHub akan mem-build dan men-deploy dalam 1-3 menit. URL live (misalnya, https://your-username.github.io) akan muncul di panel pengaturan Pages.
5. Hubungkan domain kustom (opsional). Tambahkan file CNAME ke root repositorimu yang berisi nama domainmu (misalnya, www.situsmu.com). Kemudian perbarui penyedia DNS-mu untuk mengarahkan record CNAME ke your-username.github.io. GitHub akan menyediakan sertifikat SSL secara otomatis dalam beberapa menit.

Langkah demi Langkah: Deploy di Cloudflare Pages

1. Daftar atau masuk ke Cloudflare. Kunjungi pages.cloudflare.com dan hubungkan akun GitHub atau GitLab-mu.
2. Buat proyek baru. Klik "Buat proyek", lalu "Hubungkan ke Git". Pilih repositorimu dari daftar yang tersedia.
3. Konfigurasi pengaturan build. Jika situsmu berupa HTML biasa, kosongkan kolom perintah build dan atur direktori output ke / atau lokasi file index.html-mu berada. Untuk Hugo, atur perintah build ke hugo dan output ke public. Untuk Jekyll, gunakan jekyll build dan output ke _site.
4. Deploy. Klik "Simpan dan Deploy". Cloudflare akan mengkloning repositorimu, menjalankan build, dan mempublikasikannya ke jaringan edge global mereka. Situsmu langsung mendapatkan subdomain *.pages.dev.
5. Tambahkan domain kustom. Di dasbor proyekmu, buka "Domain kustom" dan masukkan domainmu. Jika domainmu sudah dikelola oleh Cloudflare DNS, pengaturannya cukup satu klik. Jika tidak, kamu perlu menambahkan record CNAME di registrar-mu yang mengarah ke alamat *.pages.dev-mu.

Setiap git push berikutnya ke branch utamamu akan memicu redeploy otomatis. Cloudflare juga membuat preview deployment untuk pull request, yang berguna untuk meninjau perubahan sebelum ditayangkan.

Menambahkan Formulir Kontak ke Situs Statismu

Di sinilah sebagian besar panduan berhenti, dan di sinilah kebanyakan orang mulai kebingungan. Formulir kontak di website statis tidak bisa mengirim data ke dirinya sendiri - tidak ada server yang mendengarkan. Ada tiga opsi yang realistis:

• Layanan backend formulir (direkomendasikan): Kamu mengarahkan atribut action formulirmu ke endpoint pihak ketiga yang menerima kiriman data, memvalidasinya, dan mengirimkannya ke emailmu.
• Fungsi serverless: Kamu menulis fungsi kecil (Cloudflare Workers, AWS Lambda) yang memproses formulir. Cara ini berhasil tapi memerlukan kode dan pemeliharaan berkelanjutan.
• JavaScript fetch(): Kamu menggunakan fetch API browser untuk mengirim data formulir ke endpoint backend. Lihat panduan kami tentang cara mengirim data formulir HTML dengan JavaScript fetch() untuk detail teknisnya.

Cara tercepat untuk membuat formulir yang berfungsi adalah menggunakan layanan formulir khusus. Berikut contoh konkret menggunakan Sendform:

Contoh Nyata: Formulir Kontak yang Berfungsi dalam 5 Menit

Misalkan kamu punya situs portofolio yang di-deploy di GitHub Pages. Kamu ingin pengunjung bisa mengirim pesan, dan pesan-pesan tersebut langsung masuk ke inbox-mu. Berikut HTML lengkapnya:

<form action="https://sendform.io/f/YOUR_FORM_ID" method="POST">
  <label for="name">Nama Kamu</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email Kamu</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Pesan</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Kirim Pesan</button>
</form>

Hanya itu yang dibutuhkan untuk integrasinya. Ganti YOUR_FORM_ID dengan ID dari dasbor Sendform-mu, dan setiap kiriman akan langsung dikirim ke email yang kamu daftarkan. Tanpa kode backend, tanpa server, tanpa tagihan infrastruktur bulanan. Untuk pola UX yang lebih canggih - termasuk halaman redirect setelah pengiriman dan email konfirmasi - baca panduan kami tentang praktik terbaik formulir website statis.

Jika kamu menggunakan website builder bersamaan dengan situs statismu, kami juga membahas proses integrasinya secara mendetail dalam artikel tentang cara mengintegrasikan Sendform dengan website builder-mu.

Kesalahan Umum yang Perlu Dihindari

Setelah membantu ribuan pengguna menyiapkan hosting web statis gratis, berikut adalah kesalahan-kesalahan yang paling sering menimbulkan frustrasi:

1. Lupa membuat halaman 404

Baik GitHub Pages maupun Cloudflare Pages akan menampilkan halaman error generik jika suatu rute tidak ditemukan. Buat file 404.html kustom di direktori root-mu. Ini membuat pengguna tetap berada di situsmu dan menjaga pengalaman brand-mu.

2. Menyimpan data rahasia di repositori publik

API key, rahasia endpoint formulir, dan alamat email tidak boleh disimpan di repositori GitHub publik. Gunakan variabel lingkungan di Cloudflare Pages, atau acu file konfigurasi privat yang sudah dicantumkan di .gitignore.

3. Membangun formulir tanpa rencana backend

Ini adalah kesalahan paling umum. Developer membangun formulir kontak yang indah, push ke GitHub Pages, lalu menyadari di hari peluncuran bahwa formulirnya diam-diam gagal. Tentukan backend formulirmu sebelum kamu menulis satu pun tag <input>. Tools seperti Sendform memungkinkan kamu membuat formulir kontak yang langsung mengirim ke email tanpa kode apa pun, sehingga masalah backend hilang sepenuhnya.

4. Mengabaikan masalah cache build

Jika situsmu tidak memperbarui tampilan setelah push, cache CDN mungkin masih menyajikan file lama. Cloudflare Pages secara otomatis membersihkan cache-nya saat deployment. GitHub Pages lebih lambat dalam menyebarkan perubahan; tunggu hingga 10 menit, atau tambahkan query string ke URL aset-mu saat pengujian.

5. Menggunakan path relatif yang salah

Jika situs GitHub Pages-mu berada di username.github.io/project-name/ (subdirektori), semua path aset harus memperhitungkan prefiks tersebut. Link ke /styles.css akan rusak. Gunakan path relatif (./styles.css) atau konfigurasi pengaturan baseURL static site generator-mu agar sesuai dengan subdirektori.

6. Melewatkan otomatisasi alur kerja formulir

Setelah formulirmu mulai menerima kiriman, kamu bisa melakukan jauh lebih banyak dari sekadar menerima email. Sendform mendukung webhook dan integrasi yang memungkinkan kamu mengarahkan kiriman ke Slack, CRM, atau spreadsheet secara otomatis. Panduan kami tentang mengotomatiskan alur kerja formulir dengan webhook dan API menunjukkan cara melakukan ini tanpa menulis kode backend.

Kesimpulan

Hosting website statis gratis tidak pernah semampuh sekarang. GitHub Pages cocok untuk tim yang sudah sepenuhnya menggunakan ekosistem GitHub, sementara Cloudflare Pages menawarkan performa global yang lebih baik dan paket gratis yang lebih dermawan. Tantangan sesungguhnya bukan pada hosting itu sendiri - melainkan pada fitur dinamis, khususnya formulir kontak, yang sering membuat orang tersandung. Dengan memadukan salah satu platform tersebut dengan layanan formulir khusus, kamu mendapatkan website profesional yang berfungsi penuh tanpa biaya infrastruktur sama sekali. Mulailah dengan salah satu panduan platform di atas, tayangkan situsmu, lalu pasang formulir kontakmu menggunakan Sendform untuk menangani kiriman secara andal sejak hari pertama.

Tambahkan Formulir Kontak ke Situs Statismu dalam Hitungan Menit

Gunakan Sendform untuk mengumpulkan kiriman formulir dari situs statis mana pun yang di-hosting di GitHub Pages atau Cloudflare Pages. Tanpa kode backend, tanpa pengaturan server, tanpa kerumitan. Cukup arahkan atribut action formulirmu ke endpoint-mu dan selesai.

Mulai Gratis di Sendform.net →

Pertanyaan yang Sering Diajukan