Strategi Hosting Gratis ala Programmer Kreatif: GitHub Pages dan Blogger untuk Projekmu!

PintarApp • Mei 25, 2026
Strategi Hosting Gratis ala Programmer Kreatif: GitHub Pages dan Blogger untuk Projekmu!

Dulu waktu pertama kali terjun ke dunia ngoding, saya ingat banget rasanya kayak lagi mau bikin pameran seni tapi nggak punya galeri. Sudah capek-capek bikin situs portofolio pakai HTML, CSS, JavaScript yang keren, eh pas mau dipamerin online, bingung setengah mati. Ada istilah 'server', 'VPS', 'cPanel' yang rasanya kayak bahasa alien. Ujung-ujungnya, saya pernah nyoba bayar hosting bulanan yang harganya lumayan bikin dompet tipis, padahal situsnya cuma berisi beberapa halaman statis. Rasanya nyesek banget, deh! Untungnya, sekarang ada cara-cara cerdas untuk 'memamerkan' karya kita secara gratis dan tetap terlihat profesional. Bayangkan Anda seorang koki handal yang sudah jago meracik resep-resep masakan unik (kode website/aplikasi Anda). Anda sudah punya menu andalan, bahan-bahan segar, dan resep rahasia di buku catatan (repositori kode Anda). Tapi, masalahnya, Anda butuh tempat makan atau restoran (server hosting) untuk menyajikan hidangan lezat ini kepada para pelanggan (pengguna internet). Sewa restoran mahal, apalagi kalau baru mulai. Nah, GitHub Pages dan Blogger ini seperti "food truck" atau "lapak kuliner" gratis yang bisa Anda pakai tanpa harus mikirin biaya sewa tempat!

Di artikel ini, kita akan bedah tuntas dua platform jagoan para pengembang (dan non-pengembang) yang ingin meluncurkan website atau aplikasi statis mereka ke dunia maya tanpa harus merogoh kocek. Mari kita selami GitHub Pages dan Blogger!

GitHub Pages: Garasi Digital untuk Projekmu

GitHub Pages ini ibarat garasi digital pribadi Anda di GitHub yang sekaligus berfungsi sebagai showroom gratis. Anda sudah punya mobil impian (kode website Anda) yang Anda rakit sendiri di garasi GitHub (repositori Git). Nah, dengan GitHub Pages, Anda bisa langsung memarkir mobil itu di depan garasi dan membiarkan semua orang melihatnya tanpa perlu bayar sewa lahan parkir! Ini adalah layanan hosting situs statis yang disediakan oleh GitHub langsung dari repositori Git Anda. Cocok banget untuk portofolio, dokumentasi proyek, blog sederhana, atau bahkan aplikasi SPA (Single Page Application) berbasis JavaScript.

Bagaimana Cara Membangun Showroom Anda dengan GitHub Pages?

  • Siapkan 'Mobil' Anda (Kode Web): Pertama, pastikan kode website Anda (HTML, CSS, JavaScript, gambar) sudah siap. Ini adalah bahan baku utama Anda.
  • Bangun Garasi (Buat Repositori): Buat repositori baru di GitHub. Anggap saja ini adalah fondasi garasi Anda. Namanya bisa apa saja, tapi jika ingin situs pribadi dengan format username.github.io, maka nama repositorinya harus sama persis dengan username GitHub Anda (misalnya, andri.github.io).
  • Parkir Mobil Anda (Push Kode): Unggah atau "push" semua kode website Anda ke repositori tersebut. Pastikan file index.html ada di root direktori repositori Anda, karena ini akan menjadi halaman utama yang pertama kali dilihat pengunjung.
  • Buka Showroom (Aktifkan GitHub Pages): Pergi ke pengaturan repositori Anda di GitHub. Cari bagian "Pages" atau "GitHub Pages". Di sana, Anda tinggal pilih branch mana yang ingin Anda gunakan sebagai sumber Pages (biasanya main atau master) dan folder mana yang berisi kode situs Anda (umumnya / (root)). Klik simpan, dan dalam beberapa menit, situs Anda akan live! Anda akan mendapatkan URL seperti https://username.github.io/namarepoanda atau https://username.github.io jika Anda menggunakan repositori username.github.io.
  • Opsi Canggih (Custom Domain): Jika Anda ingin terlihat lebih profesional, Anda bisa 'membuat plat nomor sendiri' dengan custom domain (misalnya, www.projekkeren.com) dan mengarahkannya ke GitHub Pages Anda. Ini cuma butuh sedikit konfigurasi DNS tambahan, mirip seperti menyetel GPS agar pengunjung bisa langsung menuju showroom Anda dengan nama yang familiar.

Kelebihan: Kontrol penuh atas kode, integrasi dengan Git (versi kontrol dan kolaborasi), cocok untuk pengembang, dan benar-benar gratis.

Kekurangan: Hanya mendukung situs statis (tidak bisa database, PHP, Python backend server-side), ada batasan ukuran file.

Blogger: Papan Buletin Digital Serba Guna

Blogger, layanan dari Google, ini lebih mirip papan buletin digital gratis di pusat kota. Awalnya memang dirancang untuk blog, tapi siapa sangka, papan buletin ini ternyata cukup fleksibel untuk Anda tempeli poster-poster promosi (situs statis) atau bahkan komik strip (aplikasi web sederhana) di sana! Sangat intuitif dan ramah bagi mereka yang kurang familiar dengan seluk-beluk koding Git.

Bagaimana Cara Memasang Poster Anda di Papan Buletin Blogger?

  • Buat Papan Buletin (Buat Blog): Masuk ke Blogger dengan akun Google Anda dan buat blog baru. Beri nama dan pilih URL blog (misalnya, projekku.blogspot.com).
  • Siapkan Poster Anda (Kode HTML): Pastikan Anda punya satu file HTML utama yang berisi semua konten dan struktur situs Anda. Jika ada CSS/JS terpisah, Anda bisa menyisipkannya langsung ke dalam file HTML tersebut menggunakan 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... ×