Web Hosting

Tutorial GitHub Pages: Cara Hosting Website Gratis dengan GitHub

Q: Apakah GitHub Pages benar-benar gratis?

Ya, GitHub Pages benar-benar gratis untuk repository public. Anda mendapatkan hosting website statis, SSL/HTTPS gratis via Let's Encrypt, CDN global, dan dukungan custom domain tanpa biaya tambahan. Untuk repository private, GitHub Pages membutuhkan paket GitHub Pro, Team, atau Enterprise.

Q: Jenis website apa yang bisa di-host di GitHub Pages?

GitHub Pages hanya mendukung website statis - website yang terdiri dari file HTML, CSS, dan JavaScript yang tidak membutuhkan server-side processing. Ini termasuk website yang dibangun dengan static site generator seperti Jekyll atau Hugo, halaman dokumentasi, website portofolio, landing page, dan blog. GitHub Pages tidak mendukung PHP, database (MySQL), atau framework backend seperti Node.js, Django, atau Laravel.

Q: Bagaimana cara menghubungkan domain sendiri ke GitHub Pages?

Untuk menghubungkan custom domain: (1) Di Settings repository -> Pages, masukkan nama domain Anda di kolom 'Custom domain' dan klik Save, (2) Di DNS manager domain Anda (di registrar atau kontrol panel hosting), tambahkan CNAME record yang mengarah 'www' ke 'username.github.io', dan untuk apex domain (tanpa www) tambahkan 4 A record ke IP GitHub Pages: 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153, (3) Tunggu propagasi DNS (5 menit hingga 48 jam), kemudian aktifkan 'Enforce HTTPS' di Settings.

Q: Apakah GitHub Pages mendukung WordPress?

Tidak, GitHub Pages tidak mendukung WordPress karena WordPress membutuhkan PHP dan database MySQL untuk berjalan. GitHub Pages hanya mendukung website statis. Jika Anda ingin menggunakan WordPress, Anda membutuhkan shared hosting atau VPS yang mendukung PHP dan MySQL, seperti paket hosting yang ditawarkan HostingEkspres.

Q: Berapa lama waktu yang dibutuhkan website live setelah push ke GitHub?

Untuk perubahan sederhana pada website yang sudah ada, biasanya butuh 1-5 menit untuk live. Untuk setup awal atau perubahan konfigurasi besar, bisa butuh hingga 10 menit. Anda bisa memantau status build di tab 'Actions' repository GitHub Anda. Jika menggunakan Jekyll build bawaan GitHub, prosesnya biasanya sedikit lebih lambat dibanding GitHub Actions karena dijalankan di infrastruktur berbeda.

Q: Apakah GitHub Pages cocok untuk website bisnis?

GitHub Pages cocok untuk website bisnis yang sifatnya informatif atau branding - company profile, halaman produk/layanan, portofolio, atau landing page. Namun untuk website bisnis yang membutuhkan fitur dinamis seperti formulir pemesanan dengan database, sistem login pelanggan, toko online terintegrasi, atau manajemen konten yang mudah digunakan oleh non-developer, shared hosting dengan WordPress atau platform e-commerce lebih sesuai.

Q: Bagaimana cara membuat website GitHub Pages yang SEO-friendly?

Untuk SEO GitHub Pages yang optimal: (1) Gunakan Jekyll dengan plugin jekyll-seo-tag, jekyll-sitemap, dan jekyll-feed untuk meta tag dan sitemap otomatis, (2) Aktifkan HTTPS dan pastikan 'Enforce HTTPS' dicentang di Settings, (3) Hubungkan custom domain (www.namadomain.com) agar website terlihat lebih profesional dan dipercaya Google, (4) Buat file robots.txt yang menyertakan URL sitemap, (5) Pastikan setiap halaman memiliki tag title dan meta description yang unik, (6) Daftarkan URL sitemap di Google Search Console.

Tim HostingEkspres|23 Mei 2026|12 menit baca

github pages tutorialhosting website gratis githubcara deploy website ke github pagesgithub pages custom domaingithub pages jekyllhosting gratis indonesiadeploy website gratisgithub pages https

Tutorial GitHub Pages: Cara Hosting Website Gratis dengan GitHub

Apa Itu GitHub Pages?

GitHub Pages adalah layanan hosting website statis gratis yang disediakan oleh GitHub. Dengan GitHub Pages, Anda bisa mempublikasikan website langsung dari sebuah repository GitHub - tanpa biaya, tanpa konfigurasi server, dan tanpa perlu memahami cPanel atau FTP.

Disclosure: Beberapa link di artikel ini mengarah ke layanan HostingEkspres atau partner kami. Jika Anda melakukan pembelian melalui link tersebut, kami mungkin menerima komisi tanpa biaya tambahan untuk Anda. Konten dan rekomendasi di artikel ini independen dan didasarkan pada pengujian serta pengalaman tim kami.

GitHub Pages mendukung file HTML, CSS, JavaScript, dan website yang dibangun dengan static site generator seperti Jekyll (dukungan bawaan) atau Hugo (via GitHub Actions). Setiap akun GitHub mendapatkan:

1 website pengguna/organisasi di URL username.github.io
Unlimited website proyek di URL username.github.io/nama-repo
SSL/HTTPS gratis untuk semua website GitHub Pages
CDN global via Fastly untuk loading yang cepat di seluruh dunia
Custom domain gratis - sambungkan domain Anda sendiri tanpa biaya tambahan

Jenis-Jenis GitHub Pages

Ada tiga jenis GitHub Pages yang perlu Anda ketahui:

1. User/Organization Pages

Repository bernama username.github.io (ganti "username" dengan nama pengguna GitHub Anda). Website ini tersedia di https://username.github.io. Hanya ada satu per akun dan biasanya digunakan untuk portofolio atau website personal utama.

2. Project Pages

Setiap repository GitHub bisa memiliki website tersendiri. Diaktifkan dari Settings repository, tersedia di https://username.github.io/nama-repo. Bisa digunakan untuk dokumentasi proyek, demo aplikasi, atau website berbeda-beda.

3. Organization Pages

Mirip dengan User Pages, tapi untuk akun organisasi GitHub. Tersedia di https://namaorganisasi.github.io.

Persyaratan Sebelum Memulai

Sebelum memulai tutorial ini, pastikan Anda sudah memiliki:

Akun GitHub (gratis di github.com)
Git terinstal di komputer Anda
File website yang sudah siap (HTML/CSS/JS, atau proyek Jekyll/Hugo)
Text editor seperti VS Code (opsional tapi direkomendasikan)

Langkah 1: Buat Repository GitHub

Ada dua cara membuat repository untuk GitHub Pages, tergantung jenis website yang ingin Anda buat:

Untuk Website Personal (username.github.io)

Login ke GitHub dan klik tombol "New" (atau ikon "+" di pojok kanan atas)
Beri nama repository persis: username.github.io (ganti "username" dengan nama pengguna GitHub Anda yang sebenarnya - huruf besar/kecil harus sama persis)
Pilih Public (GitHub Pages gratis hanya untuk repository public)
Centang "Add a README file"
Klik "Create repository"

Untuk Website Proyek

Buat repository baru dengan nama apa pun (misalnya: portofolio, blog-saya)
Pilih Public
Klik "Create repository"

Langkah 2: Upload File Website ke Repository

Ada beberapa cara mengupload file ke repository GitHub:

Cara A: Upload via Browser (untuk Pemula)

Buka repository yang baru dibuat
Klik tombol "Add file" → "Upload files"
Drag and drop file website Anda (index.html, style.css, dll.)
Tulis commit message, misalnya: "Upload website pertama"
Klik "Commit changes"

Cara B: Via Git Command Line (Direkomendasikan)

# Clone repository yang sudah dibuat
git clone https://github.com/username/username.github.io.git

# Masuk ke folder repository
cd username.github.io

# Salin file website Anda ke folder ini
# (atau buat file baru)
echo "<!DOCTYPE html>
<html lang='id'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Website Saya</title>
</head>
<body>
  <h1>Halo dari GitHub Pages!</h1>
  <p>Website ini di-host gratis oleh GitHub Pages.</p>
</body>
</html>" > index.html

# Stage semua file
git add .

# Commit
git commit -m "Tambah halaman website pertama"

# Push ke GitHub
git push origin main

Langkah 3: Aktifkan GitHub Pages

Untuk repository website personal (username.github.io), GitHub Pages biasanya sudah aktif otomatis. Untuk repository proyek, Anda perlu mengaktifkannya secara manual:

Buka repository di GitHub
Klik tab "Settings"
Scroll ke bagian "Pages" di menu kiri
Di bagian "Source", pilih branch (biasanya main) dan folder (/ (root) atau /docs)
Klik "Save"

Setelah beberapa menit, GitHub akan menampilkan pesan: "Your site is published at https://username.github.io/"

Website Anda sudah online! Kunjungi URL tersebut untuk memastikan semuanya berjalan dengan baik.

Langkah 4: Deploy Website Jekyll ke GitHub Pages

GitHub Pages memiliki dukungan bawaan untuk Jekyll. Anda bisa push kode sumber Jekyll langsung dan GitHub akan otomatis membangun website-nya:

Metode 1: Jekyll Build Otomatis (Tanpa GitHub Actions)

Untuk Jekyll dengan tema standar dan plugin yang didukung GitHub Pages:

Push kode sumber Jekyll (bukan folder _site/) ke branch main
Di Settings → Pages, pilih source: branch main, folder / (root)
GitHub otomatis mendeteksi Jekyll dan membangun website

Metode 2: GitHub Actions (Lebih Fleksibel)

Untuk plugin yang tidak didukung secara native atau konfigurasi lebih lanjut, gunakan GitHub Actions. Buat file .github/workflows/jekyll.yml:

name: Deploy Jekyll ke GitHub Pages

on:
  push:
    branches: ["main"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.3'
          bundler-cache: true
      - name: Build Jekyll
        run: bundle exec jekyll build
      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v3

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy ke Pages
        id: deployment
        uses: actions/deploy-pages@v4

Di Settings → Pages, ubah source menjadi "GitHub Actions".

Langkah 5: Deploy Website Hugo ke GitHub Pages

Hugo tidak memiliki dukungan bawaan di GitHub Pages, sehingga wajib menggunakan GitHub Actions:

name: Deploy Hugo ke GitHub Pages

on:
  push:
    branches: ["main"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

defaults:
  run:
    shell: bash

jobs:
  build:
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.127.0
    steps:
      - name: Install Hugo CLI
        run: |
          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb           && sudo dpkg -i ${{ runner.temp }}/hugo.deb

      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: recursive
          fetch-depth: 0

      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v5

      - name: Build dengan Hugo
        env:
          HUGO_ENVIRONMENT: production
        run: |
          hugo             --minify             --baseURL "${{ steps.pages.outputs.base_url }}/"

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./public

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy ke GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Langkah 6: Menghubungkan Custom Domain

Salah satu fitur terbaik GitHub Pages adalah dukungan custom domain gratis. Anda bisa menghubungkan domain sendiri (misalnya www.namadomain.com) ke website GitHub Pages Anda.

Cara Menambahkan Custom Domain

Di GitHub: Buka Settings → Pages → Custom domain. Masukkan domain Anda (misalnya www.namadomain.com) dan klik Save. GitHub akan membuat file CNAME otomatis di repository Anda.
Di DNS Manager domain Anda: Tambahkan record DNS berikut:
- Untuk www subdomain: Tambahkan CNAME record yang mengarah ke username.github.io
- Untuk apex domain (tanpa www): Tambahkan A records ke IP GitHub Pages:

# A Records untuk apex domain (tanpa www)
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

# AAAA Records (IPv6) untuk apex domain
2606:50c0:8000::153
2606:50c0:8001::153
2606:50c0:8002::153
2606:50c0:8003::153

# CNAME untuk www subdomain
www  CNAME  username.github.io

Tunggu propagasi DNS: Perubahan DNS bisa memakan waktu 5 menit hingga 48 jam. GitHub akan otomatis memverifikasi domain dan mengaktifkan HTTPS setelah propagasi selesai.

Aktifkan HTTPS untuk Custom Domain

Setelah domain terverifikasi, GitHub Pages otomatis menyediakan sertifikat SSL gratis via Let's Encrypt. Di Settings → Pages, centang opsi "Enforce HTTPS" untuk memastikan semua pengunjung dialihkan ke versi HTTPS website Anda.

Langkah 7: Optimasi GitHub Pages untuk SEO

File robots.txt

Buat file robots.txt di root repository untuk memberitahu search engine cara meng-crawl website Anda:

User-agent: *
Allow: /
Sitemap: https://www.namadomain.com/sitemap.xml

404 Custom Page

Buat file 404.html di root repository untuk halaman 404 yang lebih ramah pengguna:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>404 - Halaman Tidak Ditemukan</title>
  <meta name="robots" content="noindex">
</head>
<body>
  <h1>404 - Halaman Tidak Ditemukan</h1>
  <p>Maaf, halaman yang Anda cari tidak ada. Kembali ke <a href="/">beranda</a>.</p>
</body>
</html>

Sitemap untuk Jekyll

Jika menggunakan Jekyll, tambahkan plugin jekyll-sitemap di _config.yml dan Gemfile. Sitemap akan otomatis tersedia di /sitemap.xml.

Open Graph Meta Tag

Tambahkan Open Graph meta tag agar konten website Anda tampil dengan baik saat dibagikan di media sosial:

<meta property="og:title" content="Judul Halaman" />
<meta property="og:description" content="Deskripsi singkat halaman ini." />
<meta property="og:url" content="https://www.namadomain.com/halaman-ini" />
<meta property="og:type" content="website" />

Keterbatasan GitHub Pages

GitHub Pages adalah layanan luar biasa, tetapi memiliki beberapa keterbatasan yang perlu Anda ketahui:

Hanya untuk website statis - Tidak bisa menjalankan PHP, Python, Ruby, Node.js, atau bahasa server-side lain. Tidak ada database.
Ukuran repository maksimal 1 GB - File besar seperti video sebaiknya di-host di platform lain (YouTube, Vimeo, dll.).
Bandwidth 100 GB per bulan - Untuk website dengan traffic tinggi, mungkin tidak cukup.
Frekuensi build 10 build per jam - Untuk website yang sangat aktif diupdate, ini bisa jadi kendala.
Tidak ada server-side logic - Form kontak, autentikasi pengguna, atau fitur dinamis butuh layanan pihak ketiga.

Alternatif Jika GitHub Pages Tidak Cukup

Jika website Anda sudah berkembang dan membutuhkan lebih dari yang GitHub Pages bisa tawarkan, berikut beberapa pilihan:

Netlify - Gratis untuk proyek personal, mendukung form, function, dan redirect
Cloudflare Pages - Gratis dengan CDN global yang sangat cepat
Vercel - Gratis untuk proyek personal, sangat bagus untuk Next.js dan framework modern
Shared Hosting (seperti HostingEkspres) - Untuk website PHP/WordPress, lebih kontrol, harga terjangkau

Workflow Rekomendasi: Dari Menulis hingga Publish

Setelah setup selesai, berikut workflow yang direkomendasikan untuk mengelola website GitHub Pages secara efisien:

Edit lokal - Lakukan perubahan di komputer Anda menggunakan text editor favorit. Jalankan server lokal (jekyll serve atau hugo server) untuk preview.

Stage dan commit - Setelah puas dengan perubahan, jalankan:

git add .
git commit -m "Tambah artikel: Judul Artikel Baru"

Push ke GitHub - Push perubahan ke repository:
```
git push origin main
```
GitHub Actions build otomatis - Jika menggunakan GitHub Actions, build akan berjalan otomatis. Pantau progress di tab Actions repository Anda.
Website online - Dalam 1–5 menit, perubahan Anda sudah live di internet!

Tips dan Trik GitHub Pages

Gunakan Branch Terpisah untuk Source dan Build

# Simpan kode sumber di branch main
# GitHub Actions build dan push ke branch gh-pages
# Di Settings -> Pages, pilih source: branch gh-pages

Preview Perubahan Sebelum Publish

# Buat branch baru untuk fitur/perubahan
git checkout -b fitur-baru

# Buat perubahan dan commit
git add . && git commit -m "Tambah fitur baru"

# Setelah yakin, merge ke main
git checkout main
git merge fitur-baru
git push origin main

Gunakan .gitignore

# File .gitignore untuk Jekyll
_site/
.sass-cache/
.jekyll-cache/
.jekyll-metadata
vendor/

# File .gitignore untuk Hugo
/public/
/resources/
.hugo_build.lock

Perbandingan GitHub Pages vs Platform Hosting Lain

Fitur	GitHub Pages	Netlify (Free)	Cloudflare Pages	Shared Hosting
Harga	Gratis	Gratis	Gratis	Berbayar
Website Statis	Ya	Ya	Ya	Ya
Website Dinamis (PHP)	Tidak	Tidak	Tidak	Ya
Custom Domain	Ya, gratis	Ya, gratis	Ya, gratis	Ya
SSL/HTTPS	Gratis (Let's Encrypt)	Gratis	Gratis	Gratis atau berbayar
Bandwidth	100 GB/bulan	100 GB/bulan	Unlimited	Sesuai paket
Form Handling	Tidak (butuh layanan ketiga)	Ya (built-in)	Tidak	Ya (PHP/server)
Database	Tidak	Tidak	Tidak	Ya (MySQL/PostgreSQL)

Kesimpulan

GitHub Pages adalah solusi hosting yang luar biasa untuk website statis - gratis, cepat, aman, dan mudah digunakan. Integrasi seamless-nya dengan Git dan ekosistem GitHub menjadikannya pilihan ideal untuk developer, blogger teknis, dan siapa pun yang ingin membangun website portofolio atau blog tanpa biaya hosting.

Namun jika website Anda membutuhkan fitur dinamis seperti WordPress, toko online dengan database, atau aplikasi web - Anda membutuhkan hosting yang lebih lengkap. HostingEkspres menyediakan paket shared hosting dengan cPanel, database MySQL, PHP, dan SSL gratis dengan harga yang sangat terjangkau, sempurna untuk website bisnis yang membutuhkan lebih dari sekadar file statis.

FAQ - Pertanyaan Umum tentang GitHub Pages

Apakah GitHub Pages benar-benar gratis?

Ya, GitHub Pages sepenuhnya gratis untuk repository public. Anda mendapat hosting statis, SSL/HTTPS gratis via Let's Encrypt, CDN global via Fastly, dan dukungan custom domain - semua tanpa biaya. Untuk repository private, GitHub Pages membutuhkan paket GitHub Pro atau lebih tinggi.

Jenis website apa yang bisa di-host di GitHub Pages?

GitHub Pages hanya mendukung website statis - HTML, CSS, JavaScript, dan website hasil static site generator seperti Jekyll atau Hugo. GitHub Pages tidak mendukung PHP, database MySQL, Node.js server, atau framework backend lainnya. Jika website Anda membutuhkan fitur dinamis, diperlukan hosting berbayar.

Bagaimana cara menghubungkan domain sendiri ke GitHub Pages?

Di Settings repository → Pages, masukkan nama domain Anda di kolom "Custom domain" dan klik Save. Lalu di DNS manager domain Anda, tambahkan CNAME record www yang mengarah ke username.github.io, dan untuk apex domain tambahkan 4 A record ke IP GitHub Pages (185.199.108–111.153). Setelah propagasi DNS selesai, aktifkan "Enforce HTTPS" di Settings.

Apakah GitHub Pages mendukung WordPress?

Tidak. WordPress membutuhkan PHP dan database MySQL yang tidak tersedia di GitHub Pages. Untuk website WordPress, Anda membutuhkan shared hosting atau VPS yang mendukung PHP dan MySQL, seperti paket hosting yang ditawarkan HostingEkspres dengan harga terjangkau.

Berapa lama waktu yang dibutuhkan website live setelah push ke GitHub?

Biasanya 1–5 menit untuk perubahan biasa. Anda bisa memantau status build di tab Actions repository GitHub Anda. Setup awal atau perubahan konfigurasi besar mungkin butuh hingga 10 menit.

Apakah GitHub Pages cocok untuk website bisnis?

GitHub Pages cocok untuk website bisnis informatif seperti company profile, halaman layanan, atau portofolio. Untuk website bisnis dengan formulir pemesanan, toko online, sistem login, atau manajemen konten yang mudah - shared hosting dengan WordPress atau platform e-commerce akan lebih tepat dan mudah dikelola.

Bagaimana cara membuat website GitHub Pages yang SEO-friendly?

Gunakan Jekyll dengan plugin jekyll-seo-tag, jekyll-sitemap, dan jekyll-feed. Aktifkan HTTPS dan hubungkan custom domain. Buat file robots.txt dengan URL sitemap. Pastikan setiap halaman punya <title> dan meta description yang unik, lalu daftarkan sitemap di Google Search Console.

Butuh Hosting untuk Website Anda?

Dapatkan hosting cepat, aman, dan terpercaya dengan harga terjangkau. Gratis domain, SSL, dan support 24/7.

Lihat Paket Hosting Hubungi Kami

Jangan Ketinggalan Promo!

Subscribe newsletter kami dan dapatkan diskon hingga 50% untuk pembelian pertama kamu.

Gratis, tanpa spam. Bisa unsubscribe kapan saja.