Jurus Sakti Developer Hemat: Hosting Website & Aplikasi Gratis dengan GitHub Pages dan Blogger!

ikramlink • Maret 28, 2026
Jurus Sakti Developer Hemat: Hosting Website & Aplikasi Gratis dengan GitHub Pages dan Blogger!

Ah, kenangan pahit di awal perjalanan ngoding saya! Dulu, waktu masih muda belia dan dompet saya tipis selembar daun lontar kering, saya pernah semalaman suntuk debug error aneh di sebuah aplikasi web yang rencananya mau saya pamerkan. Bukan bug kodingan, bukan juga salah logika. Ternyata, masalahnya ada pada hosting yang saya pakai gratisan tapi 'kadaluarsa'. Website saya jadi seperti mobil mogok di jalan tol, butuh diderek tapi saya nggak punya biaya. Frustrasi level dewa! Sejak saat itu, saya bertekad mencari jalan ninja agar website atau aplikasi ringan bisa online tanpa perlu merogoh kocek dalam-dalam, apalagi sampai bayar bulanan di awal.

Kini, setelah bergelut dengan ribuan baris kode dan bermalam-malam ditemani kopi hitam, saya menemukan beberapa 'jurus sakti' yang ingin saya bagikan kepada teman-teman developer, terutama para pemula atau mereka yang punya proyek sampingan (side project) tapi ogah keluar modal. Kita akan membahas dua platform ajaib yang memungkinkan kamu memamerkan karyamu ke seluruh dunia secara gratis: GitHub Pages dan Blogger. Siap-siap, karena setelah ini, alasan 'nggak punya uang hosting' nggak akan berlaku lagi!

Mengapa Hosting Gratis Penting untuk Developer Pemula (dan Berpengalaman)?

Bayangkan kamu seorang seniman muda berbakat. Kamu sudah membuat mahakarya lukisan yang luar biasa. Sekarang, kamu butuh sebuah galeri untuk memamerkannya ke publik, bukan? Nah, hosting itu ibarat galeri atau lapak jualanmu di dunia maya. Tanpa hosting, website atau aplikasimu hanya akan tinggal menjadi file di dalam hard drive-mu, tak ubah seperti lukisan yang teronggok di sudut kamar, tak terlihat siapa pun.

Lalu, mengapa harus gratis? Ada beberapa alasan kuat:

  • Dompet Aman di Awal Karir: Ini alasan paling jelas. Sebagai pemula, setiap rupiah sangat berharga. Hosting gratis memungkinkanmu belajar, bereksperimen, dan membangun portofolio tanpa beban finansial.
  • Portofolio Instan: Rekruter atau klien ingin melihat karyamu yang sudah live. Dengan hosting gratis, kamu bisa segera membuat halaman portofolio interaktif atau mendemonstrasikan aplikasi yang telah kamu buat. Ini seperti punya kartu nama digital yang bisa langsung diakses.
  • Eksperimen Tanpa Batas: Punya ide gila untuk website baru? Ingin mencoba framework JavaScript terbaru? Hosting gratis adalah taman bermainmu. Jika gagal, tinggal hapus dan mulai lagi, tanpa penyesalan biaya.
  • Belajar Versi Kontrol & Deployment: Terutama dengan GitHub Pages, kamu akan terbiasa dengan alur kerja Git dan proses deployment, sebuah keterampilan vital bagi developer modern.

Jurus Pertama: Membangun Kerajaan Statis dengan GitHub Pages

Dulu, pertama kali saya mencoba GitHub Pages, saya merasa seperti seorang koki pemula yang baru menemukan kompor induksi canggih. Saya hanya perlu menyiapkan bahan-bahan (file HTML, CSS, JavaScript) dan tata rapi di dapur (repository Git), lalu dengan satu tombol ajaib, hidangan saya (website) langsung tersaji di depan umum. Tapi, ya, namanya juga pemula, saya pernah lupa menaruh "garam" (file index.html) di resep saya, alhasil website saya malah menampilkan daftar direktori kosong. Rasanya seperti menyajikan nasi goreng tanpa nasi! Pelajaran berharga: detail kecil itu penting.

Apa Itu GitHub Pages?

GitHub Pages adalah fitur luar biasa dari GitHub yang memungkinkan kamu untuk host website statis (HTML, CSS, JavaScript) langsung dari repositorimu. Anggap saja GitHub ini seperti bengkel umum besar yang disediakan secara cuma-cuma, di mana setiap mekanik (developer) bisa memamerkan hasil rakitannya (website statis) secara gratis. Kamu tinggal menyiapkan komponen-komponen (kode) di ruang kerjamu (repository), dan GitHub akan memasangkan komponen tersebut menjadi sebuah mesin yang siap jalan (website).

Kelebihan dan Kekurangan GitHub Pages

Setiap jurus pasti punya sisi terang dan sisi gelapnya, bukan?

Kelebihan:

  • Gratis, Selamanya: Ya, benar-benar gratis! Tanpa embel-embel, tanpa iklan paksa dari mereka.
  • Terintegrasi Penuh dengan Git: Ini adalah surga bagi developer. Kamu bisa mengelola versimu, berkolaborasi, dan melakukan deployment hanya dengan git push. Seperti punya tim deployment pribadi yang sangat efisien.
  • Mudah untuk Website Statis: Cocok untuk portofolio, dokumentasi proyek, blog pribadi yang ringan, atau landing page aplikasi.
  • Dukungan Domain Kustom: Kamu bisa menggunakan domainmu sendiri (misalnya namasaya.com) tanpa biaya tambahan, hanya perlu sedikit konfigurasi DNS. Ini seperti mengubah alamat lapak jualanmu dari "Alun-alun Kota Blok C No. 7" menjadi "Toko Keren Abadi No. 1".
  • Dukungan Jekyll: Jika kamu ingin membuat blog atau situs statis yang lebih terstruktur, Jekyll adalah static site generator yang di-support penuh oleh GitHub Pages.

Kekurangan:

  • Hanya untuk Website Statis: Tidak bisa menjalankan server-side code (PHP, Python dengan Django/Flask, Node.js dengan Express, database). Ini seperti mobil balap yang hanya bisa jalan di sirkuit datar, tidak bisa mendaki gunung.
  • Batasan Ukuran & Bandwidth: Ada batasan, meski cukup longgar untuk proyek personal (1GB ukuran repo, 100GB bandwidth per bulan).
  • Tidak Ada Database: Jika proyekmu butuh menyimpan data dinamis, kamu harus mencari solusi eksternal (misalnya Firebase atau API pihak ketiga).
  • Waktu Build yang Kadang Lama: Untuk proyek Jekyll yang kompleks, waktu build bisa memakan beberapa menit.

Langkah-Langkah Menggunakan GitHub Pages

Mari kita mulai 'merakit' website statismu!

1. Siapkan Repository GitHub

Pertama, kamu butuh akun GitHub. Jika belum punya, daftar sekarang. Lalu, buat repository baru. Ada dua jenis GitHub Pages:

  • User/Organization Pages: Untuk membuat website personal atau organisasi. Nama repo harus username.github.io (misalnya, jika username-mu coderhebat, repositorimu harus bernama coderhebat.github.io). Website-nya akan langsung terbit di alamat itu.
  • Project Pages: Untuk website spesifik suatu proyek. Nama repo bisa apa saja (misalnya nama-proyek-keren). Website-nya akan terbit di username.github.io/nama-proyek-keren.

Untuk demo ini, kita asumsikan kamu ingin membuat website personal, jadi buat repo bernama username.github.io.


# Jika kamu menggunakan Git di lokal
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/username.github.io.git
git push -u origin master # Atau main, tergantung default branch kamu

2. Buat File HTML Sederhana

Di dalam repositorimu (atau di folder lokal yang terhubung ke repo), buat file bernama index.html. Ini adalah "gerbang utama" websitemu. Jangan sampai lupa nama ini, ya!


<!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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; margin-top: 50px; background-color: #f4f4f4; color: #333; }
        h1 { color: #007bff; }
        p { font-size: 1.2em; }
        .container { background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); display: inline-block; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Selamat Datang di Website GitHub Pages Saya!</h1>
        <p>Ini adalah website statis pertama saya yang di-hosting gratis dengan GitHub Pages.</p>
        <p>Sangat mudah, bukan? Mari kembangkan lebih jauh!</p>
    </div>
</body>
</html>

Kamu bisa menambahkan file CSS (misalnya style.css) dan JavaScript (misalnya script.js) di folder yang sama, lalu panggil dari index.html seperti biasa.

3. Push ke GitHub

Jika kamu mengeditnya secara lokal, jangan lupa untuk commit dan push perubahanmu ke GitHub:


git add .
git commit -m "Menambahkan index.html untuk GitHub Pages"
git push origin master # Atau main

Jika kamu mengedit langsung di GitHub, cukup simpan (commit) file tersebut.

4. Aktifkan GitHub Pages

Secara otomatis, untuk repository username.github.io, GitHub Pages akan aktif setelah kamu push. Namun, jika kamu menggunakan Project Pages atau ingin mengonfigurasi lebih lanjut:

  1. Pergi ke repository-mu di GitHub.
  2. Klik tab Settings.
  3. Di sidebar kiri, klik Pages.
  4. Di bagian Source, pastikan branch yang kamu gunakan (biasanya main atau master) terpilih, dan foldernya /(root).
  5. Klik Save.

Dalam beberapa menit (atau kadang detik), websitemu akan tayang di alamat https://username.github.io atau https://username.github.io/nama-proyek-keren. Ajaib, kan?

5. (Opsional) Menggunakan Custom Domain

Jika kamu ingin websitemu diakses melalui domain kustom (misalnya www.punyaku.com):

  1. Beli domain dari penyedia domain favoritmu.
  2. Di pengaturan DNS domainmu, tambahkan A record yang menunjuk ke IP address GitHub Pages (cari IP terbaru di dokumentasi GitHub Pages, biasanya ada beberapa IP yang perlu ditambahkan). Atau, gunakan CNAME record untuk subdomain (misalnya www.punyaku.com menunjuk ke username.github.io).
  3. Di root repositorimu (di samping index.html), buat file baru bernama CNAME (huruf besar semua, tanpa ekstensi).
  4. Isi file CNAME ini dengan domain kustommu (misalnya www.punyaku.com).
  5. Push file CNAME ini ke GitHub.
  6. Di pengaturan GitHub Pages, masukkan domain kustommu di kolom Custom domain dan centang Enforce HTTPS agar websitemu aman.

Setelah beberapa saat (proses propagasi DNS bisa memakan waktu), websitemu akan terbit di domain kustommu!

Jurus Kedua: Membangun Portal Ringan dengan Blogger

Ingat tidak, zaman SMP/SMA dulu, ketika Blogger (atau Blogspot) adalah "medan perang" bagi para pujangga muda, tempat curhat, atau sekadar pamer foto liburan? Saya ingat betul betapa saya terpesona dengan kemampuannya untuk mengubah tulisan sederhana menjadi sebuah halaman web yang bisa diakses siapa saja. Kala itu, saya mencoba membuat blog tentang tips bermain game. Lucunya, saya pernah mencoba "memodifikasi" templatnya dengan menyisipkan kode HTML dan CSS agar tampilannya lebih "profesional", tapi karena kurang hati-hati, seluruh blog saya malah jadi berantakan seperti adukan semen yang belum kering. Untungnya, Blogger punya fitur restore, jadi saya bisa kembali ke versi sebelumnya. Ini mengajarkan saya pentingnya backup dan selalu berhati-hati saat bereksperimen!

Apa Itu Blogger?

Blogger adalah platform blogging gratis dari Google. Meskipun namanya "Blogger" dan fokus utamanya untuk membuat blog, ia juga bisa dimanfaatkan sebagai host untuk website statis yang sederhana. Anggap saja Blogger ini adalah "rumah pintar serbaguna" yang Google sediakan. Awalnya didesain untuk menulis buku harian (blog), tapi ternyata dinding-dindingnya (fitur Pages dan kustomisasi tema) bisa dilepas pasang, dan kamu bisa menempel poster atau bahkan membuat "mini-galeri" (website statis) di sana.

Kelebihan dan Kekurangan Blogger

Kelebihan:

  • Sangat Mudah Digunakan: Bahkan nenek-nenek pun bisa membuat blog di Blogger. Antarmuka yang intuitif, tidak perlu tahu banyak tentang koding. Ini seperti merakit furnitur IKEA tanpa instruksi, saking mudahnya.
  • Gratis dari Google: Didukung penuh oleh infrastruktur Google, artinya kamu dapat kecepatan dan keandalan yang mumpuni tanpa biaya.
  • Dukungan Domain Kustom: Sama seperti GitHub Pages, kamu bisa menghubungkan domainmu sendiri ke Blogger, lagi-lagi tanpa biaya hosting tambahan.
  • Tersedia Berbagai Fitur Blog: Jika kamu ingin website-mu juga punya elemen blog, Blogger adalah pilihan tepat.
  • SEO Google Friendly: Karena produk Google, seringkali secara alami sudah teroptimasi untuk mesin pencari Google.

Kekurangan:

  • Tidak Fleksibel untuk Aplikasi Kompleks: Sama seperti GitHub Pages, Blogger tidak mendukung server-side code atau database kompleks. Ini seperti mencoba membangun gedung pencakar langit dengan balok mainan anak.
  • Kustomisasi Terbatas: Meskipun bisa diubah, kustomisasi HTML/CSS-nya tidak sefleksibel saat kamu benar-benar punya kontrol penuh atas seluruh file website.
  • Potensi Iklan Google (jika diaktifkan): Jika kamu mengaktifkan monetisasi, iklan Google AdSense bisa muncul, yang mungkin tidak kamu inginkan untuk website portofolio profesional.
  • Stigma "Platform Blog": Orang mungkin akan berpikir kamu hanya punya blog, bukan website statis fungsional.

Langkah-Langkah Menggunakan Blogger untuk Website Statis

Mari kita 'sulap' Blogger menjadi host website statismu!

1. Buat Akun Blogger

  1. Pergi ke blogger.com.
  2. Login dengan akun Google-mu.
  3. Klik Create Your Blog.
  4. Pilih nama tampilanmu (ini akan muncul sebagai nama penulis).
  5. Berikan judul untuk blogmu (ini bisa jadi judul websitemu).
  6. Pilih alamat URL (misalnya websitekugratis.blogspot.com). Ini akan menjadi alamat websitemu.
  7. Pilih tema. Jangan khawatir, kita bisa mengubahnya nanti.

Selamat, kamu sudah punya blog! Sekarang, mari kita ubah fokusnya menjadi website statis.

2. Buat Halaman Statis (Pages)

Alih-alih membuat post blog, kita akan menggunakan fitur Pages untuk konten statis. Ini seperti membuat "bab-bab" terpisah di buku, bukan "artikel-artikel" harian.

  1. Dari Dashboard Blogger-mu, di sidebar kiri, klik Pages.
  2. Klik New Page.
  3. Kamu akan melihat editor seperti Microsoft Word. Di sini, kamu bisa mengetikkan kontenmu, menambahkan gambar, atau bahkan menyisipkan kode HTML secara langsung.
  4. Untuk tampilan website yang lebih terkontrol, kamu bisa beralih ke mode HTML (klik ikon <HTML> atau HTML View di editor). Kamu bisa menempelkan seluruh kode HTML dari file index.html yang kamu buat untuk GitHub Pages tadi.
  5. Berikan judul untuk halamanmu (misalnya "Beranda").
  6. Klik Publish.

Ulangi langkah ini untuk setiap halaman statis yang kamu inginkan (misalnya "Tentang", "Portofolio", "Kontak").

3. Atur Tema agar Website Tampil Lebih Baik

Untuk membuat blogmu benar-benar terlihat seperti website, bukan sekadar blog:

  1. Di Dashboard Blogger, klik Theme.
  2. Pilih tema yang minimalis atau sederhana. Tema yang lebih bersih akan lebih mudah diubah.
  3. Klik Customize. Kamu bisa mengubah warna, font, dan tata letak.
  4. Untuk kustomisasi lebih lanjut, kamu bisa klik Edit HTML di bagian Theme. Di sini, kamu bisa mengedit kode HTML/CSS tema secara langsung. Namun, hati-hati! Salah sedikit bisa bikin tampilan berantakan seperti pengalaman saya dulu. Pastikan kamu punya backup atau catatan perubahanmu.
  5. Salah satu trik adalah menghapus atau menyembunyikan elemen blog seperti "Recent Posts", "Categories", atau "Comments" melalui pengaturan tata letak (Layout) atau langsung di HTML tema.

4. Atur Tampilan Beranda (Homepage)

Secara default, Blogger akan menampilkan postingan terbaru di beranda. Untuk website statis, kita ingin beranda menampilkan salah satu halaman statis yang sudah kamu buat:

  1. Di Dashboard Blogger, klik Layout.
  2. Cari bagian yang mengatur Blog Posts (biasanya di bagian "Main"). Klik ikon edit (pensil).
  3. Di jendela pengaturan, kamu bisa menyembunyikan tampilan post.
  4. Untuk menampilkan halaman statismu sebagai beranda, kamu bisa menambahkan gadget Pages ke tata letakmu, lalu mengaturnya agar hanya menampilkan halaman "Beranda" atau halaman yang ingin kamu jadikan landing page. Atau, jika kamu berani, edit HTML tema untuk mengarahkan pengunjung ke halaman statis spesifik sebagai beranda.

5. (Opsional) Menggunakan Custom Domain

Ini juga sama seperti GitHub Pages:

  1. Beli domain kustom.
  2. Di Dashboard Blogger, klik Settings.
  3. Gulir ke bawah ke bagian Publishing.
  4. Klik Custom domain.
  5. Masukkan domain kustommu (misalnya www.punyaku.com) dan ikuti instruksi yang diberikan Blogger untuk mengonfigurasi CNAME record di penyedia domainmu.
  6. Setelah konfigurasi DNS selesai, websitemu akan tayang di domain kustommu.

Pilih Mana: GitHub Pages atau Blogger?

Ibaratnya, GitHub Pages itu seperti bengkel khusus bagi para insinyur yang ingin memamerkan prototipe robot mereka. Ada banyak alat canggih (Git, version control) dan hasil akhirnya (website) rapi sesuai spesifikasi. Sementara itu, Blogger seperti sebuah galeri seni yang dulunya dirancang untuk pameran lukisan harian, tapi kamu bisa menyulapnya jadi pameran patung (website statis) dengan sedikit sentuhan dekorasi. Keduanya gratis, tapi punya karakter yang berbeda.

Jadi, kapan menggunakan yang mana?

  • Gunakan GitHub Pages jika:
    • Kamu seorang developer atau ingin belajar alur kerja Git dan deployment.
    • Proyekmu adalah website statis murni (HTML, CSS, JavaScript) seperti portofolio, dokumentasi, landing page, atau proyek front-end sederhana.
    • Kamu ingin kontrol penuh atas kode sumbermu dan fleksibilitas kustomisasi yang tinggi.
    • Kamu ingin menggunakan static site generator seperti Jekyll, Hugo, atau Eleventy.
    • Kamu nyaman bekerja dengan command line dan editor kode.
  • Gunakan Blogger jika:
    • Kamu ingin sesuatu yang sangat mudah dan cepat untuk di-setup, tanpa perlu banyak berurusan dengan kode (kecuali jika kamu mau kustomisasi tema).
    • Proyekmu adalah blog pribadi yang juga memiliki beberapa halaman statis.
    • Kamu tidak memiliki pengalaman teknis yang mendalam dan ingin platform yang sangat ramah pengguna.
    • Kamu ingin memanfaatkan fitur-fitur blog (komentar, kategori, RSS feed) sambil punya halaman statis.

Intinya, GitHub Pages lebih cocok untuk mereka yang datang dari latar belakang teknis dan menginginkan kontrol serta integrasi Git. Blogger lebih cocok untuk non-developer atau mereka yang ingin solusi cepat dan sederhana dengan kemampuan blog bawaan.

Melampaui Gratis: Kapan Saatnya Upgrade?

Kedua platform gratis ini adalah permulaan yang fantastis. Mereka adalah "gerobak dorong" atau "lapak jualan sederhana" untuk memulai bisnismu. Tapi, seperti sebuah bisnis yang berkembang, suatu saat kamu mungkin perlu "membuka toko" atau bahkan "membangun mal" sendiri. Kapan saatnya? Ketika:

  • Butuh Fitur Dinamis: Aplikasi butuh database (misalnya untuk menyimpan data pengguna, produk, atau postingan yang kompleks), otentikasi, atau server-side logic yang lebih rumit (misalnya, aplikasi e-commerce, media sosial, atau manajemen konten). Ini seperti kamu butuh dapur profesional untuk restoran, bukan hanya kompor portabel.
  • Performa dan Skalabilitas Tinggi: Website atau aplikasimu mulai menerima jutaan kunjungan, dan kamu butuh performa serta skalabilitas yang lebih baik dari hosting gratis.
  • Kontrol Penuh Server: Kamu butuh menginstal software atau konfigurasi server khusus.
  • Keamanan Lanjut: Kamu butuh lapisan keamanan yang lebih tinggi dan kustomisasi konfigurasi server.
  • Dukungan Profesional: Kamu butuh layanan dukungan pelanggan yang responsif dan terdedikasi.

Saat kebutuhan ini muncul, kamu bisa mempertimbangkan penyedia hosting berbayar seperti Vercel, Netlify (untuk statis/serverless), Heroku, DigitalOcean, AWS, Google Cloud, atau Azure (untuk aplikasi kompleks). Tapi, jangan buru-buru! Mulailah dengan yang gratis, belajar, dan tumbuh bersama proyekmu.

Penutup: Angkat Jangkar, Berlayar ke Dunia Maya!

Melihat kembali masa-masa frustrasi dengan biaya hosting, saya bersyukur ada platform seperti GitHub Pages dan Blogger. Mereka telah membuka pintu bagi banyak developer (termasuk saya!) untuk tidak takut berkarya dan memamerkan hasil kerjanya. Jadi, jangan biarkan masalah biaya menghambatmu. Kamu punya ide, kamu punya skill (atau akan segera punya!), sekarang kamu punya "jurus sakti" untuk membuat karyamu terlihat oleh dunia.

Entah kamu ingin membangun portofolio yang bersih dan terintegrasi dengan Git, atau kamu sekadar ingin membuat halaman web sederhana dengan cepat tanpa perlu tahu banyak soal teknis, GitHub Pages dan Blogger adalah sahabat terbaikmu. Keduanya adalah bukti bahwa di era digital ini, inovasi dan kreativitas tidak harus dibatasi oleh tebalnya dompet. Jadi, tunggu apa lagi? Ambil laptopmu, ketikkan barisan kode pertama, dan mari kita angkat jangkar, berlayar ke dunia maya!

Blogger GitHub Web Development