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. Opsi gratis kini sudah jauh lebih matang, dan platform seperti GitHub Pages maupun 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 untuk memprosesnya? Panduan ini membahas seluruh proses setup, mulai dari memilih platform hingga memasang formulir kontak yang berfungsi, lengkap dengan contoh nyata dan batasan-batasan yang perlu kamu ketahui sebelum memutuskan.

Mengapa Hosting Statis Gratis Layak Dipertimbangkan

Website statis menyajikan file HTML, CSS, dan JavaScript yang sudah dibangun sebelumnya langsung ke browser. Tidak ada PHP, tidak ada runtime Node.js, dan tidak ada query database di setiap pemuatan halaman. Kesederhanaan inilah 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, sering kali 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 repository, dan situs ter-deploy secara otomatis.

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

Perbandingan Platform: GitHub Pages vs Cloudflare Pages

Kesimpulan singkat: Jika audiensmu global dan kamu menginginkan waktu muat secepat mungkin, Cloudflare Pages lebih unggul. Jika timmu sudah terbiasa dengan GitHub dan ingin setup sesederhana 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 identik.

1. Buat repository GitHub. Buka github.com/new dan buat repository publik. Beri nama your-username.github.io jika ingin disajikan di root domain, atau nama apa pun jika ingin di path subdirektori.
2. Push file situsmu. Dari folder proyek lokal, jalankan:

   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 repository, buka Settings > Pages. Di bagian "Source", pilih branch main dan folder /root (atau /docs jika output build-mu ada di sana). Klik Save.
4. Tunggu proses deployment. GitHub akan melakukan build dan 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 repository yang berisi nama domainmu (misalnya www.yoursite.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 "Create a project", lalu "Connect to Git". Pilih repository-mu 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 "Save and Deploy". Cloudflare akan meng-clone repository-mu, menjalankan build, dan mempublikasikannya ke jaringan edge global mereka. Situsmu langsung mendapatkan subdomain *.pages.dev.
5. Tambahkan domain kustom. Di dasbor proyek, buka "Custom domains" dan masukkan domainmu. Jika domainmu sudah dikelola oleh Cloudflare DNS, setup-nya hanya 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 utama akan memicu redeploy otomatis. Cloudflare juga membuat preview deployment untuk pull request, yang berguna untuk meninjau perubahan sebelum tayang.

Menambahkan Formulir Kontak ke Situs Statis

Di sinilah kebanyakan panduan berhenti, dan di sinilah kebanyakan orang kebingungan. Formulir kontak di website statis tidak bisa mengirimkan 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. Ini bisa dilakukan 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 mendapatkan formulir yang berfungsi adalah menggunakan layanan formulir khusus. Berikut contoh konkret menggunakan Sendform:

Contoh Nyata: Formulir Kontak yang Berfungsi dalam 5 Menit

Sebelum menambahkan kode apa pun ke situsmu, kamu perlu menyiapkan akun Sendform dan membuat endpoint formulir. Prosesnya hanya membutuhkan sekitar dua menit:

1. Daftar di Sendform.net. Buat akun gratis - tidak perlu kartu kredit. Setelah registrasi, kamu akan langsung memiliki proyek default yang siap digunakan.
2. Buat formulir. Di dasbor, klik "New Form". Beri nama, pilih proyek, dan masukkan alamat email tempat kamu ingin menerima kiriman data. Sendform akan memverifikasi alamat ini sebelum mengaktifkan endpoint.
3. Salin URL endpoint-mu. Setelah formulir dibuat, kamu akan melihat URL endpoint unik dengan format https://sendform.net/!your-form-id. Salin URL ini - inilah yang akan kamu tempelkan ke HTML-mu.

Dengan endpoint di tangan, tambahkan HTML berikut ke situs statismu:

<form action="https://sendform.net/!your-form-id" method="POST">
  <label for="name">Your Name</label>
  <input type="text" id="name" name="name" required>

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

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

  <button type="submit">Send Message</button>
</form>

Ganti your-form-id dengan ID yang tertera di dasbor Sendform-mu. Setiap kiriman data kemudian akan dikirim via email ke alamat yang kamu konfirmasi saat setup. Tidak ada kode backend, tidak ada server, tidak ada 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 detail di artikel tentang cara mengintegrasikan Sendform dengan website builder-mu.

Kesalahan Umum yang Harus Dihindari

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

1. Lupa membuat halaman 404

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

2. Menyimpan data rahasia di repository publik

API key, secret endpoint formulir, dan alamat email tidak boleh ada di repository GitHub publik. Gunakan environment variable di Cloudflare Pages, atau referensikan file konfigurasi privat yang terdaftar 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 menulis satu pun tag <input>. Tools seperti Sendform memungkinkan kamu menyiapkan formulir kontak yang langsung mengirim ke email tanpa kode apa pun, yang menghilangkan masalah backend sepenuhnya.

4. Mengabaikan masalah cache build

Jika situsmu tidak diperbarui 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 secara tidak tepat

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

6. Melewatkan otomasi alur kerja formulir

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

Kesimpulan

Hosting website statis gratis kini lebih mumpuni dari sebelumnya. GitHub Pages cocok untuk tim yang sudah terbiasa dengan 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 fitur dinamis, khususnya formulir kontak, yang sering membuat orang tersandung. Dengan memadukan salah satu platform tersebut bersama layanan formulir khusus, kamu mendapatkan website profesional yang sepenuhnya fungsional tanpa biaya infrastruktur. Mulailah dengan salah satu panduan platform di atas, buat situsmu tayang, lalu pasang formulir kontakmu menggunakan Sendform untuk menangani kiriman data 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 setup server, tanpa kerumitan. Cukup arahkan atribut action formulirmu ke endpoint-mu dan selesai.

Mulai Gratis di Sendform.net →

Pertanyaan yang Sering Diajukan