GitHub Pages: hosting situs gratis, cara menerbitkan langkah demi langkah

Apa itu GitHub Pages

GitHub Pages adalah hosting gratis untuk situs statis yang terintegrasi dengan GitHub. Anda menyimpan file situs di repositori Git biasa, lalu GitHub menyajikannya lewat HTTPS. Setiap git push ke branch yang dipilih akan memperbarui situs, sehingga Anda tidak memerlukan FTP, panel hosting, atau unggah manual.

Di mesin pencari berbahasa Indonesia, layanan ini ditulis dengan berbagai cara: "github pages", "github pages gratis", atau "github hosting". Ada juga pertanyaan "git pages apa itu", tetapi istilah yang benar adalah GitHub Pages: ini fitur platform GitHub, bukan bagian dari Git. Git sendiri tidak menerbitkan apa pun; ia hanya menyimpan riwayat perubahan.

Yang paling sering dibuat di GitHub Pages adalah dokumentasi proyek, halaman pribadi dan portofolio, blog, landing page, serta proyek belajar atau demo aplikasi frontend di React, Vue, atau Svelte setelah dibangun.

Git pages adalah hosting untuk konten statis

Kata kuncinya adalah statis. GitHub Pages hanya mengirim file siap pakai ke browser: HTML, CSS, JavaScript, gambar, font, dan JSON. Server tidak menjalankan kode apa pun: PHP, Python, Node.js di sisi server, dan database tidak berjalan di sini. Jika situs membutuhkan registrasi, keranjang belanja, atau panel admin dengan database, Anda memerlukan hosting biasa atau platform cloud.

JavaScript di browser tetap berjalan seperti biasa. Aplikasi satu halaman bisa memanggil API eksternal, formulir bisa dikirim lewat layanan pihak ketiga, dan pencarian di situs bisa dilakukan di sisi klien.

Jenis situs di GitHub Pages

GitHub Pages punya tiga jenis situs, dan jenisnya menentukan alamatnya.

Setiap akun hanya bisa memiliki satu situs pengguna atau organisasi, sedangkan situs proyek bisa banyak, masing-masing untuk satu repositori. Nama repositori untuk situs pribadi harus sama persis dengan username GitHub Anda: jika username-nya ivan-petrov, repositorinya bernama ivan-petrov.github.io.

Untuk repositori publik, Pages tersedia di paket gratis. Menerbitkan situs dari repositori privat memerlukan paket GitHub berbayar; situs yang sudah terbit tetap bisa diakses siapa saja di internet.

Cara menerbitkan situs di GitHub Pages langkah demi langkah

Kita ambil jalur paling sederhana: file HTML siap pakai, diterbitkan dari sebuah branch. Anda memerlukan akun GitHub dan Git yang sudah terpasang.

Langkah 1. Buat repositori

Di GitHub, buat repositori publik baru. Untuk situs pribadi, beri nama username.github.io; untuk situs proyek, nama bebas. Lalu clone dan tambahkan halaman utama:

git clone https://github.com/username/username.github.io.git
cd username.github.io
echo "<h1>Halo, GitHub Pages</h1>" > index.html

Halaman utama wajib bernama index.html (atau index.md, atau README.md; GitHub juga akan menjadikannya halaman utama). Huruf besar-kecil penting: Index.html tidak akan dikenali.

Langkah 2. Kirim file ke GitHub

git add index.html
git commit -m "Halaman pertama situs"
git push origin main

Jika Git meminta login dan kata sandi saat pertama kali mengirim, gunakan token akses pribadi atau login lewat browser. Kata sandi akun GitHub biasa tidak diterima untuk git push lewat HTTPS.

Langkah 3. Aktifkan Pages di pengaturan

Buka repositori di GitHub, masuk ke Settings, lalu pilih Pages di menu samping. Di blok Build and deployment, pada kolom Source, pilih Deploy from a branch. Di bawahnya, tentukan branch (biasanya main) dan folder: root / (root) atau /docs. Klik Save.

Folder /docs praktis jika repositori berisi kode proyek, sedangkan situs dokumentasinya ada di direktori terpisah.

Langkah 4. Tunggu hingga terbit

Penerbitan memakan waktu dari beberapa detik hingga beberapa menit. GitHub memperingatkan bahwa penerbitan pertama bisa berlangsung hingga 10 menit. Progres build bisa dilihat di tab Actions, di sana akan muncul proses pages build and deployment. Setelah selesai dengan tanda centang hijau, alamat situs muncul di Settings → Pages.

Setelah itu, cukup ubah file, commit, dan git push. Situs akan diperbarui sendiri.

Penerbitan lewat GitHub Actions

Penerbitan dari branch cocok jika repositori sudah berisi file siap pakai. Jika situs perlu dibangun dulu, misalnya aplikasi Vite, React, atau generator seperti Hugo, gunakan sumber GitHub Actions. Di Settings → Pages, pada kolom Source, pilih GitHub Actions, dan GitHub akan menawarkan template workflow.

Workflow minimal untuk file statis dari folder dist setelah build terlihat seperti ini:

name: Deploy to Pages
on:
  push:
    branches: [main]
permissions:
  contents: read
  pages: write
  id-token: write
jobs:
  deploy:
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: actions/configure-pages@v5
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist
      - id: deployment
        uses: actions/deploy-pages@v4

File ini disimpan di .github/workflows/pages.yml. Setelah git push, Actions memasang dependensi, membangun proyek, lalu mengunggah isi dist. Keuntungannya, repositori hanya berisi kode sumber, dan file hasil build tidak mengotori riwayat commit.

Jebakan yang umum pada situs proyek adalah path. Situs terbuka di alamat /nama-repositori/, sedangkan bundler biasanya merujuk ke sumber daya dari root /. Akibatnya halaman dimuat tanpa gaya dan skrip. Solusinya adalah mengatur base path: di Vite lewat parameter base: '/nama-repositori/', dan di bundler lain dengan opsi yang serupa.

Jekyll dan generator situs statis

Saat menerbitkan dari branch, GitHub secara default memproses file lewat Jekyll, generator situs statis berbasis Ruby. Karena itu Anda bisa menulis halaman dalam Markdown, memakai tema, dan template, lalu GitHub mengubahnya menjadi HTML. Untuk blog atau dokumentasi ini praktis: Anda menulis file .md, dan tampilannya diambil dari tema.

Efek sampingnya: Jekyll mengabaikan file dan folder yang namanya diawali garis bawah, misalnya _next atau _assets. Jika situs dibangun dengan alat lain dan folder seperti itu diperlukan, letakkan file kosong .nojekyll di root:

touch .nojekyll
git add .nojekyll
git commit -m "Nonaktifkan Jekyll"
git push

Generator lain seperti Hugo, Astro, Eleventy, MkDocs, dan Docusaurus bekerja lewat GitHub Actions: build di workflow, lalu publikasi folder hasilnya. GitHub Pages sendiri tidak mengenal alat-alat itu dan hanya membutuhkan file akhirnya.

Cara menghubungkan domain sendiri ke GitHub Pages

Alamat username.github.io cocok untuk proyek belajar, tetapi untuk portofolio atau proyek sebaiknya pakai domain sendiri. Penghubungan dilakukan di dua tempat: di registrar domain dan di pengaturan repositori.

Pengaturan DNS

Untuk subdomain seperti www.example.com atau blog.example.com, buat record CNAME yang mengarah ke username.github.io. Untuk domain utama example.com, buat record A ke alamat IP GitHub Pages:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Daftar alamat terbaru, termasuk IPv6 untuk record AAAA, tersedia di dokumentasi GitHub. Periksa dulu sebelum mengatur. Sebaiknya atur domain utama dan www sekaligus, sehingga GitHub mengarahkan salah satu alamat ke yang lain.

Pengaturan di repositori

Di Settings → Pages, isi domain pada kolom Custom domain lalu simpan. Saat menerbitkan dari branch, GitHub akan membuat file CNAME di repositori berisi nama domain. Jika menerbitkan lewat Actions, file CNAME tidak diperlukan, karena domain disimpan di pengaturan.

GitHub menyarankan agar domain diverifikasi di pengaturan akun (bagian Pages di pengaturan profil). Ini mencegah orang lain menghubungkan domain Anda ke repositorinya selagi DNS masih mengarah ke GitHub. Perubahan DNS bisa memakan waktu hingga sehari, jadi jika domain belum langsung berfungsi, tunggu saja.

HTTPS di GitHub Pages

Untuk alamat *.github.io, HTTPS selalu aktif. Untuk domain sendiri, GitHub menerbitkan sertifikat Let's Encrypt secara otomatis setelah DNS diatur dengan benar. Setelah itu, di Settings → Pages akan muncul centang Enforce HTTPS. Aktifkan agar semua permintaan HTTP dialihkan ke HTTPS.

Jika centang tidak aktif, sertifikat belum terbit: periksa record DNS lalu tunggu. Kadang membantu menghapus domain dari kolom Custom domain lalu menambahkannya lagi, sehingga penerbitan sertifikat dijalankan ulang. Pastikan juga situs tidak memuat gambar dan skrip lewat http://, karena browser akan memblokir sumber daya seperti itu sebagai mixed content.

Batasan GitHub Pages

Hosting ini gratis, tetapi ada batasnya. Batasan tersebut dijelaskan di dokumentasi GitHub, dan untuk sebagian besar situs pribadi atau belajar angkanya lebih dari cukup.

Selain batas teknis, ada aturan penggunaan: GitHub Pages tidak dimaksudkan untuk layanan komersial seperti toko online atau SaaS, dan tidak untuk membagikan file berukuran besar. Untuk portofolio, dokumentasi, blog, dan landing page proyek, layanan ini sangat cocok.

Batasan lain: tidak ada konfigurasi server. Tidak ada redirect khusus, header respons kustom, atau aturan seperti .htaccess. Yang bisa dilakukan hanyalah menaruh halaman 404.html di root; GitHub akan menampilkannya untuk alamat yang tidak ada.

Masalah umum dan cara mengatasinya

Error 404 di GitHub Pages

Penyebab paling umum adalah tidak adanya index.html di folder yang dipilih sebagai sumber. Periksa bahwa branch dan folder yang dipilih benar (/ (root) atau /docs) dan file bernama tepat index.html dengan huruf kecil. Penyebab kedua: situs belum terbit. Lihat tab Actions dan tunggu hingga build selesai.

Jika 404 muncul di halaman dalam aplikasi satu halaman setelah browser di-refresh, masalahnya ada di routing: server tidak mengenali alamat /about karena file itu tidak ada. Jalan keluarnya adalah hash routing (/#/about) atau salinan index.html bernama 404.html.

Situs tidak diperbarui

Pastikan dulu perubahan benar-benar sampai ke GitHub: jalankan git status dan git log origin/main --oneline -3. Lalu buka tab Actions. Jika build gagal, akan ada tanda silang merah dan log error, misalnya sintaks salah di file Jekyll atau kesalahan di workflow.

Jika build berhasil tetapi browser masih menampilkan versi lama, penyebabnya cache. GitHub Pages menyimpan cache file selama beberapa menit, dan browser juga menyimpan cache. Muat ulang halaman dengan membersihkan cache (Ctrl+F5 atau Cmd+Shift+R), atau buka di jendela privat.

Gaya dan gambar tidak dimuat

Hampir selalu karena path yang salah. Di situs proyek, tautan /style.css mengarah ke root username.github.io, bukan ke folder repositori. Gunakan path relatif (style.css, ./img/logo.png) atau atur base path di bundler. Periksa juga huruf besar-kecil pada nama file: server GitHub membedakan Logo.PNG dan logo.png, walaupun di Windows semuanya berjalan normal secara lokal.

Folder dengan garis bawah hilang

Ini ulah Jekyll: ia tidak menerbitkan direktori seperti _app. Tambahkan file .nojekyll di root, atau beralih ke penerbitan lewat GitHub Actions.

Kesimpulan

GitHub Pages adalah cara tercepat untuk menerbitkan situs statis secara gratis: repositori, file index.html, sumber di Settings → Pages, dan dalam beberapa menit situs terbuka di username.github.io. Untuk situs yang perlu dibangun, gunakan GitHub Actions. Untuk domain sendiri, atur record DNS dan centang Enforce HTTPS. Ingat batasannya: hanya statis, tanpa kode server, dan dengan batas ukuran serta trafik. Bekerja dengan GitHub, mengirim perubahan, dan mengotomatiskan penerbitan dibahas secara praktis dalam kursus Git.