GitHub & Kolaborasi

Kenapa ini penting

Repo Git di laptopmu punya dua kelemahan: kalau laptop hilang atau rusak, semua riwayat ikut hilang, dan orang lain tidak bisa ikut bekerja. GitHub menyimpan salinan repo di internet (disebut remote) dan menambahkan alat kolaborasi: pull request, code review, issue, dan hosting gratis lewat GitHub Pages. Untuk pencari kerja, profil GitHub juga berfungsi sebagai portofolio yang bisa dilihat perekrut. MDN menyebut bahwa kerja tim seperti ini sulit dilakukan hanya dengan Git polos, dan di sinilah situs seperti GitHub atau GitLab berperan.

Konsep inti

Remote, clone, push, pull

• Remote adalah salinan repo di tempat lain, biasanya bernama origin.
• git clone <url>: mengunduh repo lengkap beserta riwayatnya ke komputermu (otomatis membuat remote origin).
• git remote add origin <url>: menghubungkan repo lokal yang sudah ada ke repo kosong di GitHub.
• git push: mengirim commit lokal ke remote. Push pertama: git push -u origin main (-u mengingat pasangan branch lokal dan remote, sehingga berikutnya cukup git push).
• git pull: mengambil commit baru dari remote dan menggabungkannya ke branch-mu. Sebenarnya ini gabungan git fetch (ambil) dan git merge (gabung).

Kebiasaan baik dari MDN: selalu git pull sebelum mulai bekerja, dan jalankan npm install kalau ada dependency baru, supaya salinanmu tidak ketinggalan dari tim.

Autentikasi: HTTPS token vs SSH key

GitHub harus tahu bahwa yang melakukan push memang kamu. Menurut dokumentasi GitHub, autentikasi Git memakai password akun sudah dihapus. Pilihannya:

Membuat SSH key sesuai dokumentasi GitHub:

ssh-keygen -t ed25519 -C "budi@contoh.id"
# → Enter untuk lokasi default (~/.ssh/id_ed25519), lalu isi passphrase
# → Menghasilkan id_ed25519 (PRIVAT, jangan dibagikan) dan id_ed25519.pub (publik)
cat ~/.ssh/id_ed25519.pub
# → salin isinya ke GitHub: Settings > SSH and GPG keys > New SSH key
ssh -T git@github.com
# → Hi budi! You've successfully authenticated, but GitHub does not provide shell access.

Aturan keamanan: kunci privat dan token sama nilainya dengan password. Jangan pernah dikirim ke chat, ditempel di kode, atau di-commit.

Fork dan pull request

• Fork adalah salinan repo orang lain ke akun GitHub-mu. Kamu bebas mengubahnya tanpa izin pemilik asli.
• Pull request (PR) adalah permintaan: "Tolong tarik (pull) perubahan dari branch saya ke repo/branch kamu." PR menjadi tempat diskusi, review, dan pengecekan otomatis.

Alur kontribusi ke proyek orang lain:

1. Fork repo di GitHub (tombol Fork).
2. Clone fork-mu ke laptop.
3. Buat branch baru: git switch -c perbaiki-typo-readme.
4. Edit, commit, lalu git push -u origin perbaiki-typo-readme.
5. Di GitHub, klik Compare & pull request, tulis judul dan penjelasan.
6. Pemilik repo me-review, mungkin meminta perubahan. Kamu cukup commit dan push lagi ke branch yang sama; PR otomatis terbarui.
7. Setelah disetujui, PR di-merge. Hapus branch yang sudah selesai.

Dalam tim yang semua anggotanya punya akses ke satu repo, langkah fork dilewati: semua orang membuat branch di repo yang sama, lalu membuka PR ke main.

Code review yang sehat

Sebagai penulis PR: buat PR kecil dan fokus, jelaskan apa yang berubah, kenapa, dan cara mengujinya, sertakan screenshot untuk perubahan tampilan. Sebagai reviewer: komentari kodenya, bukan orangnya; beri saran yang bisa ditindaklanjuti ("Bagaimana kalau nama variabel ini diganti totalHarga supaya jelas?"), dan bedakan yang wajib dari yang sekadar selera. Menerima review dengan lapang dada adalah soft skill penting; kritik terhadap kode bukan serangan terhadap dirimu.

Issue

Issue adalah tiket untuk mencatat bug, ide fitur, atau pertanyaan. Issue yang baik punya judul jelas, langkah untuk mereproduksi, hasil yang diharapkan vs yang terjadi, dan screenshot. Kalau deskripsi PR atau pesan commit memuat kata kunci seperti Closes #12, Fixes #12, atau Resolves #12, issue nomor 12 akan tertutup otomatis saat PR di-merge ke branch default.

GitHub Pages

GitHub Pages menghosting situs statis (HTML, CSS, JS) gratis langsung dari repo. Caranya: buka repo, pilih Settings, lalu Pages, dan pilih sumber publikasi (sebuah branch dan folder, misalnya main dan / (root), atau lewat GitHub Actions). File index.html harus berada di level teratas folder sumber. Setelah beberapa menit, situs tersedia di https://<username>.github.io/<nama-repo>/. Kalau nama repo-nya persis <username>.github.io, situs tampil di https://<username>.github.io/.

Satu hal kecil yang sering membingungkan: kalau kamu memakai sumber dari branch, GitHub Pages memproses situs dengan Jekyll secara default. Untuk situs HTML biasa ini jarang jadi masalah, tetapi kalau ada folder berawalan garis bawah (misalnya _assets) yang tiba-tiba tidak ikut tampil, tambahkan file kosong bernama .nojekyll di akar folder sumber.

Kebiasaan rapi saat berkolaborasi

MDN menyebut beberapa kebiasaan "good housekeeping" yang membuat kerja tim lancar:

• Sinkronkan dulu sebelum kerja: git switch main, lalu git pull, lalu npm install kalau proyeknya memakai npm. Baru buat branch baru dari main yang segar.
• Satu branch untuk satu tugas, dengan nama yang menjelaskan isinya. Jangan menumpuk tiga fitur dalam satu branch.
• Hapus branch yang sudah di-merge, baik di GitHub (tombol "Delete branch" setelah merge) maupun di lokal dengan git branch -d.
• Jaga .gitignore supaya node_modules, .env, dan file sampah sistem seperti .DS_Store tidak pernah ikut terkirim.
• Tulis README di setiap repo: apa proyeknya, cara menjalankan, dan link demo. README adalah halaman depan repo yang pertama dibaca orang, termasuk perekrut.

GitHub bukan satu-satunya pilihan. GitLab dan Bitbucket menawarkan fitur serupa dengan istilah sedikit berbeda (misalnya GitLab menyebut pull request sebagai "merge request"). Perintah Git-nya tetap sama, jadi yang kamu pelajari di sini berlaku di mana pun.

Contoh kode

Alur lengkap menghubungkan proyek lokal ke GitHub. Langkah 1 dilakukan di website GitHub; perintah sisanya adalah perintah standar. Di materi ini alur push/pull/clone diuji memakai "remote" berupa folder lokal, jadi tidak ada data yang dikirim ke internet. Prinsipnya sama persis dengan GitHub.

# 1. Di github.com: klik New repository, beri nama "portofolio",
#    JANGAN centang "Add a README" supaya repo benar-benar kosong.

# 2. Hubungkan repo lokal ke GitHub (ganti budi dengan username-mu)
cd portofolio
git remote add origin git@github.com:budi/portofolio.git
git remote -v
# → origin  git@github.com:budi/portofolio.git (fetch)
# → origin  git@github.com:budi/portofolio.git (push)

# 3. Push pertama
git push -u origin main
# → * [new branch]      main -> main
# → branch 'main' set up to track 'origin/main'.

# 4. Teman meng-clone, mengubah, lalu push
git clone git@github.com:budi/portofolio.git laptop-teman
cd laptop-teman
echo '<p>dari teman</p>' >> index.html
git commit -am "Tambah catatan teman"
git push

# 5. Kamu mengambil perubahan teman
cd ../portofolio
git pull
# → Updating 8047797..0cc3160
# → Fast-forward
# →  index.html | 1 +

Alur kontribusi lewat fork, termasuk menyinkronkan fork dengan repo asli (biasa disebut upstream):

git clone git@github.com:budi/proyek-open-source.git   # clone FORK milikmu
cd proyek-open-source
git remote add upstream https://github.com/pemilik/proyek-open-source.git
git switch -c perbaiki-typo-readme
# ... edit README.md ...
git commit -am "Perbaiki salah ketik di bagian instalasi"
git push -u origin perbaiki-typo-readme
# → lalu buka GitHub, klik "Compare & pull request"

# Nanti, untuk mengambil perubahan terbaru dari repo asli:
git switch main
git fetch upstream
git merge upstream/main
git push

Contoh deskripsi pull request yang baik:

**Apa yang berubah**
- Menambahkan form kontak di halaman about
- Validasi email sederhana di sisi browser

**Kenapa**
Pengunjung belum punya cara menghubungi kami selain email manual.

**Cara menguji**
1. Buka about.html dengan Live Server
2. Isi form dengan email tidak valid, harus muncul pesan error

Closes #12

Kesalahan umum

• Memasukkan password akun saat Git meminta password. Ditolak, karena autentikasi password sudah dihapus. Pakai personal access token atau SSH key.
• Repo GitHub dibuat dengan README, lalu push ditolak. Remote punya commit yang tidak ada di lokal. Jalankan git pull dulu (atau buat repo kosong sejak awal).
• Membuka PR raksasa. Reviewer kewalahan. Pecah menjadi PR kecil per fitur.
• Lupa git pull sebelum mulai kerja. Hasilnya konflik yang sebenarnya bisa dihindari. Jadikan git pull ritual pagi.
• Menyimpan token atau .env di repo publik. Bot pencari rahasia memindai GitHub terus-menerus. Kalau terlanjur, cabut (revoke) token itu segera, menghapus file saja tidak cukup.

Latihan

1. Mudah, Buat akun GitHub, buat SSH key, unggah key publiknya, dan uji dengan ssh -T git@github.com.
2. Sedang, Push repo portofolio dari modul sebelumnya ke GitHub, lalu aktifkan GitHub Pages dari branch main folder root. Buka situsnya di HP.
3. Menantang, Bersama teman (atau dengan akun kedua): buat issue "Tambah halaman kontak" di repo-mu, kerjakan di branch baru, buka PR yang memuat Closes #<nomor-issue>, minta teman me-review dan memberi satu komentar, perbaiki, lalu merge. Pastikan issue tertutup otomatis.

ssh-keygen -t ed25519 -C "email-github-kamu@contoh.id"
cat ~/.ssh/id_ed25519.pub
# salin ke GitHub > Settings > SSH and GPG keys > New SSH key
ssh -T git@github.com
# → Hi username-kamu! You've successfully authenticated, ...

cd portofolio
git remote add origin git@github.com:username-kamu/portofolio.git
git push -u origin main

# Misal issue yang dibuat bernomor #1
git switch main && git pull
git switch -c halaman-kontak
echo '<h1>Kontak</h1>' > kontak.html
git add kontak.html && git commit -m "Tambah halaman kontak"
git push -u origin halaman-kontak
# Di GitHub: buka PR, deskripsi diakhiri "Closes #1"
# Setelah review, perbaiki lalu:
git commit -am "Perbaiki judul halaman kontak sesuai review"
git push
# Merge PR di GitHub → issue #1 tertutup otomatis
git switch main && git pull && git branch -d halaman-kontak

Ringkasan

• Remote (biasanya origin) adalah salinan repo di GitHub; clone, push, pull untuk sinkronisasi.
• Autentikasi password untuk Git sudah dihapus; pakai personal access token (HTTPS) atau SSH key.
• Fork untuk berkontribusi ke repo orang lain; pull request untuk mengusulkan perubahan dan review.
• Review yang sehat: PR kecil, deskripsi jelas, komentari kode bukan orangnya.
• Issue mencatat bug/fitur; Closes #nomor menutupnya otomatis saat PR di-merge ke branch default.
• GitHub Pages menghosting situs statis gratis dari repo.