Gratis Itu Nyata: Memamerkan Karya Digitalmu dengan GitHub Pages dan Blogger

PintarApp • Oktober 16, 2026
Gratis Itu Nyata: Memamerkan Karya Digitalmu dengan GitHub Pages dan Blogger

Pernahkah kamu merasa panik saat melihat tagihan hosting bulanan yang terus membengkak, padahal website atau aplikasi sederhana buatanmu itu belum menghasilkan sepeser pun? Atau mungkin kamu seorang pemula yang semangatnya meluap-luap ingin memamerkan hasil kodingan pertama, tapi terbentur biaya domain dan server? Saya ingat sekali, dulu di awal-awal ngoding, saya pernah coba deploy portofolio statis saya ke VPS seharga kopi satu gelas per bulan. Niatnya hemat, eh malah jadi repot sendiri urusan konfigurasi Nginx, update OS, sampai akhirnya menyerah karena ada masalah permission yang bikin pusing tujuh keliling. Rasanya kayak mau nyalain senter tapi harus rakit pembangkit listrik sendiri! Tapi tenang, kawan. Dunia digital ini punya banyak keajaiban, dan salah satunya adalah kemampuan untuk memamerkan karya digitalmu secara gratis, tanpa harus jadi ahli sistem administrator atau membayar sewa lahan.

Di artikel ini, kita akan membongkar dua jurus ampuh untuk hosting website atau aplikasi statis-mu tanpa biaya sepeser pun: menggunakan GitHub Pages dan Blogger. Ini bukan sekadar teori dari dokumentasi, tapi lebih seperti resep rahasia dari dapur seorang developer yang sering ngulik dan ingin kamu juga merasakan manisnya kebebasan finansial dalam berkreasi.

GitHub Pages: Sang Penjaga Portofolio Digital

Bayangkan GitHub itu seperti bengkel otomotif super canggih tempat para mekanik (developer) berkumpul. Di sana, kita menyimpan semua blueprint mobil (kode), melakukan modifikasi (commit), dan berkolaborasi (pull request). Nah, GitHub Pages ini ibarat jendela etalase di depan bengkel itu. Kamu bisa menata rapi mobil-mobil hasil rakitanmu (website/aplikasi statis) agar bisa dilihat semua orang, tanpa perlu membayar sewa etalase!

Kenapa GitHub Pages itu Keren?

  • Gratis Total: Tidak ada biaya hosting, selamanya. Cocok untuk portofolio, dokumentasi proyek, blog statis, atau situs landing page sederhana.
  • Versi Terkontrol: Karena berbasis Git, semua perubahanmu tercatat rapi. Jika ada kesalahan, kamu bisa dengan mudah "memundurkan" waktu ke versi sebelumnya. Ini seperti punya tombol undo raksasa untuk website-mu.
  • Integrasi Penuh: Jika proyekmu sudah ada di GitHub, mengaktifkan GitHub Pages itu semudah membalik telapak tangan. Tinggal atur di pengaturan, dan boom! Website-mu langsung online.
  • Custom Domain: Mau pakai domain sendiri (misalnya www.namakamu.com)? Bisa banget! GitHub Pages mendukung konfigurasi custom domain.

Cara Mengaktifkan Jendela Etalase-mu (GitHub Pages)

Prosesnya tidak serumit merakit mesin turbo, kok. Ikuti langkah-langkah simpel ini:

  1. Buat Repository Baru: Masuk ke akun GitHub-mu, lalu buat repository baru.
    • Untuk situs pribadi/organisasi (misalnya https://namakamu.github.io), beri nama username.github.io (ganti username dengan GitHub username-mu).
    • Untuk situs proyek (misalnya https://namakamu.github.io/nama-proyek), beri nama nama-proyek saja.
  2. Unggah File Website-mu: Ini bagian krusial. Pastikan file HTML, CSS, JavaScript, dan aset lainnya (gambar, font) ada di root folder repository-mu. File utamanya harus bernama index.html. Kamu bisa mengunggahnya secara manual lewat antarmuka GitHub atau menggunakan perintah Git di terminal.
  3. Aktifkan GitHub Pages:
    • Buka halaman repository-mu.
    • Klik tab Settings.
    • Di sidebar kiri, cari dan klik Pages.
    • Pada bagian "Source", pilih main (atau master, tergantung nama cabang utamamu) sebagai cabang sumber, lalu pilih /root sebagai folder.
    • Klik Save.
  4. Tunggu dan Voila!: GitHub akan memprosesnya. Biasanya hanya butuh beberapa menit. Setelah itu, kamu akan melihat URL situsmu di bagian "GitHub Pages". Contohnya seperti ini:

Selamat! Situs Anda telah diterbitkan di https://username.github.io/

Simpel, kan? Seperti menyajikan kue buatan sendiri di etalase toko. Semua orang bisa melihat dan mencicipi karyamu.

Contoh Struktur File Sederhana:


my-website-repo/
├── index.html
├── style.css
└── script.js

Isi index.html (minimalis):


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portofolio Kerenku</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Halo Dunia! Ini Portofolio Pertamaku</h1>
<p>Dibuat dengan GitHub Pages, tanpa biaya!</p>
<script src="script.js"></script>
</body>
</html>

Blogger: Si Tukang Cerita Berdaya Guna

Blogger, atau dulu yang kita kenal Blogspot, ini seperti papan pengumuman komunitas di sudut kota. Biasanya dipakai untuk menempelkan berita, cerita, atau informasi penting. Tapi siapa bilang papan pengumuman hanya untuk teks? Kamu bisa juga menempelkan poster desain grafis keren (website/aplikasi statis) di sana! Blogger memang lebih dikenal sebagai platform blog, tapi dengan sedikit kreativitas, kita bisa "menyulapnya" jadi tempat hosting situs statis juga.

Kenapa Blogger Patut Dicoba?

  • Gratis dan Mudah Digunakan: Langsung terintegrasi dengan akun Google-mu. Antarmuka yang intuitif membuat siapa pun bisa menggunakannya, bahkan yang alergi dengan terminal.
  • Sangat Cocok untuk Konten: Jika situsmu ada unsur blog atau perlu sistem manajemen konten (CMS) yang sederhana, Blogger adalah pilihan terbaik.
  • Bisa Hosting HTML/CSS/JS: Dengan sedikit trik, kita bisa memasukkan kode HTML, CSS, dan JavaScript kita langsung ke dalam halaman atau postingan Blogger, atau bahkan mengubah tema dasarnya.
  • Custom Domain: Sama seperti GitHub Pages, Blogger juga mendukung penggunaan custom domain.

Cara Mengubah Papan Pengumumanmu Menjadi Galeri Digital (Blogger)

Ini mungkin sedikit out-of-the-box, tapi efektif untuk situs statis sederhana atau landing page yang butuh CMS:

  1. Buat Blog Baru: Kunjungi blogger.com, masuk dengan akun Google-mu, lalu buat blog baru. Beri nama dan alamat blog sesuai keinginanmu (misalnya namakaryamu.blogspot.com).
  2. Buat Halaman Baru (untuk Website Statis):
    • Di dashboard Blogger, pilih menu Laman (Pages).
    • Klik Laman Baru (New Page).
    • Pilih mode tampilan HTML (bukan Compose).
  3. Tempelkan Kode Website-mu: Di sini letak keajaibannya. Salin seluruh kode HTML, CSS, dan JavaScript dari file index.html-mu (termasuk tag <style> dan <script> jika kamu menuliskannya langsung di HTML) dan tempelkan ke dalam editor HTML laman Blogger tersebut. 
    
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aplikasi Sederhanaku</title>
<!-- Gaya CSS langsung di sini -->
<style>
body { font-family: sans-serif; background-color: #f0f0f0; text-align: center; padding: 50px; }
h1 { color: #333; }
button { background-color: #007bff; color: white; padding: 10px 20px; border: none; cursor: pointer; }
</style>
</head>
<body>
<h1>Aplikasi Hitung Sederhana</h1>
<p>Klik tombol untuk menghitung.</p>
<button onclick="hitung()">Hitung Sekarang!</button>
<p id="hasil"></p>
<!-- Skrip JS langsung di sini -->
<script>
function hitung() {
let angka1 = 5;
let angka2 = 7;
let total = angka1 + angka2;
document.getElementById('hasil').innerText = 'Hasilnya adalah: ' + total;
}
</script>
</body>
</html>

    Catatan Penting: Untuk aplikasi yang lebih kompleks dengan banyak file JS/CSS terpisah, kamu perlu mengintegrasikannya langsung ke dalam HTML atau mencari cara untuk mengunggahnya ke tempat lain (misalnya Google Drive yang di-share publik) dan menautkannya. Ini agak hacky, tapi mungkin jika kamu hanya punya satu file HTML/CSS/JS, ini sangat efektif.

  4. Terbitkan Laman: Beri judul lamannya, lalu klik Terbitkan. Situs statismu kini ada di URL laman tersebut (misalnya namablogmu.blogspot.com/p/namalamankerenmu.html).
  5. Opsi Lanjut (Mengubah Tema): Jika kamu ingin situsmu tampil "murni" tanpa elemen blog Blogger lainnya, kamu bisa mengedit tema HTML Blogger secara keseluruhan dan mengganti isinya dengan kode website-mu. Ini lebih cocok untuk yang sudah terbiasa dengan struktur HTML Blogger.

Kapan Menggunakan yang Mana?

Memilih antara GitHub Pages dan Blogger itu seperti memilih alat yang tepat di bengkel. Keduanya gratis, tapi punya spesialisasi:

  • Gunakan GitHub Pages Jika:
    • Kamu adalah seorang developer atau memiliki proyek yang kodenya sudah ada di GitHub.
    • Situsmu murni statis (HTML, CSS, JavaScript sederhana), tanpa database atau backend yang kompleks.
    • Kamu ingin portofolio teknis, dokumentasi proyek, atau situs landing page.
    • Kamu nyaman bekerja dengan Git dan terminal (meskipun bisa juga via antarmuka GitHub).
  • Gunakan Blogger Jika:
    • Kamu butuh platform yang sangat mudah digunakan, terutama jika kamu lebih suka antarmuka grafis daripada baris perintah.
    • Situsmu punya komponen blog atau artikel yang rutin di-update.
    • Kamu ingin membuat situs informasi, blog pribadi, atau landing page sederhana yang bisa di-edit dengan cepat.
    • Integrasi dengan ekosistem Google menjadi nilai tambah bagimu.

Tips Tambahan agar Karyamu Bersinar

  • SEO Friendly: Meskipun gratis, jangan lupakan SEO. Pastikan judul halaman, meta deskripsi, dan penggunaan heading (H1, H2, dll.) sudah optimal.
  • Responsif: Pastikan website atau aplikasimu terlihat bagus di semua perangkat (ponsel, tablet, desktop).
  • Gunakan Custom Domain: Ini akan membuat situsmu terlihat lebih profesional dan mudah diingat. Keduanya gratis untuk di-host, tapi kamu perlu membeli domainnya sendiri (biasanya sekitar Rp100.000-Rp150.000 per tahun).
  • Kualitas Konten: Secanggih apapun platformnya, kontenlah rajanya. Sajikan informasi yang bermanfaat, desain yang menarik, dan pengalaman pengguna yang nyaman.

Penutup: Bebaskan Kreativitasmu!

Ingat cerita awal tentang tagihan hosting yang bikin pusing? Dengan GitHub Pages dan Blogger, kamu bisa buang jauh-jauh kekhawatiran itu. Ini adalah dua platform yang memungkinkanmu berkreasi tanpa batas finansial, seolah-olah kamu punya kanvas digital tak terbatas dan kuas ajaib yang tak pernah habis tintanya.

Jadi, tunggu apa lagi? Jangan biarkan ide-ide brilianmu hanya tersimpan di folder lokal komputer. Sudah saatnya memamerkan "mobil" hasil rakitanmu di etalase, atau menempelkan "poster" karyamu di papan pengumuman digital. Mulailah, eksplorasi, dan buatlah jejak digitalmu sendiri. Karena di dunia pemrograman, terkadang alat paling sederhana justru bisa menciptakan karya yang paling luar biasa.

Blogger GitHub Web Development