Menguak Rahasia Hosting Gratis: Website Impianmu di GitHub Pages & Blogger Tanpa Keluar Rupiah

PintarApp • Juni 30, 2026
Menguak Rahasia Hosting Gratis: Website Impianmu di GitHub Pages & Blogger Tanpa Keluar Rupiah
Ingat tidak, waktu pertama kali saya belajar ngoding, sering banget terjebak di momen "wah, kodinganku keren nih, tapi gimana cara pamerinnya?". Rasanya kayak udah berhasil merakit mesin mobil impian di garasi belakang, tapi bingung gimana caranya biar mobil itu bisa melaju di jalanan umum dan dilihat banyak orang. Mau sewa bengkel (hosting) permanen, kok ya masih mahasiswa, kantong tipis. Ujung-ujungnya, proyek cuma jadi tumpukan file HTML, CSS, dan JavaScript di laptop. Sedih, bukan? Tapi tenang, para kawan programmer dan calon kreator dunia maya! Di era digital ini, ada banyak jalan menuju Roma, dan banyak juga jalan menuju hosting gratis. Dua di antaranya yang paling populer, powerful, dan ramah kantong (alias gratis total) adalah GitHub Pages dan Blogger. Keduanya punya karakteristik unik, mirip dua jenis perkakas di bengkel kita: ada obeng khusus untuk mur kecil, ada kunci pas untuk baut besar. Mari kita bongkar tuntas keduanya!

Mengapa Hosting Gratis Itu Penting?

Sebelum kita menyelam lebih jauh, mari kita pahami dulu mengapa opsi gratis ini sangat berharga. Bagi pemula, ini adalah gerbang emas untuk:

  • Belajar dan Eksperimen: Tanpa beban biaya, kamu bisa coba-coba teknologi baru, membuat portofolio, atau bahkan meluncurkan MVP (Minimum Viable Product) pertama tanpa takut rugi.
  • Portofolio Online: Proyek-proyek yang sudah live menunjukkan keseriusan dan skillmu kepada rekruter atau klien potensial. Ini jauh lebih berdampak daripada sekadar deskripsi di CV.
  • Membangun Kehadiran Online: Memiliki website atau blog sendiri adalah fondasi penting untuk personal branding atau bisnis kecil.

GitHub Pages: Showroom Digital Para Pengembang

GitHub Pages itu ibarat showroom mobil mewah khusus untuk para mekanik dan insinyur. Kamu punya proyek kodingan (mobil), lalu kamu parkir di showroom ini, dan semua orang bisa melihatnya, bahkan sampai "membuka kap mesinnya" (melihat kodenya) kalau memang kamu izinkan. Ini adalah solusi sempurna untuk website statis, seperti portofolio, dokumentasi proyek, atau bahkan blog sederhana berbasis Markdown.

Bagaimana Cara Kerja GitHub Pages?

Singkatnya, GitHub Pages bekerja dengan mengubah file-file di repositori GitHub-mu menjadi situs web yang dapat diakses publik. File index.html-mu akan menjadi halaman utama. Ini sangat cocok untuk situs yang tidak memerlukan database atau server-side processing yang kompleks.

Langkah-langkah Hosting di GitHub Pages:

  • Siapkan Repositori: Pertama, kamu perlu punya akun GitHub (tentu saja gratis!). Lalu, buat repositori baru. Nama repositori ini penting. Jika ini untuk situs pribadi, formatnya harus username.github.io (misal: programmercakep.github.io). Jika untuk proyek, bisa nama apa saja (misal: nama-proyek), dan nanti situsnya akan beralamat username.github.io/nama-proyek.
  • Upload Kode Anda: Masukkan semua file website statismu (HTML, CSS, JavaScript, gambar) ke dalam repositori ini. Pastikan ada file index.html di root folder, karena ini adalah halaman yang akan pertama kali dimuat. Kamu bisa melakukannya dengan git push dari lokal atau langsung upload lewat antarmuka web GitHub.
  • Aktifkan GitHub Pages: Setelah itu, masuk ke pengaturan (Settings) repositori tersebut. Gulir ke bawah hingga menemukan bagian Pages. Pilih branch utama (biasanya main atau master) sebagai sumber (source) untuk GitHub Pages, lalu klik Save.
  • Voila! Situs Anda Live: Tunggu beberapa saat (biasanya kurang dari 5 menit), dan GitHub akan memublikasikan situsmu. Alamatnya akan muncul di bagian Pages settings tadi. Kamu sudah punya website di internet!

Contoh Struktur File Sederhana:


my-awesome-portfolio/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── images/
└── profile.jpg

Blogger: Kios Mini Pribadi yang Siap Pakai

Kalau GitHub Pages itu showroom, maka Blogger adalah kios mini serbaguna. Kamu bisa langsung jualan (bikin konten), pajang barang daganganmu (gambar, teks), dan bahkan sedikit mengubah tampilan kiosmu tanpa perlu pusing soal konstruksi bangunan. Blogger lebih dikenal untuk blog, tapi dia juga bisa jadi "rumah" yang baik untuk website statis sederhana, terutama jika kamu ingin kemudahan manajemen dan integrasi dengan ekosistem Google lainnya.

Bagaimana Cara Kerja Blogger?

Blogger, yang dimiliki oleh Google, menyediakan platform lengkap untuk membuat blog. Kamu bisa menulis postingan, mengelola komentar, dan bahkan mengubah template desainnya. Uniknya, di balik layar, setiap blog Blogger sebenarnya adalah kumpulan file statis yang di-generate dan di-serve oleh Google. Kita bisa memanfaatkan fitur "Template" untuk menyisipkan kode website statis kita.

Langkah-langkah Hosting di Blogger:

  • Buat Blog Baru: Masuk ke blogger.com dengan akun Google-mu. Buat blog baru, berikan judul, dan pilih alamat URL (misal: portfoliocakep.blogspot.com).
  • Masuk ke Tema (Theme): Setelah blog terbentuk, masuk ke menu Theme atau Tema di dashboard Blogger.
  • Edit HTML: Di sini, kamu akan melihat opsi untuk "Edit HTML". Ini adalah gerbang kita untuk menyuntikkan kode website.
  • Suntikkan Kode HTML/CSS/JS: Hapus semua kode yang ada di sana (atau sebagian, tergantung seberapa banyak yang ingin kamu ganti) dan tempelkan seluruh kode HTML website statismu, termasuk CSS dan JavaScript yang mungkin kamu letakkan di dalam tag '); doc.write('atOptions={"key":"'+k+'","format":"iframe","height":'+h+',"width":'+w+',"params":{}};'); doc.write(''); doc.write(''); doc.close(); } observer.unobserve(el); } }); }, { rootMargin: '200px' }); document.querySelectorAll('.adsterra-slot').forEach(slot => adObserver.observe(slot)); } }); // === MOBILE TOP AD FUNCTIONS === function minimizeMobileTopAd() { const ad = document.getElementById('mobile-top-ad'); const btn = document.getElementById('show-mobile-top-ad-btn'); if(ad && btn) { ad.style.transform = 'translateY(-100%)'; setTimeout(() => { btn.classList.remove('hidden'); }, 300); } } function maximizeMobileTopAd() { const ad = document.getElementById('mobile-top-ad'); const btn = document.getElementById('show-mobile-top-ad-btn'); if(ad && btn) { ad.style.transform = 'translateY(0)'; btn.classList.add('hidden'); } } // === MOBILE BOTTOM STICKY AD FUNCTIONS === function toggleMobileBottomAd() { const wrapper = document.getElementById('mobile-bottom-ad-wrapper'); const icon = document.getElementById('bottom-ad-icon'); // Jika posisinya di 0 (tampil), kita dorong ke bawah sejauh tingginya content (50px) + border (1px) = 51px if(wrapper.style.transform === 'translateY(0px)' || wrapper.style.transform === '') { wrapper.style.transform = 'translateY(51px)'; icon.style.transform = 'rotate(180deg)'; // Panah naik } else { wrapper.style.transform = 'translateY(0px)'; icon.style.transform = 'rotate(0deg)'; // Panah turun } } // === HOMEPAGE FETCHERS === function fetchHomeModules() { // Fetch Sub Category 1 (List Style - Ex: Blogger) fetch('/feeds/posts/default/-/Blogger?alt=json&max-results=3') .then(res => res.json()) .then(data => { let html = ''; if(data.feed && data.feed.entry) { data.feed.entry.forEach(post => { const title = post.title.$t; let link = post.link.find(l => l.rel === 'alternate')?.href || '#'; html += ` ${title} `; }); } else { html = 'No scripts found.'; } let container = document.getElementById('cat-blogger'); if(container) container.innerHTML = html; }).catch(() => {}); // Fetch Sub Category 2 (Grid Box Style - Ex: Tools) fetch('/feeds/posts/default/-/Tools?alt=json&max-results=4') .then(res => res.json()) .then(data => { let html = ''; if(data.feed && data.feed.entry) { data.feed.entry.forEach(post => { const title = post.title.$t; let link = post.link.find(l => l.rel === 'alternate')?.href || '#'; let snip = post.summary ? post.summary.$t : (post.content ? post.content.$t.replace(/<[^>]+>/g, '').substring(0, 60) + '...' : ''); html += `

    ${title}

    ${snip}

    `; }); } else { html = 'No data found.'; } let container = document.getElementById('cat-tools'); if(container) container.innerHTML = html; }).catch(() => {}); } // Utility to extract images (incl. ImgBB to Photon) function extractThumb(post, w, h) { let thumbUrl = `https://via.placeholder.com/${w}x${h}/f3f4f6/9ca3af?text=[code]`; if (document.documentElement.classList.contains('dark')) { thumbUrl = `https://via.placeholder.com/${w}x${h}/161b22/30363d?text=[code]`; } if (post.media$thumbnail && post.media$thumbnail.url) { thumbUrl = post.media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/, `/w${w}-h${h}-c`); } else if (post.content && post.content.$t) { const imgMatch = post.content.$t.match(/]+src=['"]([^'"]+)['"]/i); if (imgMatch && imgMatch[1]) { thumbUrl = imgMatch[1]; if (thumbUrl.includes('ibb.co')) { let cleanUrl = thumbUrl.replace(/^https?:\/\//, ''); thumbUrl = `https://i0.wp.com/${cleanUrl}?resize=${w},${h}&quality=80&strip=all`; } } } return thumbUrl; } //]]>
    šŸ‘‹ Punya pertanyaan? Tanya AI di sini... ×