Gerbang Gratis ke Dunia Maya: Hosting Website & Aplikasi Tanpa Bayar Pakai GitHub Pages dan Blogger!

ikramlink • Maret 28, 2026
Gerbang Gratis ke Dunia Maya: Hosting Website & Aplikasi Tanpa Bayar Pakai GitHub Pages dan Blogger!

Dulu, waktu saya masih sering ngoprek kode di kamar kosan dengan laptop tua, pikiran tentang "deploy" itu rasanya seperti menghadapi tumpukan bon hutang yang tak terbayar. Ada perasaan deg-degan setiap kali memikirkan biaya hosting, apalagi kalau cuma buat proyek iseng atau portofolio sederhana. Pernah suatu ketika, saya iseng bikin kalkulator BMI pakai JavaScript murni, kodenya udah oke, UI-nya lumayan, tapi bingung mau ditaruh di mana biar orang lain bisa coba. Niatnya pamer ke teman-teman, eh malah berakhir cuma jadi file lokal di laptop. Rasanya kayak udah masak rendang seenak chef bintang lima, tapi lupa nyiapin piring atau meja makan. Frustrasi, bukan?

Nah, kalau kamu pernah merasakan kegelisahan serupa, atau mungkin sekarang sedang memulainya sebagai seorang developer, mahasiswa, atau sekadar punya ide brilian yang ingin dilihat dunia tanpa harus menguras dompet, berarti artikel ini cocok buatmu! Siapa sangka, di tengah gempuran layanan berbayar yang menawarkan fitur seabrek, ada dua "jalan ninja" gratisan yang sangat powerful dan bisa jadi penyelamat dompet: GitHub Pages dan Blogger. Keduanya bukan cuma gratis, tapi juga relatif mudah diimplementasikan, apalagi untuk proyek-proyek statis. Yuk, kita bongkar satu per satu!

Kenapa Harus Gratis? Hemat Itu Pangkal Kaya, Developer!

Mari kita analogikan begini: kamu baru mau belajar menyetir mobil balap. Apa langsung beli mobil Formula 1 seharga triliunan rupiah dan menyewa sirkuit pribadi? Tentu tidak, kan? Kamu pasti mulai dari belajar di simulator, atau mungkin menyewa mobil biasa di tempat kursus mengemudi. Begitu juga dengan hosting. Untuk proyek awal, portofolio, dokumentasi, atau aplikasi statis yang tidak memerlukan server-side processing dan database kompleks, mengeluarkan uang untuk hosting berbayar itu ibarat membeli bengkel otomotif super lengkap dengan peralatan tercanggih, padahal kamu cuma mau ganti oli atau memoles mobil mainan. Agak boros, bukan?

Hosting gratis adalah pintu gerbang awal yang ideal. Ia memungkinkan kita untuk:

  • Belajar dan Bereksperimen: Tanpa beban biaya, kamu bisa coba-coba berbagai proyek, menguji ide, dan mengasah kemampuan deployment.
  • Membuat Portofolio Online: Tunjukkan hasil karyamu kepada calon klien atau perusahaan tanpa harus memikirkan biaya bulanan. Ini esensial bagi setiap developer!
  • Membangun Situs Pribadi atau Blog Sederhana: Berbagi cerita, tutorial, atau informasi pribadi dengan dunia.
  • Mendukung Proyek Open Source: Banyak dokumentasi proyek open source yang di-host secara gratis menggunakan layanan semacam ini.
  • Membangun Aplikasi Statis (SPA): Framework modern seperti React, Vue, atau Svelte menghasilkan aplikasi statis yang sangat cocok di-host secara gratis.

GitHub Pages: Bengkel Canggih di Awan GitHub

Kalau GitHub itu ibarat perpustakaan raksasa tempat para programmer menyimpan "buku-buku" kode mereka (repositori), maka GitHub Pages adalah sebuah area pameran khusus di dalam perpustakaan itu. Kamu bisa menaruh salah satu "buku" karyamu di sana agar bisa dibaca dan diakses oleh siapa saja di seluruh dunia, secara cuma-cuma! Ini adalah cara favorit saya untuk memamerkan proyek-proyek frontend atau sekadar dokumentasi teknis. Keajaiban GitHub Pages terletak pada kesederhanaan dan integrasinya yang mulus dengan alur kerja development yang sudah biasa dilakukan oleh para developer: version control dengan Git.

Apa itu GitHub Pages? Secara teknis, GitHub Pages adalah layanan static site hosting yang disediakan oleh GitHub. Artinya, ia hanya bisa menyajikan file-file statis seperti HTML, CSS, JavaScript, gambar, dan aset lainnya. Ia tidak mendukung bahasa pemrograman server-side seperti PHP, Node.js, Python, atau database. Namun, jangan salah sangka! Dengan kemajuan JavaScript modern dan arsitektur JAMstack, kamu bisa membuat aplikasi yang sangat interaktif dan kaya fitur hanya dengan aset statis.

Kapan GitHub Pages Jadi Pilihan Tepat?

  • Portofolio Developer: Pamerkan keahlianmu dengan proyek-proyek keren.
  • Dokumentasi Proyek: Buat panduan penggunaan untuk proyek open source-mu.
  • Blog Teknis (dengan Static Site Generator): Integrasikan dengan Jekyll, Hugo, atau Eleventy untuk blog super cepat.
  • Landing Page Produk: Promosikan produk atau jasa yang baru kamu rilis.
  • Single Page Applications (SPA): Aplikasi React, Vue, Svelte, Angular yang di-build menjadi aset statis.

Membangun Pondasi: Persiapan di GitHub Pages

Memulai GitHub Pages itu seperti menyiapkan perkakas dan area kerja di bengkelmu. Kita butuh akun GitHub dan Git terinstal di komputer. Kalau belum punya, anggap itu seperti mendaftar anggota bengkel dan membeli kunci pas. Prosesnya mudah dan gratis! Setelah itu, ada dua jenis GitHub Pages yang perlu kamu tahu:

  1. User/Organization Pages: Ini adalah situs yang terkait dengan akun GitHub kamu (misalnya username.github.io) atau organisasi. Kamu hanya bisa punya satu situs seperti ini per akun/organisasi. Repositorinya harus diberi nama persis username.github.io (ganti username dengan nama akun GitHub-mu).
  2. Project Pages: Ini adalah situs untuk proyek spesifik. Kamu bisa punya banyak. Repositorinya bisa diberi nama apa saja. Situsnya akan diakses melalui username.github.io/nama-repo.

Untuk panduan ini, kita akan fokus pada Project Pages karena lebih fleksibel untuk banyak proyek.

Langkah-langkah Praktis (Analogi Bengkel Mobil):

  1. Siapkan Material (Kode Proyek):

    Pertama, pastikan kamu sudah punya folder proyek dengan file index.html (atau index.htm) di dalamnya. File ini akan jadi "etalase" utama situsmu. Anggap ini seperti kamu sudah selesai merakit sebuah model mobil, sekarang tinggal memolesnya dan memamerkannya.

    
        <!DOCTYPE html>
        <html lang="id">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Halo Dunia dari GitHub Pages!</title>
            <style>
                body { font-family: sans-serif; text-align: center; margin-top: 50px; }
                h1 { color: #333; }
                p { color: #666; }
            </style>
        </head>
        <body>
            <h1>Selamat Datang di Website Gratis Saya!</h1>
            <p>Ini adalah demo hosting website menggunakan GitHub Pages. Keren kan?</p>
            <button onclick="alert('Halo dari JavaScript!')">Klik Saya!</button>
        </body>
        </html>
  2. Buat Repositori Baru di GitHub (Sediakan Lapak Bengkel):

    Masuk ke GitHub, klik tombol "New repository". Beri nama yang unik (misal: proyek-demo-gratis). Pastikan statusnya "Public" agar bisa diakses GitHub Pages. Centang "Add a README file" agar repositori tidak kosong.

  3. Hubungkan Proyek Lokal ke GitHub (Pindahkan Peralatan ke Lapak):

    Buka Terminal atau Git Bash di folder proyek lokalmu. Lakukan inisialisasi Git, tambahkan semua file, dan commit:

    
        git init
        git add .
        git commit -m "Initial commit: demo website"

    Kemudian, hubungkan ke repositori GitHub yang baru kamu buat dan push:

    
        git remote add origin https://github.com/username/proyek-demo-gratis.git
        git branch -M main
        git push -u origin main

    Ganti username dan proyek-demo-gratis dengan data repositori-mu.

  4. Aktifkan GitHub Pages (Buka Pintu Bengkel untuk Umum):

    Setelah kode-mu ada di GitHub, masuk ke halaman repositori-mu. Klik tab "Settings". Di sidebar kiri, cari dan klik "Pages". Pada bagian "Build and deployment", di bawah "Source", pilih "Deploy from a branch". Kemudian, di bagian "Branch", pilih branch main (atau master, tergantung repositori-mu) dan pilih folder / (root). Klik "Save".

    Setelah beberapa saat (biasanya 1-5 menit), GitHub akan memprosesnya. Kamu akan melihat pesan hijau yang mengindikasikan situsmu sudah live, lengkap dengan URL-nya (misalnya: https://username.github.io/proyek-demo-gratis/).

    Saya ingat banget waktu pertama kali nyoba deploy dengan GitHub Pages, saking senangnya, saya langsung ngajak teman-teman buat ngelihat. Eh, ternyata saya lupa kalau GitHub Pages butuh waktu beberapa menit untuk proses deployment-nya. Udah pamer-pamer URL, tapi pas dibuka malah 404. Malu banget rasanya! Pelajarannya: sabar itu kunci, apalagi dalam deployment. Selalu cek status deployment-nya ya!

Blogger: Warung Kopi Digital Serbaguna untuk Jualan Konten

Jika GitHub Pages adalah bengkel canggih yang cocok untuk para ahli atau yang suka ngoprek, maka Blogger itu ibarat warung kopi rumahan yang nyaman dan akrab. Kamu nggak perlu ribet mikirin alat-alat canggih atau infrastruktur rumit. Tinggal datang, pesan tempat, dan kamu bisa langsung menyajikan "kopi" atau "makanan" (konten) karyamu ke para pengunjung. Blogger memang didesain untuk ngeblog, tapi fleksibilitasnya memungkinkan kita untuk menyalahgunakannya (dalam konotasi positif!) sebagai platform hosting statis sederhana.

Apa itu Blogger? Blogger adalah platform blog gratis dari Google. Fitur utamanya adalah kemudahan dalam membuat, mengelola, dan mempublikasikan konten blog. Integrasinya dengan ekosistem Google (akun Gmail, Google Drive, dsb.) membuatnya sangat intuitif bagi pengguna awam. Meski fokusnya pada blog, setiap "post" atau "page" di Blogger pada dasarnya adalah halaman HTML yang bisa kamu isi dengan konten apa pun, termasuk kode HTML, CSS, dan JavaScript statis.

Kapan Blogger Jadi Pilihan Tepat?

  • Blog Pribadi atau Profesional: Tentu saja, ini adalah tujuan utamanya.
  • Situs Web Sederhana: Buat landing page, situs portofolio non-developer, atau profil pribadi.
  • Situs Dokumen Ringan: Untuk panduan atau informasi yang tidak butuh format terlalu teknis.
  • Non-Developer Friendly: Cocok untuk kamu yang kurang familiar dengan Git dan Terminal.

Meracik Resep: Memulai dengan Blogger

Membuat situs statis di Blogger itu seperti meracik kopi andalanmu di warung. Nggak perlu banyak alat, cukup bahan dasar dan sedikit sentuhan.

Langkah-langkah Praktis (Analogi Warung Kopi):

  1. Siapkan Akun Google (Daftar Jadi Pelanggan Warung):

    Pasti sudah punya, kan? Kalau belum, buat dulu. Ini adalah kunci akses ke semua layanan Google, termasuk Blogger.

  2. Buat Blog Baru (Pesan Meja di Warung):

    Kunjungi blogger.com. Klik "Buat Blog Anda" atau "+ New Blog". Beri judul blogmu (misal: "Portofolio Online Saya") dan alamat URL yang unik (misal: portofolio-keren-saya.blogspot.com). Ini akan menjadi alamat situsmu.

  3. Buat Halaman Baru (Sajikan Menu Spesial):

    Secara default, Blogger akan mengarahkanmu ke tampilan "Post" (artikel). Karena kita mau bikin situs statis, kita akan pakai "Pages" (Halaman). Di sidebar kiri, klik "Pages", lalu klik "New Page".

  4. Masukkan Kode HTML (Racik Kopi dan Hidangkan):

    Di halaman editor, beri judul halamanmu (misal: "Beranda"). Nah, di sini bagian pentingnya. Di pojok kiri atas editor, ada ikon pensil atau panah ke bawah. Klik itu, lalu pilih "HTML View". Hapus semua konten yang ada, lalu paste kode HTML statis-mu di sana. Jangan khawatir tentang tag <html>, <head>, dan <body>; Blogger akan mengurusnya. Cukup isi bagian dalamnya.

    
        <h1 style="color: #007bff; text-align: center;">Selamat Datang di Halaman Blogger Statis Saya!</h1>
        <p style="font-size: 1.1em; text-align: justify; padding: 0 20px;">
            Ini adalah contoh sederhana bagaimana kita bisa memanfaatkan Blogger untuk meng-host konten HTML statis.
            Meskipun lebih sering digunakan untuk blog, fitur "Pages" dan "HTML View"-nya
            memungkinkan kita untuk membuat halaman web dasar tanpa biaya.
            Cocok untuk proyek kecil, informasi kontak, atau sekadar pamer skill HTML dasar.
        </p<
        <div style="text-align: center; margin-top: 30px;">
            <a href="#" style="background-color: #28a745; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;">
                Pelajari Lebih Lanjut
            </a>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                console.log('Halaman Blogger berhasil dimuat!');
            });
        </script>

    Setelah selesai, klik "Publish" di kanan atas.

    Dulu, saya pernah coba sisipkan kode JavaScript interaktif yang cukup kompleks di Blogger, harapannya bisa jadi aplikasi mini di dalamnya. Eh, malah ada beberapa bagian yang nggak jalan atau tampilannya jadi berantakan. Ternyata, Blogger ini punya sanitasi HTML dan JS sendiri yang bisa memfilter atau membatasi beberapa skrip tertentu demi keamanan dan stabilitas platform. Jadi, jangan terlalu berharap bisa menjalankan aplikasi sekompleks React atau Vue di sini ya. Pelajarannya: kenali batas kemampuan alatmu!

  5. Atur Halaman Utama (Tentukan Menu Andalan):

    Secara default, halaman utama blogmu akan menampilkan postingan terbaru. Jika kamu ingin halaman statis yang baru saja kamu buat menjadi halaman utama, masuk ke "Layout" di sidebar Blogger. Cari widget "Main" atau "Blog Posts", lalu atur agar halaman utamamu adalah "Halaman" yang sudah kamu buat tadi, bukan daftar postingan. Caranya bervariasi tergantung tema, tapi intinya kamu perlu mengubah default homepage-nya dari "posts" ke "page". Atau, cara yang lebih sederhana, kamu bisa tambahkan navigasi di template blogmu yang mengarahkan ke halaman statis tersebut.

  6. Kustomisasi Domain (Opsional):

    Sama seperti GitHub Pages, Blogger juga memungkinkanmu menggunakan custom domain sendiri (misal: www.situsku.com) tanpa biaya tambahan, kecuali biaya pembelian domain itu sendiri. Pengaturannya ada di bagian "Settings" > "Custom domain".

Memilih Peralatan yang Tepat: Kapan Pakai GitHub Pages, Kapan Pakai Blogger?

Ibarat seorang koki, kamu punya dua pisau yang sama-sama tajam tapi berbeda fungsi. Kapan kamu pakai pisau daging, dan kapan pakai pisau ukir buah? Pilihan tergantung kebutuhan:

Pilih GitHub Pages Jika:

  • Kamu Seorang Developer: Atau setidaknya punya dasar Git dan Command Line. Alur kerjanya sangat terintegrasi dengan pengembangan modern.
  • Proyekmu Berbasis Kode: Portofolio, dokumentasi teknis, landing page yang dibuat dengan HTML/CSS/JS murni, atau aplikasi frontend (React, Vue, Angular) yang sudah di-build.
  • Butuh Kontrol Lebih: Kamu bisa mengontrol sepenuhnya struktur folder, file, dan bagaimana aset disajikan.
  • Berencana Menggunakan Static Site Generator (SSG): Seperti Jekyll, Hugo, Astro, atau Eleventy untuk membuat blog atau situs yang performanya super cepat.
  • Ingin Terlihat Profesional di Mata Komunitas Developer: Menggunakan GitHub Pages menunjukkan kamu familiar dengan ekosistem pengembangan modern.
  • Suka Berkolaborasi: Karena berbasis Git, kolaborasi jadi sangat mudah.

Pilih Blogger Jika:

  • Kamu Fokus Pada Konten Teks: Menulis blog, artikel, atau cerita pribadi adalah prioritas utama.
  • Bukan Developer Murni: Atau tidak ingin pusing dengan Git, Terminal, dan proses deployment yang lebih teknis.
  • Lebih Suka Antarmuka Grafis (GUI): Editor visual Blogger sangat intuitif dan mudah digunakan.
  • Situsmu Sangat Sederhana: Hanya butuh beberapa halaman statis dengan teks, gambar, dan sedikit CSS/JS.
  • Ingin Cepat Online: Proses setup Blogger sangat cepat, hitungan menit sudah bisa publish.
  • Ingin Integrasi Mudah dengan Ekosistem Google: Termasuk Google Analytics, AdSense, dan lainnya.

Intinya, GitHub Pages itu seperti pisau bedah yang presisi dan powerful, ideal untuk tugas-tugas teknis dan detail. Sementara Blogger itu pisau serbaguna di dapur rumah tangga, praktis dan efisien untuk kebutuhan umum yang tidak terlalu spesifik.

Penutup: Gerbangmu ke Dunia Maya Tanpa Batas Biaya

Kisah tentang kalkulator BMI yang teronggok di laptop saya itu kini sudah jadi kenangan. Sejak mengenal GitHub Pages dan Blogger, banyak proyek kecil saya yang akhirnya bisa "bernafas" di internet. Bahkan, portofolio awal saya juga dibangun di atas GitHub Pages. Ini membuktikan bahwa keterbatasan biaya bukanlah halangan mutlak untuk berkarya di dunia digital.

Baik GitHub Pages maupun Blogger, keduanya menawarkan kesempatan luar biasa untuk mempublikasikan karyamu secara gratis. Kuncinya adalah memahami kekuatan dan keterbatasan masing-masing, lalu memilih alat yang paling sesuai dengan kebutuhan proyekmu. Jangan ragu untuk bereksperimen, mencoba, dan bahkan menggabungkan keduanya jika memang ada skenario yang memungkinkan!

Jadi, tunggu apa lagi? Ambil idemu, tulis kodenya (atau kontennya), lalu sebarkan ke seluruh dunia. Gerbang gratisan sudah terbuka lebar. Selamat mencoba dan berkreasi!

Bagaimana pengalamanmu dengan hosting gratis? Atau mungkin ada pertanyaan? Jangan sungkan untuk berbagi di kolom komentar di bawah!

Blogger GitHub Web Development