PANDUAN DEPLOY — GitHub Desktop (Untuk Pemula)

Target akhir: https://rezaprama.github.io/infraimpact/ live di internet. Total waktu sekitar 30–45 menit untuk pertama kali. Update berikutnya cuma 2 menit. Buka file ini di tab/jendela lain sambil Anda mengerjakan langkah-langkahnya.

✅ Checklist sebelum mulai

Komputer Windows terhubung internet stabil.
Akun GitHub Anda rezaprama sudah aktif dan bisa login.
Repo rezaprama.github.io sudah ada di akun Anda (Anda bilang ini sudah jadi web akademik Anda — berarti sudah ada).
Anda tahu email yang Anda pakai untuk akun GitHub (cek di https://github.com/settings/emails kalau lupa).
Folder E:\00 Claude\infraimpact-dashboard ada di komputer Anda (semua file sudah saya generate).

Kalau salah satu di atas belum, selesaikan dulu sebelum lanjut.

FASE 1 — Install GitHub Desktop (5 menit)

1.1 Download

Buka browser → ke https://desktop.github.com
Klik tombol biru besar “Download for Windows (64bit)”
File GitHubDesktopSetup-x64.exe terdownload (sekitar 150 MB). Tunggu selesai.

1.2 Instalasi

Double-click file installer yang baru di-download.
GitHub Desktop akan install otomatis tanpa banyak pertanyaan. Tunggu sekitar 1–2 menit.
Setelah install, aplikasi GitHub Desktop akan terbuka otomatis.
Yang Anda lihat: layar berwarna gelap dengan logo GitHub kucing 🐱 dan tulisan besar “Welcome to GitHub Desktop”.

Di layar Welcome → klik tombol biru “Sign in to GitHub.com”.

Browser default Anda akan terbuka ke halaman GitHub.

Browser membuka https://github.com/login. Login dengan akun rezaprama Anda.
Browser akan minta konfirmasi “Authorize GitHub Desktop” → klik “Authorize desktop” (tombol hijau).
Browser akan menampilkan pesan: “You’re ready to go!”
Klik tombol “Open GitHub Desktop” di pop-up browser.

2.3 Konfirmasi profil

Kembali ke jendela GitHub Desktop. Anda akan ditanya:

Name: isi nama Anda (mis. Reza Prama Arviandi).
Email: gunakan email GitHub Anda (rezapramaaa@gmail.com jika itu yang Anda daftarkan).

Klik “Finish” atau “Continue”.

Anda sekarang ada di layar utama GitHub Desktop. Sidebar kiri kosong. Tengah ada teks “No repositories found” dengan beberapa tombol.

FASE 3 — Clone repo `rezaprama.github.io` (5 menit)

“Clone” artinya menyalin repo dari github.com ke komputer Anda, sehingga Anda bisa edit lokal.

3.1 Mulai clone

Di layar utama GitHub Desktop, klik tombol “Clone a repository from the Internet…” (atau menu File → Clone repository).

Pop-up “Clone a repository” muncul dengan 3 tab: GitHub.com GitHub Enterprise URL.

3.2 Pilih repo

Pastikan tab GitHub.com aktif (biasanya default).
Di kotak pencarian “Filter your repositories”, ketik: rezaprama.github.io
Repo muncul di daftar. Klik untuk pilih (highlight biru).

3.3 Pilih lokasi penyimpanan di komputer

Di kolom “Local path”, klik “Choose…”.
Pilih folder yang gampang Anda ingat. Saya sarankan:
```
D:\github
```
Kalau drive D belum punya folder github, buat dulu lewat File Explorer:
- Buka File Explorer → drive D: → klik kanan area kosong → New → Folder → ketik github.
- Kembali ke GitHub Desktop, pilih folder D:\github.
Setelah path terisi, kolom Local path akan otomatis menampilkan:
```
D:\github\rezaprama.github.io
```

3.4 Klik Clone

Klik tombol biru “Clone” di bawah pop-up.

Akan muncul progress bar. Tunggu 10 detik – 2 menit tergantung ukuran repo Anda dan koneksi. Setelah selesai, GitHub Desktop kembali ke layar utama, tapi sekarang sidebar kiri menampilkan “rezaprama.github.io” (highlight biru, artinya repo aktif).

3.5 Verifikasi di File Explorer

Buka File Explorer → masuk ke D:\github\rezaprama.github.io\. Anda akan lihat file akademik Anda yang sudah ada (mis. index.html, about.html, gambar, dll — apapun yang sudah Anda pasang di web akademik Anda sebelumnya).

⚠️ JANGAN HAPUS atau UBAH file-file akademik yang sudah ada. Kita hanya akan menambah folder baru bernama infraimpact di sini.

FASE 4 — Copy folder dashboard ke repo lokal (5 menit)

4.1 Buka dua jendela File Explorer berdampingan

Jendela A — folder dashboard:

E:\00 Claude\infraimpact-dashboard

Jendela B — repo lokal Anda:

D:\github\rezaprama.github.io

Tip: setelah buka Jendela A, tekan Win + ← untuk snap ke kiri, lalu buka Jendela B dan tekan Win + → untuk snap ke kanan. Kedua jendela tampil berdampingan.

4.2 Buat folder `infraimpact` di repo

Di Jendela B (D:\github\rezaprama.github.io):

Klik kanan area kosong dalam folder → New → Folder.
Ketik nama: infraimpact (semua huruf kecil, persis seperti ini).
Tekan Enter.

Sekarang ada folder kosong D:\github\rezaprama.github.io\infraimpact\.

4.3 Pilih semua isi `infraimpact-dashboard`

Di Jendela A (E:\00 Claude\infraimpact-dashboard):

Klik di area kosong dalam folder.
Tekan Ctrl + A (select all).
Semua file dan subfolder ter-highlight biru. Anda akan lihat sekitar 40+ item termasuk:
- File: .nojekyll, index.html, README.md, LICENSE, CITATION.cff, DEPLOY_INSTRUCTIONS.md, PANDUAN_DEPLOY_GITHUB_DESKTOP.md, INFRAIMPACT_PRD_v0.1.md (kalau ada).
- Folder: assets, data, geo, docs, scripts.

⚠️ PENTING: pastikan .nojekyll (file dengan titik di depan, tanpa ekstensi) ikut ter-pilih. Kalau tidak kelihatan di File Explorer, aktifkan view hidden files:
File Explorer → tab View (atas) → centang “Hidden items”.

4.4 Copy ke folder `infraimpact`

Tekan Ctrl + C untuk copy.
Pindah ke Jendela B → masuk ke folder D:\github\rezaprama.github.io\infraimpact\ (folder yang baru Anda buat).
Tekan Ctrl + V untuk paste.

Progress bar copy akan muncul. Untuk 571 aset, ada satu file yearly_observations.json ~1.2 MB; total semua file sekitar 1.5 MB. Selesai dalam beberapa detik.

4.5 Verifikasi struktur akhir

Setelah copy selesai, struktur folder Anda harus persis seperti ini:

D:\github\rezaprama.github.io\
├── (file akademik Anda yang sudah ada — JANGAN DISENTUH)
└── infraimpact\
    ├── .nojekyll
    ├── index.html
    ├── README.md
    ├── LICENSE
    ├── CITATION.cff
    ├── DEPLOY_INSTRUCTIONS.md
    ├── PANDUAN_DEPLOY_GITHUB_DESKTOP.md
    ├── assets\
    │   ├── css\
    │   ├── img\
    │   └── js\
    ├── data\
    │   ├── assets.json           (~208 KB)
    │   ├── districts.json
    │   ├── indicators.json
    │   ├── metadata.json
    │   ├── provinces.json
    │   ├── recommendations.json
    │   ├── scoring_versions.json
    │   ├── thresholds.json
    │   ├── weights.json
    │   └── yearly_observations.json   (~1.2 MB)
    ├── docs\
    ├── geo\
    │   └── indonesia_provinces.geojson
    └── scripts\
        └── etl\
            └── generate_synthetic_571.py

Kalau struktur sudah seperti ini → siap commit. Kalau ada yang hilang, ulangi langkah 4.3–4.4.

FASE 5 — Commit & Push lewat GitHub Desktop (3 menit)

“Commit” = simpan snapshot perubahan ke history Git. “Push” = kirim snapshot itu ke github.com.

5.1 Kembali ke GitHub Desktop

Klik aplikasi GitHub Desktop di taskbar (atau Win+Tab).
Pastikan di sidebar kiri atas tertulis “Current repository: rezaprama.github.io”. Kalau bukan, klik dropdown dan pilih.

5.2 Lihat perubahan terdeteksi

Di panel kiri, di bawah label “Changes”, Anda akan lihat daftar panjang file yang ditandai dengan tanda + hijau (artinya: file baru).

Jumlah file: sekitar 40+ file. Termasuk:
infraimpact/.nojekyll
infraimpact/index.html
infraimpact/assets/css/styles.css
infraimpact/data/yearly_observations.json
… dst.

Di kanan, klik salah satu file → preview isinya muncul. Ini opsional, hanya untuk memuaskan rasa ingin tahu.

5.3 Tulis commit message

Di kiri-bawah panel GitHub Desktop ada dua kotak teks:

Summary (required) — kotak besar atas. Tulis:
```
Add INFRAIMPACT Dashboard MVP 1
```

Description (optional) — kotak besar bawah. Tulis (boleh dikosongkan, tapi sebaiknya isi):

571 simulated sanitation assets across 34 provinces.
Dataset: simulated placeholder for academic demonstration.
Live at https://rezaprama.github.io/infraimpact

5.4 Klik Commit

Klik tombol biru besar di bawah: “Commit to main”.

Tombol bisa juga bertulis “Commit to master” — sama saja, ikuti apa pun tulisannya. Daftar Changes akan kosong, dan di atas muncul notifikasi singkat.

5.5 Push ke github.com

Di sudut kanan atas GitHub Desktop, cari tombol “Push origin” (ada ikon panah ke atas ↑).
Tombol ini menampilkan badge angka, mis. “Push origin (1)” = ada 1 commit yang belum di-push.
Klik tombol “Push origin”.
Progress bar muncul sebentar. Selesai dalam 10–60 detik tergantung ukuran upload.

Setelah push selesai, tombol berubah jadi “Fetch origin” — itu tandanya semua sudah ke-upload ke github.com.

5.6 Verifikasi di github.com

Buka browser → https://github.com/rezaprama/rezaprama.github.io

Anda akan lihat folder baru infraimpact muncul di daftar file repo. Klik folder itu — semua isi dashboard ada di sana.

Kalau folder infraimpact belum muncul, refresh halaman (F5). Cache browser kadang menunda tampilan.

FASE 6 — Tunggu GitHub Pages Deploy & Verifikasi Live (2–5 menit)

6.1 Pastikan GitHub Pages aktif

Di halaman repo rezaprama/rezaprama.github.io (di browser):

Klik tab Settings (paling kanan di baris tab repo).
Sidebar kiri → klik Pages.
Pastikan section “Build and deployment”:
- Source: Deploy from a branch
- Branch: main (atau master — apapun branch default Anda) → folder / (root)
- Kalau sudah benar → tidak perlu klik apa-apa.
- Kalau berubah → klik Save.

Bagian atas halaman menampilkan: “Your site is live at https://rezaprama.github.io/“

6.2 Cek status deploy

Kembali ke halaman utama repo (klik nama repo di breadcrumb).
Klik tab Actions (di baris tab repo, sebelah Settings).
Anda akan lihat daftar workflow runs. Yang paling atas adalah commit terbaru Anda.
Lihat statusnya:
- 🟡 Lingkaran kuning berputar = sedang build & deploy. Tunggu.
- ✅ Centang hijau = sudah live.
- ❌ Tanda silang merah = ada error. Klik untuk lihat detail (kalau ini terjadi, lapor ke saya).

Build biasanya selesai dalam 30–90 detik.

6.3 Buka dashboard live!

Setelah centang hijau muncul, buka tab baru di browser → URL:

https://rezaprama.github.io/infraimpact/

(Perhatikan trailing slash / di akhir — kadang membantu mencegah 404.)

Halaman pertama load mungkin agak lambat (3–5 detik) karena fetch GeoJSON Indonesia dari CDN. Selanjutnya cepat karena cache.

6.4 Smoke test cepat di dashboard live

Cek satu per satu (5 menit):

🎉 Jika semua ✅ → dashboard Anda sudah live.

FASE 7 — Workflow Update untuk Nanti (saat tesis Anda selesai)

Saat data riil Direktorat Sanitasi tersedia atau Anda mau update apa pun, alurnya:

7.1 Edit file lokal

Buka File Explorer → D:\github\rezaprama.github.io\infraimpact\data\
Ganti file yang perlu (misal yearly_observations.json, assets.json).
Atau update metadata.json: cut_off_date, data_revision_number.

7.2 Commit & push lewat GitHub Desktop

Buka GitHub Desktop. Repo rezaprama.github.io masih ada di sidebar.
Daftar Changes akan otomatis menampilkan file yang Anda ubah.

Summary: tulis pesan singkat, mis.:

data: refresh observations to v3 (real data)

Klik “Commit to main”.
Klik “Push origin”.
Tunggu 30–90 detik → refresh https://rezaprama.github.io/infraimpact/ → data baru terlihat.

Step 7.2 ini total 2 menit setelah pengalaman pertama.

7.3 Tip update besar (tambah tahun 2025)

Jika tahun bertambah (mis. data 2025 masuk), Anda perlu mengubah dua angka di kode:

Buka index.html dengan Notepad atau Notepad++ atau VS Code.
Cari dengan Ctrl+F kata: max="2024" → ganti semua jadi max="2025" (ada 3 tempat).
Buka assets/js/app.js → cari: y <= 2024 → ganti jadi y <= 2025.
Buka assets/js/store.js → cari: year: 2024 → ganti default ke 2025.
Edit data/metadata.json → "year_span": [2015, 2025].
Commit & push (langkah 7.2).

🆘 TROUBLESHOOTING

“Tombol Push origin tidak muncul / berwarna abu-abu”

Sebab: belum ada commit baru atau koneksi internet putus. Solusi: pastikan Anda sudah klik “Commit to main” dulu (Fase 5.4). Cek koneksi internet.

“Authentication failed” saat push

Sebab: session login expired. Solusi: GitHub Desktop → menu File → Options → Accounts → klik “Sign out” lalu “Sign in” ulang.

URL `rezaprama.github.io/infraimpact` muncul halaman 404

Sebab: folder belum ter-commit, atau GitHub Pages masih build. Solusi:

Cek di github.com bahwa folder infraimpact/ benar-benar ada di repo (refresh halaman repo).
Cek tab Actions untuk lihat status deploy.
Tunggu 2–3 menit lagi.
Hard refresh browser (Ctrl+Shift+R).

Peta blank, console error “fetch data/xxx.json 404”

Sebab: folder data/ tidak ter-upload, atau path salah. Solusi:

Buka https://github.com/rezaprama/rezaprama.github.io/tree/main/infraimpact/data — apakah file-file JSON ada?
Kalau tidak ada: ulangi Fase 4–5 — copy folder data/ ke D:\github\rezaprama.github.io\infraimpact\data\ lagi → commit & push.

Marker aset tidak muncul setelah klik kab/kota

Sebab: kemungkinan filter tertentu menyaring habis aset. Solusi: klik tombol “Reset” di breadcrumb atas. Cek di sidebar kiri semua checkbox masih tercentang.

“File `yearly_observations.json` terlalu besar” warning di GitHub Desktop

Sebab: GitHub memberi warning untuk file > 50 MB. Solusi: file kita cuma 1.2 MB — tidak akan trigger warning ini. Kalau muncul, lapor ke saya.

📞 Setelah Dashboard Live

Screenshot URL sebagai bukti untuk lampiran sidang.
Bagikan link ke pembimbing tesis Anda.
Pertimbangkan DOI Zenodo (untuk publikasi Q1):
- Buka https://zenodo.org → login dengan GitHub.
- Settings → GitHub → cari rezaprama.github.io → toggle ON.
- Buat release di github.com (Releases → Create new release → tag v0.1).
- Zenodo otomatis mint DOI permanen.
- Update CITATION.cff dengan DOI tsb.

Ringkasan Singkat (Cheat Sheet)

INSTALL          → desktop.github.com → install → login
CLONE            → File > Clone > pilih rezaprama.github.io → D:\github
COPY FILES       → E:\00 Claude\infraimpact-dashboard\* → D:\github\rezaprama.github.io\infraimpact\
COMMIT           → GitHub Desktop → summary "Add INFRAIMPACT MVP 1" → Commit to main
PUSH             → tombol "Push origin" (kanan atas)
VERIFY           → https://rezaprama.github.io/infraimpact/   (tunggu 1–2 menit)

URL final permanen: https://rezaprama.github.io/infraimpact/

Reza Prama Arviandi