Tutorial Membuat Portofolio Online Gratis dengan GitHub Pages untuk Pemula

Punya skill tapi belum punya tempat untuk memamerkannya? Portofolio online adalah cara paling efektif untuk menunjukkan kemampuan kamu ke calon klien atau recruiter. Kabar baiknya, kamu tidak perlu bayar hosting atau domain mahal. GitHub Pages menawarkan hosting gratis yang cukup powerful, dan yang lebih menarik lagi—kamu bisa mengaturnya langsung dari Termux di smartphone. Artikel ini akan memandu kamu membuat portofolio online dari nol, dengan pendekatan praktis yang sudah saya coba sendiri.

Mengapa GitHub Pages?

GitHub Pages bukan sekadar hosting gratis. Platform ini memberikan kamu subdomain otomatis (username.github.io), support custom domain kalau nanti kamu mau upgrade, dan yang paling penting—terintegrasi langsung dengan Git. Artinya, setiap kali kamu push perubahan, website langsung terupdate. Tidak ada FTP, tidak ada cPanel yang membingungkan. Cocok banget untuk developer yang ingin fokus ke konten, bukan ke infrastruktur.

Persiapan Awal

Sebelum mulai, pastikan kamu sudah punya akun GitHub. Kalau belum, daftar dulu di github.com—gratis dan prosesnya cepat. Untuk pengguna Termux, install Git dan editor teks seperti nano atau vim. Jalankan command berikut di Termux:

pkg update && pkg upgrade
pkg install git

Setelah itu, konfigurasi identitas Git kamu supaya commit tercatat dengan benar:

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

Gunakan email yang sama dengan akun GitHub kamu agar kontribusi tercatat di profil.

Langkah Praktis Membuat Portofolio

1. Buat Repository Khusus
   Login ke GitHub, klik tombol "New repository". Beri nama repository dengan format username.github.io (ganti username dengan username GitHub kamu). Centang opsi "Public" dan "Add a README file". Ini adalah repository spesial yang otomatis jadi website utama kamu.
2. Clone Repository ke Termux
   Buka Termux, lalu clone repository yang baru kamu buat:
   git clone https://github.com/username/username.github.io.git
cd username.github.io
   Sekarang kamu punya folder lokal yang tersinkron dengan GitHub.
3. Buat File HTML Sederhana
   Mulai dengan struktur dasar. Buat file index.html menggunakan nano:
   nano index.html
   Isi dengan template sederhana yang mencakup nama, bio singkat, dan link ke project kamu. Tidak perlu fancy di awal—yang penting struktur jelas dan konten informatif. Simpan dengan Ctrl+O, lalu keluar dengan Ctrl+X.
4. Tambahkan CSS untuk Tampilan
   Buat file style.css di folder yang sama. Fokus ke readability: font yang nyaman dibaca, spacing yang cukup, dan kontras warna yang baik. Hindari animasi berlebihan yang bikin loading lambat. Link file CSS di dalam tag head HTML kamu.
5. Push ke GitHub
   Setelah file siap, commit dan push perubahan:
   git add .
git commit -m "Initial portfolio setup"
git push origin main
   Tunggu beberapa menit, lalu akses https://username.github.io. Website kamu sudah live.
6. Tambahkan Halaman Project
   Buat folder projects dan isi dengan file HTML terpisah untuk setiap project. Struktur folder yang rapi memudahkan maintenance jangka panjang. Link setiap project dari halaman utama menggunakan relative path.
7. Optimasi untuk Mobile
   Tambahkan meta viewport di HTML dan gunakan media queries di CSS. Mayoritas visitor akan akses dari smartphone, jadi pastikan layout responsive. Test di browser mobile Termux atau Chrome mobile sebelum push final.

Kesalahan yang Sering Terjadi

• Nama repository salah — Harus persis username.github.io. Kalau typo atau pakai nama lain, GitHub tidak akan otomatis deploy sebagai website utama.
• Branch tidak sesuai — GitHub Pages default menggunakan branch main atau master. Cek di Settings > Pages untuk memastikan branch yang aktif benar.
• File index.html tidak ada di root — GitHub Pages mencari index.html di root directory. Kalau file ada di subfolder, website tidak akan muncul.
• Lupa git pull sebelum edit — Kalau kamu edit dari device berbeda, selalu pull dulu sebelum mulai kerja. Conflict merge bisa bikin pusing kalau tidak hati-hati.
• Gambar terlalu besar — Compress gambar sebelum upload. File besar bikin loading lambat dan makan kuota visitor. Gunakan format WebP atau JPEG dengan kompresi 70-80%.
• Hardcode absolute URL — Gunakan relative path untuk link internal. Kalau nanti kamu pindah ke custom domain, tidak perlu ubah semua link.

Tips Aman dan Etis

Jangan pernah commit file yang berisi credential, API key, atau token akses. Gunakan .gitignore untuk exclude file sensitif. Kalau tidak sengaja commit credential, jangan cukup hapus file—ganti credential tersebut karena history Git masih menyimpannya.

Untuk konten, pastikan semua project yang kamu tampilkan adalah karya sendiri atau kamu punya izin untuk memamerkannya. Kalau ada code dari tutorial atau open source, beri credit yang jelas. Recruiter menghargai kejujuran lebih dari portfolio yang terlihat sempurna tapi tidak autentik.

Hindari menggunakan portofolio untuk mempromosikan tool atau script yang melanggar terms of service platform lain. Fokus ke project yang menunjukkan problem-solving skill dan technical competence yang legitimate.

Meningkatkan Kualitas Portofolio

Setelah struktur dasar jalan, tambahkan section "About" yang menjelaskan background dan skill kamu dengan jujur. Tidak perlu berlebihan—recruiter lebih tertarik ke kemampuan nyata daripada buzzword. Sertakan link ke GitHub profile, LinkedIn, atau contact email.

Untuk setiap project, jelaskan problem yang kamu solve, teknologi yang digunakan, dan hasil yang dicapai. Screenshot atau demo link sangat membantu. Kalau project masih work in progress, tulis dengan jelas—menunjukkan kamu aktif develop lebih baik daripada portofolio yang stagnan.

Update portofolio secara berkala. Setiap kali selesai project baru atau belajar skill baru, tambahkan ke website. Portofolio yang aktif menunjukkan kamu terus berkembang.

Kesimpulan

Membuat portofolio online dengan GitHub Pages tidak serumit yang dibayangkan. Dengan Termux, kamu bisa manage semuanya dari smartphone tanpa perlu laptop. Yang penting adalah konsistensi—mulai dengan sederhana, lalu improve seiring waktu. Portofolio yang autentik dan menunjukkan progress nyata jauh lebih valuable daripada template fancy yang tidak pernah diupdate. Sekarang giliran kamu untuk mulai. Clone repository, buat file pertama, dan push. Website kamu sudah menunggu untuk live.