Dari Ngoprek Lokal ke Global Gratis: Jurus Jitu GitHub Pages dan Blogger untuk Webmu!

ikramlink • Maret 28, 2026
Dari Ngoprek Lokal ke Global Gratis: Jurus Jitu GitHub Pages dan Blogger untuk Webmu!

Pernah nggak sih kamu merasa seperti seorang koki handal yang sudah meracik resep masakan paling lezat di dunia, tapi nggak punya dapur atau meja makan buat menyajikannya ke tamu? Rasanya campur aduk antara bangga karena karyamu sudah jadi, tapi frustrasi karena nggak bisa dipamerkan. Nah, analogi itu pas banget menggambarkan perasaan kita para developer pemula (atau bahkan senior yang lagi irit) saat berhasil bikin sebuah website atau aplikasi statis keren, tapi bingung gimana cara "menyajikan" atau menghosting-nya ke internet. Dulu, saya ingat banget masa-masa awal ngoding, pas lagi semangat-semangatnya bikin aplikasi kalkulator pakai JavaScript yang tampilannya cuma bisa nongol di browser lokal. Waktu itu mikirnya, "Wah, ini sih udah siap go-public!" Eh, pas cari tahu biaya hosting, langsung lemes. Domain bayar, server bayar, dan tiba-tiba dompet terasa lebih tipis dari layar HP. Rasanya kayak udah berhasil merakit mobil balap super cepat, tapi nggak punya sirkuit buat ngegas!

Tapi tenang, zaman sudah berubah! Sekarang ada banyak cara "mengaspalkan" karyamu ke jalanan internet raya tanpa harus merogoh kocek dalam-dalam. Bahkan, beberapa platform besar rela "meminjamkan" sedikit ruang mereka untuk proyek-proyek personal kita, gratis! Hari ini, kita akan membongkar tuntas dua senjata rahasia yang paling sering saya pakai dan rekomendasikan: GitHub Pages dan Blogger. Keduanya, jika dipadukan dengan cerdas, bisa jadi solusi hosting gratis yang ampuh banget buat website statis, portfolio, landing page, bahkan aplikasi single-page sederhana.

Kenapa Harus Gratisan? Lebih dari Sekadar Hemat!

Mungkin ada yang bertanya, "Kenapa sih harus pakai yang gratisan? Kan sekarang banyak hosting murah?" Betul, banyak. Tapi, menggunakan layanan gratisan itu punya nilai plus yang jauh lebih dari sekadar hemat uang. Ini adalah tentang:

  • Arena Latihan Tanpa Batas: Ibarat bengkel otomotif, kamu butuh tempat buat ngoprek tanpa takut merusak. Dengan layanan gratis, kamu bisa bereksperimen, mencoba teknologi baru, atau bahkan bikin proyek yang mungkin nggak akan pernah selesai tanpa beban biaya.
  • Portofolio Digital yang Cepat Saji: Sebagai developer, portofolio adalah kunci. Bayangkan setiap proyek kecilmu bisa langsung punya URL sendiri yang bisa kamu bagikan ke calon employer atau klien. Ini jauh lebih efektif daripada cuma nunjukkin kode di GitHub repo atau demo lokal.
  • Validasi Ide Tanpa Risiko: Punya ide aplikasi atau website keren? Daripada langsung investasi besar, coba deh deploy versi MVP (Minimum Viable Product) ke platform gratis. Kamu bisa dapat feedback dari pengguna sungguhan tanpa mengeluarkan modal besar.
  • Belajar Integrasi dan DevOps Dasar: Proses deploy ke GitHub Pages misalnya, secara otomatis melatihmu memahami dasar-dasar Git, manajemen versi, bahkan sedikit tentang Continuous Integration/Continuous Deployment (CI/CD) yang penting banget di dunia kerja.

Jadi, bukan cuma soal gratis, tapi juga soal efisiensi, pembelajaran, dan percepatan karir. Sekarang, mari kita bedah satu per satu "senjata" kita.

Membedah Senjata Kita: GitHub Pages – Bengkel Kode Berubah Showroom

GitHub Pages itu ibarat kamu punya bengkel mobil super canggih (GitHub Repository) tempat kamu merakit semua komponen mobilmu (kode HTML, CSS, JavaScript). Nah, begitu mobilnya jadi, kamu butuh showroom buat memamerkannya ke dunia, kan? Itulah fungsi GitHub Pages. Dia akan mengambil kode statis yang kamu simpan di repositori GitHub-mu dan mengubahnya jadi website yang bisa diakses publik.

Apa yang bisa di-host di GitHub Pages?

  • Website Statis (HTML, CSS, JavaScript polos)
  • Proyek portofolio
  • Dokumentasi untuk proyek open-source
  • Blog yang dibuat dengan static site generator (seperti Jekyll, Hugo, Astro)
  • Aplikasi single-page (SPA) berbasis framework seperti React, Vue, Angular (setelah di-build menjadi file statis)

Langkah-Langkah Menggunakan GitHub Pages:

Prosesnya itu mirip banget kayak kamu mau pamer mobil balap rakitanmu. Pertama, mobilnya harus ada di garasi yang benar, terus kamu harus bilang ke pengelola garasi kalau mobil itu mau dipamerkan.

1. Siapkan Repository di GitHub

Jika kamu sudah punya akun GitHub, ini adalah langkah termudah. Kamu bisa membuat dua jenis GitHub Pages:

  • User/Organization Pages: Untuk website personal atau organisasi. Nama repositori harus persis `username.github.io` (ganti `username` dengan username GitHub-mu) atau `organization.github.io`. Kontennya akan langsung terbit di `https://username.github.io`.
  • Project Pages: Untuk proyek tertentu. Nama repositori bisa apa saja, misalnya `my-awesome-project`. Kontennya akan terbit di `https://username.github.io/my-awesome-project`.

Anggap saja kita mau membuat proyek baru. Buat repositori baru di GitHub. Contoh: `my-portfolio`.

2. Isi Konten Website-mu

Setelah repositori terbuat, sekarang saatnya memasukkan file website-mu ke sana. Yang paling penting adalah file `index.html` sebagai halaman utama. Kamu bisa langsung meng-upload-nya via web GitHub, atau yang lebih canggih dan direkomendasikan adalah menggunakan Git di terminalmu.

Contoh Struktur File Minimal:


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

Contoh Isi `index.html` Sederhana:


<!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 Portofolioku!</h1>
    <p>Selamat datang di website statis pertamaku yang di-host gratis pakai GitHub Pages.</p>
    <script src="script.js"></script>
</body>
</html>

Setelah file-file ini ada di lokalmu, push ke repositori GitHub-mu:


git init
git add .
git commit -m "Initial commit: Add portfolio files"
git branch -M main
git remote add origin https://github.com/username/my-portfolio.git
git push -u origin main

3. Aktifkan GitHub Pages

Ini bagian yang paling seru! Setelah kodemu ada di GitHub, sekarang saatnya "menyalakan" showroom-nya.

  1. Pergi ke repositori di GitHub (misalnya `my-portfolio`).
  2. Klik tab Settings.
  3. Di sidebar kiri, cari dan klik Pages.
  4. Di bagian "Build and deployment", pilih Deploy from a branch.
  5. Di bagian "Branch", pilih branch tempat kodemu berada (biasanya `main` atau `master`). Pastikan kamu memilih folder yang benar (`/root` jika `index.html` ada di root repositori, atau `/docs` jika ada di folder `docs`).
  6. Klik Save.

Selesai! GitHub akan memulai proses deployment. Tunggu beberapa menit, lalu kamu akan melihat URL website-mu di halaman yang sama (misalnya `https://username.github.io/my-portfolio`). Kadang-kadang, saat pertama kali deploy, muncul error 404. Jangan panik! Dulu saya pernah ngalamin, udah seneng banget berhasil nge-push, eh pas dibuka malah error. Ternyata saya lupa milih branch `main` atau folder `/root` di pengaturan Pages-nya. Cek lagi, pastikan setting-mu benar. Itu kayak lupa nyalain saklar lampu di showroom-mu!

4. (Opsional) Menggunakan Custom Domain

Kalau kamu ingin website-mu tampil lebih profesional dengan domain sendiri (misalnya `www.portofoliokerenku.com` bukan `username.github.io/my-portfolio`), GitHub Pages juga mendukung itu. Kamu perlu membeli domain terlebih dahulu dari registrar domain (seperti Namecheap, Godaddy, dsb.).

  1. Di repositori GitHub-mu, di root folder, buat file baru bernama `CNAME` (tanpa ekstensi).
  2. Isi file `CNAME` itu dengan domain kustom-mu (misalnya `www.portofoliokerenku.com`). Ingat, hanya nama domainnya saja, tidak perlu `http://` atau `https://`.
  3. Simpan dan push file `CNAME` ini ke repositori-mu.
  4. Pergi ke pengaturan domainmu di registrar (tempat kamu beli domain). Kamu perlu menambahkan `A record` dan `CNAME record` yang mengarah ke GitHub Pages.
    • Tambahkan `A record` untuk root domain (`@` atau `yourdomain.com`) ke IP address GitHub Pages (bisa dicari di dokumentasi GitHub, tapi umumnya `185.199.108.153`, `185.199.109.153`, `185.199.110.153`, `185.199.111.153`).
    • Tambahkan `CNAME record` untuk `www` (atau subdomain lainnya) yang mengarah ke `username.github.io` (untuk Project Pages, bisa ke `username.github.io`).
  5. Di pengaturan Pages di GitHub, masukkan domain kustommu di kolom "Custom domain" dan klik "Save". GitHub akan secara otomatis mengaktifkan HTTPS untuk domainmu.

Proses ini butuh waktu propagasi DNS, jadi jangan kaget kalau tidak langsung aktif. Ibaratnya, kamu baru saja daftar alamat baru untuk showroom-mu, perlu waktu bagi pihak pos untuk memperbarui peta mereka.

Mengapa Blogger? Lebih dari Sekadar Blog Biasa!

Oke, GitHub Pages sudah siap jadi showroom untuk aplikasi statis kita. Tapi bagaimana dengan Blogger? Bukankah itu platform untuk ngeblog doang?

Nah, di sinilah letak kreativitas kita sebagai developer. Blogger memang awalnya didesain untuk blog, dengan semua fitur CMS (Content Management System) seperti postingan, komentar, kategori, dan lainnya. Tapi, ada satu fitur Blogger yang sangat powerful dan seringkali kita manfaatkan: kemampuan untuk mengelola custom domain dengan sangat mudah dan gratis, bahkan untuk domain utama (apex domain) seperti `yourdomain.com` tanpa harus repot mengatur A record di registrar. Fitur inilah yang akan kita jadikan "gerbang" utama domain kita.

Analoginya begini: Jika GitHub Pages adalah showroom yang elegan tapi sedikit "tertutup" dalam hal pengaturan domain utama, Blogger itu seperti pos satpam atau meja resepsionis di sebuah gedung besar yang sudah punya alamat strategis (domain utama). Kamu bisa memanfaatkan meja resepsionis itu untuk mengarahkan pengunjung ke showroom-mu yang ada di lantai berbeda atau bahkan gedung sebelahnya. Dengan begitu, pengunjung cukup tahu satu alamat utama, dan resepsionisnya yang akan mengarahkan mereka.

Langkah-Langkah Menggunakan Blogger sebagai Gerbang Custom Domain:

Ingat, kita akan memakai Blogger bukan sebagai tempat ngeblog utama, tapi lebih ke arah "pengelola" domain utama kita yang akan mengarahkan ke website GitHub Pages.

1. Buat Blog di Blogger

  1. Pergi ke blogger.com.
  2. Login dengan akun Google-mu.
  3. Buat blog baru. Beri judul dan URL blog sementara (misalnya `gerbang-portofolio-ku.blogspot.com`). Ini tidak terlalu penting karena akan kita timpa dengan custom domain.

2. Atur Custom Domain di Blogger

Ini adalah bagian krusialnya, di mana Blogger akan "memegang" kendali atas domain kustommu.

  1. Di dashboard Blogger, pergi ke Settings.
  2. Scroll ke bawah ke bagian "Publishing", cari Custom domain.
  3. Masukkan nama domain kustom yang sudah kamu beli (misalnya `www.portofoliokerenku.com`). Ingat, harus pakai `www.` di depannya.
  4. Klik Save.
  5. Blogger akan menampilkan dua `CNAME record` yang perlu kamu tambahkan di pengaturan DNS domainmu di registrar. Contohnya:
    • `Name: www`, `Destination: ghs.google.com`
    • `Name: [kode unik]`, `Destination: [kode unik lainnya].ghs.google.com`
  6. Buka pengaturan DNS di registrar domainmu (tempat kamu membeli domain).
  7. Hapus `A record` dan `CNAME record` yang mungkin sudah ada untuk `www` atau `@`.
  8. Tambahkan dua `CNAME record` yang diberikan Blogger tadi.
  9. Selain itu, agar root domain (`portofoliokerenku.com` tanpa `www`) juga bisa mengarah ke blog ini, kamu perlu menambahkan empat `A record` yang mengarah ke IP Google. Biasanya:
    • `216.239.32.21`
    • `216.239.34.21`
    • `216.239.36.21`
    • `216.239.38.21`
    Ini bisa kamu cek di dokumentasi Blogger, tapi IP ini adalah standar untuk Google.
  10. Tunggu propagasi DNS (bisa beberapa menit hingga 24 jam). Setelah itu, jika kamu akses `www.portofoliokerenku.com` atau `portofoliokerenku.com`, dia akan menampilkan blog Blogger-mu.

Dulu, saya pernah nyoba pasang custom domain di Blogger, eh, pas dicek malah error. Ternyata saya salah masukin kode CNAME, atau lupa nambahin semua A record Google. Rasanya kayak udah pasang rambu jalan, tapi rambunya salah arah! Kuncinya adalah sabar dan teliti di bagian DNS ini.

3. Edit Template Blogger untuk Mengarahkan ke GitHub Pages

Setelah custom domain-mu berhasil terpasang di Blogger, sekarang saatnya membuat Blogger jadi "gerbang" yang mengarahkan ke showroom GitHub Pages-mu.

  1. Di dashboard Blogger, pergi ke Theme.
  2. Klik tombol panah di samping "Customize", lalu pilih Edit HTML.
  3. Hapus semua kode HTML yang ada di sana (atau backup dulu jika kamu mau).
  4. Ganti dengan kode HTML sederhana yang berisi redirect ke URL GitHub Pages-mu.
    5. 
<!DOCTYPE html>
<html>
<head>
    <title>Redirecting...</title>
    <link rel="canonical" href="https://username.github.io/my-portfolio/" />
    <meta http-equiv="refresh" content="0; url=https://username.github.io/my-portfolio/" />
    <script>
        window.location.replace('https://username.github.io/my-portfolio/');
    </script>
</head>
<body style="background-color:#f0f0f0; display:flex; justify-content:center; align-items:center; height:100vh; margin:0;">
    <p style="font-family: Arial, sans-serif; font-size:1.2em; color:#333;">Jika Anda tidak diarahkan secara otomatis, silakan klik <a href="https://username.github.io/my-portfolio/">di sini</a>.</p>
</body>
</html>
  5. Ganti `https://username.github.io/my-portfolio/` dengan URL GitHub Pages-mu yang sebenarnya.
  6. Klik ikon Save.

Dengan kode ini, setiap kali seseorang mengakses `www.portofoliokerenku.com` (atau `portofoliokerenku.com`), mereka akan langsung diarahkan ke website-mu yang di-host di GitHub Pages. Blogger di sini berfungsi sebagai "petunjuk arah" yang sangat efisien dan gratis!

Jurus Maut Kombinasi: Memadukan Kekuatan Keduanya

Nah, sekarang kita sudah punya dua alat yang hebat. GitHub Pages sebagai tempat "memamerkan" aplikasi statis kita, dan Blogger sebagai "gerbang" pintar untuk domain kustom kita. Kombinasi ini adalah resep jitu untuk menghosting website atau aplikasi statis secara gratis dengan custom domain yang terlihat profesional.

Bagaimana Kombinasinya Bekerja?

  1. GitHub Pages: Bertanggung jawab penuh untuk menyimpan dan menyajikan semua file statis dari website atau aplikasimu (HTML, CSS, JavaScript, gambar, dll.). Dia adalah "server" utamamu yang gratis.
  2. Blogger: Bertanggung jawab untuk mengelola custom domain-mu (`www.yourdomain.com`). Ketika seseorang mengetik domainmu di browser, Blogger akan menerima permintaan tersebut, dan berkat modifikasi template yang kita lakukan, dia akan langsung "melempar" pengunjung ke URL GitHub Pages-mu.

Kelebihan utama metode ini adalah kamu mendapatkan custom domain gratis yang mengarah ke konten gratis di GitHub Pages. Kamu hanya perlu membayar biaya pembelian domain, yang biasanya relatif murah untuk tahun pertama.

Skema Alur Kerja:

Pengunjung -> Ketik `www.portofoliokerenku.com` -> (Blogger menerima dan memproses, lalu mengarahkan) -> Website/Aplikasi di `https://username.github.io/my-portfolio/` terlihat di browser pengunjung.

Ini seperti kamu punya sebuah toko fisik yang keren banget (GitHub Pages), tapi kamu nggak mau repot ngurusin surat izin alamat resmi. Jadi, kamu "nummpang" pakai alamat kantor pos (Blogger) yang sudah punya alamat terdaftar, dan di kantor pos itu ada petugas yang sigap langsung ngasih tahu orang, "Eh, toko kerennya ada di ujung jalan sana ya, cepetan!" Orang-orang cuma perlu tahu alamat kantor posnya, sisanya biar petugasnya yang ngurus.

Tips Tambahan biar Makin Ngacir: SEO, Keamanan, dan Performa

Website sudah online, custom domain sudah terpasang. Sekarang saatnya memastikan website-mu ditemukan dan bekerja dengan optimal. Dulu, saya pernah asal deploy tanpa mikirin SEO. Hasilnya? Website saya sepi pengunjung, padahal isinya udah bagus. Rasanya kayak udah bikin toko yang paling bagus, tapi letaknya di gang sempit yang nggak ada orang lewat. Ini beberapa tipsnya:

1. Optimasi SEO (Search Engine Optimization)

Agar website-mu bisa ditemukan oleh mesin pencari seperti Google, perhatikan hal-hal berikut:

  • Meta Tags: Pastikan di `<head>` `index.html`-mu ada `<title>`, `<meta name="description" ...>`, dan `<meta name="keywords" ...>` yang relevan.
  • Struktur URL: GitHub Pages secara otomatis membuat URL yang bersih. Untuk Project Pages, URL-nya akan mengandung nama repositori, pastikan nama itu deskriptif.
  • Konten Berkualitas: Meskipun statis, pastikan teks, gambar, dan elemen lainnya relevan dan informatif.
  • Mobile-Friendly: Pastikan desain website-mu responsif dan tampil baik di berbagai ukuran layar.
  • Sitemap: Buat file `sitemap.xml` di root repositori-mu yang mendaftar semua URL di website-mu. Ini membantu mesin pencari mengindeks halamanmu.

2. Performa Website

Pengguna zaman sekarang benci website yang lambat. GitHub Pages sudah cukup cepat karena kontennya statis, tapi kamu bisa membuatnya lebih cepat lagi:

  • Optimasi Gambar: Kompres ukuran gambar tanpa mengurangi kualitas secara signifikan. Gunakan format yang tepat (WebP, JPEG, PNG).
  • Minify CSS & JavaScript: Hapus spasi dan karakter yang tidak perlu dari file CSS dan JavaScript-mu. Tools build modern biasanya sudah melakukan ini secara otomatis.
  • Browser Caching: GitHub Pages sudah mengelola caching dengan baik, tapi kamu bisa menggunakan headers yang tepat jika membangun dengan static site generator.

3. Keamanan (HTTPS)

Ketika kamu mengatur custom domain di GitHub Pages atau Blogger, pastikan HTTPS aktif. GitHub Pages secara otomatis menyediakan HTTPS gratis dengan sertifikat Let's Encrypt. Blogger juga menyediakan HTTPS gratis. HTTPS penting untuk keamanan data pengguna dan juga menjadi salah satu faktor SEO.

4. Pemeliharaan dan Pembaruan

  • Version Control (Git): Selalu gunakan Git untuk mengelola perubahan pada kodemu. Ini adalah praktik terbaik yang akan menyelamatkanmu dari banyak masalah.
  • Update Konten: Jangan biarkan website-mu stagnan. Tambahkan proyek baru, perbarui informasi, atau posting blog secara berkala untuk menjaga website-mu tetap relevan dan menarik.
  • Cek Broken Links: Sesekali, periksa apakah ada tautan yang rusak di website-mu. Tautan rusak bisa merusak pengalaman pengguna dan SEO.

Kesimpulan: Gerbang Dunia Maya Tanpa Batas

Nah, itu dia jurus jitu untuk menghosting website atau aplikasi statis-mu secara GRATIS menggunakan kombinasi GitHub Pages dan Blogger. Kita sudah mengupas tuntas mengapa ini penting, bagaimana cara kerja masing-masing platform, dan yang terpenting, bagaimana memadukan keduanya agar kamu bisa punya website profesional dengan custom domain, tanpa perlu pusing mikirin biaya hosting yang mencekik.

Menggunakan strategi ini adalah langkah awal yang brilian bagi siapapun yang ingin terjun ke dunia web development, membangun portofolio, atau sekadar bereksperimen dengan ide-ide gila mereka. Ini ibarat kamu sudah punya alat pancing dan umpan terbaik, dan sekarang kamu tahu spot memancing paling banyak ikannya di sungai kehidupan internet raya ini.

Jadi, tunggu apa lagi? Jangan biarkan karyamu cuma ngendon di laptopmu saja. Waktunya untuk "menyajikan" masakan terbaikmu, "mengaspalkan" mobil balapmu, dan "memamerkan" semua proyek kerenmu ke dunia. Mulailah hari ini, dan rasakan kepuasan saat melihat website-mu hidup di internet, diakses oleh jutaan orang (semoga!), semua itu berkat kecerdikanmu memanfaatkan layanan gratis yang powerful ini. Selamat ngoprek dan selamat berkarya!

Blogger GitHub Web Development