{JS}indo

Git & GitHub untuk Pemula

⏱ 8 menit baca

Pengantar

Bayangin kamu nulis novel. Setiap hari kamu edit, tambah, hapus paragraf. Suatu hari kamu sadar: "Eh, versi kemarin lebih bagus deh." Tapi udah ke-save. Hilang.

Git adalah mesin waktu untuk kode kamu. Setiap perubahan yang kamu "commit" tersimpan selamanya. Mau balik ke versi 3 hari lalu? Bisa. Mau lihat siapa yang nulis baris ini? Bisa. Mau kerja bareng 10 orang tanpa saling timpa? Bisa.

GitHub adalah "Google Drive"-nya Git. Tempat kamu simpan kode online, kolaborasi, dan pamer portofolio.

1.1 Instalasi Git

Windows

Download dari git-scm.com, install, next-next-finish.

Mac

bash
brew install git

Linux (Ubuntu/Debian)

bash
sudo apt install git

Verifikasi

bash
git --version
# git version 2.43.0 (atau versi terbaru)

Setup Identitas (WAJIB, cuma sekali)

bash
git config --global user.name "Nama Kamu"
git config --global user.email "email@kamu.com"

Ini bukan login. Ini cuma label yang nempel di setiap commit kamu — kayak tanda tangan.

1.2 Konsep Dasar Git

Analogi: Foto Album

Konsep GitAnalogi
Working DirectoryMeja kerja — tempat kamu edit file
Staging AreaMeja foto — file yang siap difoto
RepositoryAlbum foto — kumpulan semua foto (commit)
CommitSatu foto — snapshot kode di satu waktu

Alur Kerja Git

[Edit file] → git add → [Staging] → git commit → [Repository] ↑ | └────────────── git checkout ←───────────────────────┘
  1. Kamu edit file di working directory
  2. Kamu pilih file mana yang mau di-commit (git add)
  3. Kamu commit — Git ambil "foto" dari semua file di staging

Kenapa Ada Staging?

Karena kadang kamu edit 5 file, tapi cuma mau commit 2. Staging = filter.

1.3 Perintah Dasar

Membuat Repository Baru

bash
# Buat folder project
mkdir project-pertama
cd project-pertama

# Inisialisasi Git
git init

Sekarang folder ini punya "kekuatan" Git. Ada folder .git tersembunyi yang nyimpan semua history.

Melihat Status

bash
git status

Ini perintah yang paling sering kamu pakai. Dia kasih tahu:

  • File mana yang berubah (merah = belum di-staging)
  • File mana yang siap di-commit (hijau = sudah di-staging)
  • File baru yang belum di-track

Menambahkan File ke Staging

bash
# Tambah satu file
git add index.html

# Tambah semua file yang berubah
git add .

# Tambah file tertentu pakai pattern
git add *.js

Membuat Commit

bash
git commit -m "Pesan yang menjelaskan perubahan"

Tips pesan commit yang bagus:

  • ❌ "update" — update apanya?
  • ❌ "fix bug" — bug yang mana?
  • ✅ "tambah validasi email di form registrasi"
  • ✅ "fix: tombol login tidak responsive di mobile"

Melihat History

bash
# Semua commit
git log

# Versi ringkas (satu baris per commit)
git log --oneline

# Dengan grafik branch
git log --oneline --graph --all

⚠️ Jebakan

bash
# JANGAN commit file sensitif!
# Password, API key, .env — JANGAN masuk Git

# Buat file .gitignore untuk exclude file
echo "node_modules/" >> .gitignore
echo ".env" >> .gitignore
echo "*.log" >> .gitignore

1.4 Branching — Kerja Paralel

Analogi: Jalur Kereta

Branch itu kayak jalur kereta yang bercabang. Kereta utama (main) tetap jalan. Kamu bikin jalur baru untuk eksperimen. Kalau berhasil, gabungkan kembali. Kalau gagal, buang jalurnya — kereta utama nggak terpengaruh.

Membuat & Pindah Branch

bash
# Lihat semua branch
git branch

# Buat branch baru
git branch fitur-login

# Pindah ke branch itu
git checkout fitur-login

# Shortcut: buat + pindah sekaligus
git checkout -b fitur-login

Merge — Menggabungkan Branch

bash
# Pindah ke main dulu
git checkout main

# Gabungkan fitur-login ke main
git merge fitur-login

Hapus Branch (setelah merge)

bash
git branch -d fitur-login

Kapan Pakai Branch?

  • Fitur baru → fitur-nama-fitur
  • Perbaikan bug → fix-deskripsi-bug
  • Eksperimen → coba-teknologi-baru

Aturan emas: Jangan pernah kerja langsung di main. Selalu buat branch.

1.5 Merge Conflict — Ketika Dua Orang Edit Baris yang Sama

Analogi

Kamu dan teman sama-sama edit baris ke-5 di file yang sama. Git bingung: "Mau pakai versi siapa?" Ini namanya conflict.

Tampilan Conflict

javascript
<<<<<<< HEAD
const warna = "merah";
=======
const warna = "biru";
>>>>>>> fitur-tema
  • Antara <<<<<<< HEAD dan ======= = versi kamu (branch saat ini)
  • Antara ======= dan >>>>>>> fitur-tema = versi dari branch yang di-merge

Cara Resolve

  1. Buka file yang conflict
  2. Pilih versi yang benar (atau gabungkan keduanya)
  3. Hapus marker <<<<<<<, =======, >>>>>>>
  4. Save, lalu:
bash
git add file-yang-conflict.js
git commit -m "resolve conflict: pilih warna biru untuk tema"

Tips Menghindari Conflict

  • Commit sering (jangan numpuk perubahan besar)
  • Pull sebelum mulai kerja
  • Komunikasi sama tim: "Gue lagi edit file X ya"

1.6 GitHub — Remote Repository

Analogi

Git = buku catatan pribadi di meja kamu. GitHub = perpustakaan online tempat kamu simpan salinan buku itu, dan orang lain bisa baca/kontribusi.

Membuat Akun GitHub

  1. Buka github.com
  2. Sign up (gratis)
  3. Verifikasi email

Menghubungkan Local ke GitHub

bash
# 1. Buat repository baru di GitHub (klik tombol "New")
# 2. Copy URL repository-nya
# 3. Di terminal:

git remote add origin https://github.com/username/nama-repo.git

# 4. Push kode pertama kali
git push -u origin main

Push & Pull

bash
# Upload perubahan ke GitHub
git push

# Download perubahan dari GitHub (misal teman sudah push)
git pull

Clone — Download Repository yang Sudah Ada

bash
git clone https://github.com/username/nama-repo.git

Ini otomatis:

  • Download semua file
  • Download semua history
  • Setup remote origin

1.7 Pull Request (PR) — Kolaborasi Profesional

Analogi

PR itu kayak "proposal perubahan". Kamu bilang: "Hei, gue udah bikin fitur X di branch ini. Tolong review dan approve ya sebelum masuk ke main."

Alur PR

1. Buat branch → kerjakan fitur 2. Push branch ke GitHub 3. Buka GitHub → klik "New Pull Request" 4. Tulis deskripsi: apa yang berubah, kenapa 5. Reviewer baca kode, kasih komentar 6. Kalau OK → Merge 7. Hapus branch

Cara Buat PR

bash
# Di local
git checkout -b fitur-dark-mode
# ... edit file ...
git add .
git commit -m "tambah dark mode toggle"
git push -u origin fitur-dark-mode

Lalu buka GitHub → akan muncul banner "Compare & pull request" → klik → isi deskripsi → Create.

Template Deskripsi PR yang Bagus

markdown
## Apa yang berubah?
- Tambah toggle dark mode di header
- Simpan preferensi user di localStorage

## Kenapa?
User minta fitur dark mode (issue #12)

## Screenshot
[lampirkan screenshot sebelum/sesudah]

## Cara test
1. Buka halaman utama
2. Klik icon bulan di header
3. Halaman berubah ke dark mode

1.8 Fork & Open Source

Analogi

Fork = fotokopi buku orang lain ke akun kamu. Kamu bisa coret-coret sesuka hati tanpa mengganggu buku aslinya. Kalau coretan kamu bagus, kamu bisa kirim "surat" (PR) ke pemilik asli: "Hei, mau nggak pakai coretan gue?"

Alur Kontribusi Open Source

1. Fork repository (klik tombol Fork di GitHub) 2. Clone fork kamu ke local 3. Buat branch, kerjakan perubahan 4. Push ke fork kamu 5. Buat PR dari fork kamu → ke repo asli 6. Maintainer review → merge (atau minta revisi)
bash
# Clone fork kamu
git clone https://github.com/KAMU/repo-orang.git
cd repo-orang

# Tambah remote ke repo asli (untuk sync)
git remote add upstream https://github.com/ASLI/repo-orang.git

# Sync fork kamu dengan repo asli
git fetch upstream
git merge upstream/main

1.9 .gitignore — File yang Tidak Boleh Masuk Git

File yang WAJIB di-ignore:

bash
# Dependencies (bisa di-install ulang)
node_modules/
vendor/

# Environment variables (RAHASIA!)
.env
.env.local
.env.production

# Build output (bisa di-generate ulang)
dist/
build/
.next/
out/

# OS files
.DS_Store
Thumbs.db

# IDE settings (preferensi pribadi)
.vscode/
.idea/

# Logs
*.log
npm-debug.log*

Kenapa?

  • node_modules/ → ribuan file, bisa di-install ulang pakai npm install
  • .env → berisi password/API key. Kalau ke-push, BAHAYA
  • dist/ → hasil build, bisa di-generate ulang

⚠️ Jebakan

Kalau file sudah terlanjur di-commit, menambahkannya ke .gitignore tidak akan menghapusnya dari Git. Kamu harus:

bash
# Hapus dari Git (tapi tetap ada di folder)
git rm --cached .env
git commit -m "hapus .env dari tracking"

1.10 Perintah Berguna Lainnya

Membatalkan Perubahan

bash
# Batalkan perubahan di file (belum di-staging)
git checkout -- nama-file.js

# Keluarkan file dari staging (sudah git add, belum commit)
git reset HEAD nama-file.js

# Batalkan commit terakhir (perubahan tetap ada di file)
git reset --soft HEAD~1

# Batalkan commit terakhir (perubahan HILANG — hati-hati!)
git reset --hard HEAD~1

Stash — Simpan Sementara

bash
# Simpan perubahan sementara (tanpa commit)
git stash

# Lihat daftar stash
git stash list

# Ambil kembali
git stash pop

Kapan pakai? Kamu lagi ngerjain fitur A, tiba-tiba harus fix bug urgent. Stash dulu kerjaan A, fix bug, commit, lalu pop stash.

Melihat Perubahan

bash
# Lihat apa yang berubah (belum di-staging)
git diff

# Lihat apa yang sudah di-staging
git diff --staged

# Lihat perubahan di commit tertentu
git show abc1234

Alias — Shortcut

bash
git config --global alias.st status
git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.cm "commit -m"
git config --global alias.lg "log --oneline --graph --all"

Sekarang bisa pakai:

bash
git st        # = git status
git co main   # = git checkout main
git lg        # = git log --oneline --graph --all

1.11 GitHub Pages — Deploy Website Gratis

Langkah

  1. Push kode website (HTML/CSS/JS) ke repository
  2. Buka Settings → Pages
  3. Source: pilih branch main, folder / (root) atau /docs
  4. Save → tunggu 1-2 menit
  5. Website live di https://username.github.io/nama-repo

Untuk Project Next.js/React (Static Export)

bash
# Di next.config.js, tambah:
# output: 'export'

npm run build
# Hasil di folder 'out/'
# Push folder out/ atau pakai GitHub Actions

1.12 GitHub Actions — Otomasi

Analogi

GitHub Actions = robot yang otomatis jalan setiap kamu push. Bisa disuruh: test kode, build, deploy, kirim notifikasi — apapun.

Contoh: Auto Deploy ke GitHub Pages

Buat file .github/workflows/deploy.yml:

yaml
name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      
      - run: npm install
      - run: npm run build
      
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./out

Setiap kamu push ke main, robot ini otomatis build dan deploy!

1.13 Best Practices

Commit Messages

Pakai format Conventional Commits:

feat: tambah fitur dark mode fix: perbaiki bug login di mobile docs: update README dengan instruksi install style: rapikan indentasi di header.tsx refactor: pisahkan logic auth ke file terpisah test: tambah unit test untuk fungsi hitungDiskon chore: update dependencies

Branching Strategy (untuk tim)

main ← production (yang user lihat) └── develop ← development (gabungan semua fitur) ├── fitur-login ├── fitur-cart └── fix-responsive

Aturan Emas

  1. Commit sering — lebih baik 10 commit kecil daripada 1 commit raksasa
  2. Jangan commit file yang bisa di-generate (node_modules, build, dist)
  3. Jangan commit rahasia (.env, API key, password)
  4. Tulis pesan commit yang jelas — future-you akan berterima kasih
  5. Selalu buat branch untuk fitur/fix baru
  6. Pull sebelum push — hindari conflict
  7. Review PR sebelum merge — 4 mata lebih baik dari 2

1.14 Cheat Sheet

PerintahFungsi
git initInisialisasi repo baru
git clone URLDownload repo dari GitHub
git statusLihat status file
git add .Staging semua perubahan
git commit -m "msg"Buat commit
git pushUpload ke GitHub
git pullDownload dari GitHub
git branch namaBuat branch baru
git checkout namaPindah branch
git checkout -b namaBuat + pindah branch
git merge namaGabungkan branch
git log --onelineLihat history ringkas
git diffLihat perubahan
git stashSimpan sementara
git remote -vLihat remote URL

🏋️ Challenge

Challenge 1: First Commit

  1. Buat folder latihan-git
  2. git init
  3. Buat file hello.txt dengan isi "Halo Git!"
  4. Add dan commit dengan pesan yang bagus
  5. Buat perubahan, commit lagi
  6. Lihat history dengan git log --oneline

Challenge 2: Branching

  1. Dari challenge 1, buat branch fitur-baru
  2. Di branch itu, tambah file fitur.txt
  3. Commit
  4. Pindah ke main
  5. Merge fitur-baru ke main
  6. Hapus branch fitur-baru

Challenge 3: GitHub

  1. Buat repository baru di GitHub
  2. Push project dari challenge 1 & 2 ke GitHub
  3. Edit file langsung di GitHub (klik icon pensil)
  4. Pull perubahan ke local
  5. Buat branch baru, push, lalu buat Pull Request

Challenge 4: Kolaborasi (butuh teman/akun kedua)

  1. Fork repository teman
  2. Clone fork kamu
  3. Buat branch, tambah perubahan
  4. Push dan buat PR ke repo teman
  5. Minta teman review dan merge

Penutup

Git dan GitHub bukan cuma tools — ini bahasa universal developer. Setiap perusahaan tech pakai Git. Setiap project open source ada di GitHub. Dengan menguasai ini, kamu bisa:

  • Kolaborasi dengan developer manapun di dunia
  • Punya portofolio yang bisa dilihat recruiter
  • Kontribusi ke project open source
  • Tidak pernah kehilangan kode lagi

Next step: Coba kontribusi ke project open source pertamamu! Mulai dari yang kecil: fix typo di dokumentasi, tambah terjemahan, atau improve README.

Sudah paham materi ini?

Tandai sebagai selesai untuk melacak progress-mu.