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

URL: https://skillaria.top/id/guides/git/github-pages-hosting-situs-gratis

GitHub Pages adalah hosting gratis untuk situs statis yang langsung berjalan dari repositori GitHub. Anda menaruh file HTML, CSS, dan JavaScript di repositori, mengaktifkan Pages di pengaturan, dan situs terbuka di alamat seperti username.github.io. Anda bisa memakai domain dan HTTPS sendiri, tetapi kode server seperti PHP dan database tidak didukung.

## 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.

| Jenis | Repositori | Alamat |
| --- | --- | --- |

| Situs pengguna | `username.github.io` | `https://username.github.io/` |

| Situs organisasi | `orgname.github.io` | `https://orgname.github.io/` |

| Situs proyek | nama bebas, misalnya `docs` | `https://username.github.io/docs/` |

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 "

# Halo, GitHub Pages

" > 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.

| Batasan | Nilai |
| --- | --- |

| Konten | hanya file statis, tanpa kode server dan database |

| Ukuran situs yang diterbitkan | hingga 1 GB |

| Ukuran repositori yang disarankan | hingga 1 GB |

| Trafik | batas lunak 100 GB per bulan |

| Build dari branch | batas lunak 10 per jam (tidak berlaku untuk Actions) |

| Waktu penerbitan | deployment yang lebih dari 10 menit akan dihentikan |

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.

## FAQ

**Apakah GitHub Pages benar-benar gratis?**

Ya, untuk repositori publik di paket gratis, GitHub Pages tidak dipungut biaya, termasuk HTTPS dan domain sendiri. Anda hanya membayar domain ke registrar, serta paket GitHub berbayar jika ingin menerbitkan dari repositori privat.

**Bisakah GitHub Pages dipakai untuk situs PHP atau WordPress?**

Tidak. GitHub Pages hanya menyajikan file statis dan tidak menjalankan kode server. Situs WordPress bisa diekspor menjadi HTML statis dengan plugin tertentu, tetapi formulir, komentar, dan panel admin tidak akan berfungsi.

**Berapa banyak situs yang bisa dibuat di GitHub Pages?**

Satu situs pengguna di alamat username.github.io dan situs proyek tanpa batas, masing-masing untuk satu repositori.

**Apakah mesin pencari mengindeks situs GitHub Pages?**

Ya, situs seperti ini diindeks seperti situs biasa. Untuk pengindeksan yang lebih baik, tambahkan sitemap.xml dan robots.txt di root, lalu verifikasi situs di webmaster tools mesin pencari.

**Bagaimana cara menghapus situs dari GitHub Pages?**

Di Settings → Pages, klik Unpublish site jika tombolnya tersedia, atau pilih None pada kolom Source. Menghapus repositori juga menghapus situsnya.


---
Source: Skillaria.Top (https://skillaria.top)