"Mahir Company" Go Public: Deploy GRATIS Pake GitHub Pages!

Proyek website "Mahir Company" kita udah rapi, udah di-commit ke Git, dan udah nangkring manis di repositori mahir-company di GitHub. Keren! Sekarang, saatnya kita bikin website ini bisa diliat sama seluruh dunia, dan caranya gampang banget plus GRATIS pake fitur dari GitHub sendiri: GitHub Pages.

GitHub Pages bakal ngambil file-file HTML, CSS, dan JavaScript dari repositori mahir-company kita dan nampilinnya sebagai website live. Cocok banget buat portofolio, dokumentasi, atau company profile sederhana kayak yang kita buat.

Kenapa GitHub Pages Jadi Pilihan Oke?

• Gratis: Gak perlu bayar buat hosting situs statis.
• Mudah Disetup: Cuma beberapa klik di setting repositori GitHub.
• Terintegrasi dengan Git: Setiap git push ke branch yang ditentuin bisa otomatis update website-nya.

Langkah-Langkah Deploy "Mahir Company" ke GitHub Pages

Pastikan kamu udah nge-push semua perubahan terakhir proyek mahir-company ke GitHub ya!

1. Buka Repositori mahir-company di GitHub: Login ke akun GitHub-mu dan navigasi ke halaman repositori mahir-company yang sudah kamu buat dan push.

2. Masuk ke Settings Repositori: Di halaman repositorimu, klik tab Settings.

   

3. Pilih Menu "Pages": Di sidebar kiri halaman Settings, cari dan klik menu Pages.

   

4. Atur Sumber (Source) untuk Deployment: Di bagian "Build and deployment", di bawah "Source", pastikan opsi "Deploy from a branch" terpilih. Ini yang akan kita gunakan.

   • Branch:
     • Pilih branch yang berisi kode website "Mahir Company" yang siap tayang. Karena kita naruh semua file (index.html, css/, dll.) langsung di root branch utama kita, pilih branch main.
     • Di sebelah pilihan branch, ada dropdown untuk folder. Karena file index.html kita ada di root branch master, pilih /(root).

5. Klik "Save": Setelah kamu milih branch master dan folder /(root), klik tombol Save.

6. Tunggu Proses Deployment dan Cek URL-mu!:

   • GitHub akan mulai proses deployment. Biasanya ini cuma butuh beberapa menit, terutama untuk proyek kecil.
   • Setelah beberapa saat, refresh halaman Settings > Pages. Di bagian atas halaman tersebut, seharusnya akan muncul pesan seperti "Your site is live at URL_WEBSITE_ANDA" atau "Your site is published at URL_WEBSITE_ANDA".
   • URL website GitHub Pages-mu akan berformat: https://[NAMA_AKUN_GITHUBMU].github.io/mahir-company/ (Ganti [NAMA_AKUN_GITHUBMU] dengan username GitHub-mu).
   • Klik URL tersebut, dan kamu akan melihat website "Mahir Company" kita sudah online dan bisa diakses siapa saja! Selamat! 🎉

Update Website Otomatis!

Setiap kali kamu melakukan perubahan pada proyek mahir-company di komputermu, lalu melakukan git add ., git commit, dan git push origin main, GitHub Pages akan otomatis mendeteksi push tersebut dan mendeploy ulang websitemu dengan versi terbaru. Proses ini biasanya memakan waktu beberapa menit.

Jadi, untuk update website, kamu cukup push perubahan ke branch main di GitHub!

Mengatasi Masalah Umum Saat Deploy ke GitHub Pages

• Website Tidak Muncul (Error 404):

  • Nama File index.html: Pastikan file utama halaman depanmu benar-benar bernama index.html (semua huruf kecil) dan berada di direktori root branch main (atau di folder /docs jika kamu memilih opsi itu).
  • Waktu Propagasi/Deploy: Beri waktu beberapa menit setelah klik "Save" atau setelah push. Kadang tidak instan.
  • Case Sensitivity: GitHub Pages (servernya berbasis Linux) itu case-sensitive untuk nama file dan folder. Images/logo.png beda dengan images/logo.png. Pastikan path di HTML-mu cocok persis dengan nama file/folder di repositori.
  • Cek Status Deploy: Di repositori GitHub-mu, pergi ke tab "Actions". Cari workflow yang berhubungan dengan "pages-build-deployment". Di situ kamu bisa lihat apakah proses build dan deploy berhasil atau ada error.

• CSS atau Gambar Tidak Tampil:

  • Ini hampir selalu karena masalah path relatif di file HTML-mu.
  • Ketika website-mu di-host di username.github.io/mahir-company/, maka mahir-company menjadi semacam "subdirektori" dari domain utama username.github.io.
  • Jika kamu menggunakan path absolut yang dimulai dengan / (misalnya, <link rel="stylesheet" href="/css/style.css">), browser akan mencarinya di username.github.io/css/style.css, yang mana salah karena tidak ada /mahir-company/ di depannya.
  • Solusi Terbaik: Gunakan path relatif dari lokasi file HTML-mu. Untuk proyek mahir-company kita, karena index.html ada di root dan style.css ada di css/style.css, maka path href="css/style.css" sudah benar. Begitu juga untuk gambar, src="images/nama-gambar.png" jika folder images sejajar dengan index.html.
  • Alternatif (jika terpaksa path absolut): Kamu bisa menambahkan tag <base> di <head> HTML-mu:

    <head>
      <base href="/mahir-company/">
      <!-- ... sisa head ... -->
    </head>

    Ini akan memberitahu browser bahwa semua path absolut yang dimulai / harus dianggap relatif terhadap /mahir-company/. Tapi, path relatif biasanya lebih aman dan portabel.

• Perubahan Tidak Muncul Setelah Push:

  • Tunggu Proses Deploy: Beri waktu beberapa menit.
  • Clear Cache Browser: Browser-mu mungkin masih menyimpan versi lama. Coba clear cache atau buka dengan mode Incognito/Private.
  • Cek Commit & Branch: Pastikan kamu nge-push ke branch yang benar (main) dan commit-nya sudah benar-benar ter-push ke GitHub.

GitHub Pages adalah cara yang fantastis dan sangat mudah untuk membuat website statis pertamamu online. Dengan proyek "Mahir Company" yang sudah ada di GitHub, kamu bisa langsung mempraktikkannya.

Setelah ini, kita akan lihat platform hosting gratis lain yang juga sangat populer, yaitu Netlify, yang menawarkan beberapa fitur tambahan yang menarik.