AI Web Building #07 — Upload Project Website ke GitHub

Artikel 7 dari 8 · Tahap Version Control

Website Sudah Selesai, Sekarang Simpan Source Code-nya

Kita sudah berhasil membangun website dan menyelesaikan pengujian kualitas.

Langkah krusial berikutnya adalah menyimpan seluruh source code ke tempat yang aman, terorganisir, dan mudah dikelola. Di sinilah GitHub memegang peranan utama.

GitHub adalah platform online untuk menyimpan serta mengelola repository Git. Dengan Git, kita dapat melacak riwayat setiap perubahan kode, bekerja sama dalam tim, dan menghubungkan website ke platform cloud hosting secara otomatis.

1. Kenali Git dan GitHub

Meskipun namanya serupa, Git dan GitHub memiliki fungsi yang berbeda:

Aspek	Git	GitHub
Definisi	Software Version Control System (VCS) yang berjalan di komputer lokal.	Platform berbasis cloud untuk menyimpan dan membagikan repository Git.
Fungsi Utama	Mencatat riwayat snapshot perubahan kode (`commit`, `branch`).	Backup online, kolaborasi tim, issue tracking, dan otomatisasi deployment.
Koneksi Internet	Bisa digunakan offline sepenuhnya di komputermu.	Memerlukan koneksi internet untuk sinkronisasi (`push` / `pull`).

2. Buat Akun GitHub

Buka github.com dan buat akun jika kamu belum memilikinya.
Verifikasi email dan selesaikan pengaturan profil dasarmu.
Setelah masuk ke dashboard, kamu siap membuat repository proyek.

3. Pahami Struktur Proyek

Sebelum mengunggah, periksa struktur folder proyek web kamu (contoh proyek React/Vite modern):

hospital-website/
├── public/              # Aset statis (favicon, logo)
├── src/
│   ├── components/      # Komponen UI (Navbar, Button, Card)
│   ├── pages/           # Halaman web (Home, Doctors, Contact)
│   ├── App.jsx          # Komponen root aplikasi
│   └── main.jsx         # Entry point aplikasi
├── index.html           # HTML template utama
├── package.json         # Daftar dependency & scripts
├── package-lock.json    # Catatan versi library
├── .gitignore           # File/folder yang tidak boleh di-upload
└── README.md            # Dokumentasi proyek

[!IMPORTANT] Pastikan kamu mengunggah seluruh source code proyek, bukan hanya folder hasil build (dist/) atau screenshot gambar.

4. Cara Paling Praktis: Sinkronisasi Langsung dari AI Studio

Jika proyekmu dibuat melalui Google AI Studio, kamu bisa memanfaatkan integrasi GitHub bawaan tanpa membuka terminal:

Buka proyek kamu di Google AI Studio.
Buka panel Settings dan masuk ke tab GitHub.
Hubungkan akun GitHub kamu dan beri otorisasi akses.
Buat repository baru (misal: hospital-website) atau pilih repository yang sudah ada.
Lakukan sinkronisasi (Sync). File proyek akan langsung tersimpan di GitHub secara rapi.

5. Alternatif: Upload Menggunakan Git (Manual via Terminal)

Jika kamu mengunduh source code ke komputer lokal, kamu bisa menggunakan Git melalui terminal atau command prompt:

Langkah 1: Buat repository baru di GitHub

Klik tanda + di pojok kanan atas GitHub, lalu pilih New repository.
Beri nama repository, misalnya: hospital-website.
Pilih opsi Public (agar bisa dilihat untuk portofolio) atau Private.
Biarkan opsi Add README, .gitignore, dan license dalam kondisi tidak dicentang (agar repository kosong).

Langkah 2: Buka terminal pada folder proyek dan jalankan perintah berikut:

# Inisialisasi repository Git lokal dengan branch utama bernama main
git init -b main

# Daftarkan seluruh file ke staging area
git add .

# Simpan snapshot pertama proyek
git commit -m "Initial commit: Hospital Website first release"

# Hubungkan repository lokal dengan repository GitHub kamu
# (Ganti USERNAME dengan username GitHub aslimu)
git remote add origin https://github.com/USERNAME/hospital-website.git

# Upload seluruh file ke GitHub
git push -u origin main

6. JANGAN Upload Informasi Rahasia!

Ini adalah aturan keamanan terpenting dalam software engineering:

[!CAUTION] Jangan pernah mengunggah password, token, private key, atau secret API key ke GitHub publik. File sensitif dapat terdeteksi oleh bot pencuri kredensial dalam hitungan detik.

Gunakan file .gitignore di root folder untuk mengecualikan file lokal sensitif:

# Dependency & build output
node_modules/
dist/
build/

# Environment variables & secrets
.env
.env.local
.env.*
!.env.example

Jika ada API key yang perlu digunakan tim lain, sediakan file .env.example yang hanya berisi nama variabel kosong tanpa isi rahasia.

7. Buat Dokumentasi README yang Informatif

File README.md adalah halaman depan proyekmu di GitHub. Salin dan sesuaikan template berikut:

# Hospital Website

A modern, responsive hospital website built with AI assistance and modern web technologies.

## 🌟 Fitur Utama
- **Direktori Dokter**: Menampilkan daftar dokter lengkap dengan spesialisasi dan jadwal.
- **Pencarian & Filter**: Mempermudah pasien mencari layanan berdasarkan poli klinik.
- **Simulasi Booking Janji Temu**: Formulir interaktif untuk reservasi pemeriksaan.
- **Desain Responsive**: Optimal untuk desktop, tablet, dan smartphone.

## 🛠️ Tech Stack
- React / Vite
- Tailwind CSS
- Lucide React (Icons)

## 🚀 Cara Menjalankan Lokal
1. Clone repository:
   ```bash
   git clone https://github.com/USERNAME/hospital-website.git

Masuk ke direktori:
COMMAND
```
cd hospital-website
```
Install dependency:
COMMAND
```
npm install
```
Jalankan development server:
COMMAND
```
npm run dev
```

📄 Lisensi & Status

Demo project for educational purposes.


---

### 8. Cara Memperbarui Repository ke Depannya

Ketika kamu melakukan perbaikan atau penambahan fitur di kemudian hari, kirimkan pembaruan dengan alur sederhana ini:

```bash
git add .
git commit -m "Fix appointment form validation and update hero banner"
git push

[!TIP] Tulis pesan commit yang deskriptif dan menjelaskan apa yang kamu ubah. Pesan seperti "Fix appointment form validation" jauh lebih bermanfaat daripada sekadar tulisan "update".

Hasil Akhir Materi #07

Source code website telah tersimpan dengan aman di GitHub, memiliki file .gitignore yang melindungi data rahasia, serta dilengkapi dokumentasi README.md yang profesional.

Kesimpulan

Memahami Git dan GitHub adalah fondasi penting dalam dunia web development modern. Selain mengamankan aset kodemu, repository GitHub adalah jembatan langsung menuju proses deployment online.

Di materi pamungkas #08, kita akan menghubungkan repository GitHub ini ke Vercel agar website kamu bisa diakses oleh siapa saja di seluruh dunia!