Bikin Portofolio di GitHub Pages: Developer Wajib Coba!

Bikin Portofolio di GitHub Pages: Developer Wajib Coba!

Waktu membaca menit

Kategori Hosting

Update Terakhir 30 Jul 2025

Pernah dengar bisa bikin portofolio pakai GitHub Pages tanpa bayar sepeser pun? Kalau kamu developer, ini cara cerdas buat pamer skill coding kamu ke dunia, langsung online dan siap dinilai rekruter dan ditemukan mesin pencari. Bagaimana caranya? Yuk, simak panduannya sampai tuntas!

Kenapa GitHub Pages untuk Bikin Portofolio?

Di dunia kerja digital, developer tanpa portofolio ibarat toko tanpa etalase. Portofolio digital bukan hanya jadi bukti kemampuan, tapi juga alat promosi (self-branding). Salah satu cara termudah dan gratis untuk bikin portofolio online untuk kerja adalah pakai GitHUb Pages. 

Baca Juga: 4 Langkah Mudah Deploy WordPress dari GitHub ke Web Hosting

Apa sih keunggulan GitHUb Pages dibandingkan layanan hosting gratis lainnya, terutama untuk bikin portofolio digital? 

  • Hosting Gratis dan Stabil
    GitHub Pages memungkinkan kamu untuk menyimpan dan menampilkan portofolio digital langsung dari repository GitHub milikmu, tanpa perlu bayar hosting.
  • Terintegrasi Langsung dengan Repository
    Kamu bisa menampilkan kode, demo, dokumentasi, dan deskripsi proyek dalam satu halaman yang rapi. Ini sangat efektif untuk menunjukkan proses kerja kamu ke calon rekruter.
  • Mendukung Kolaborasi dan Komunitas
    Selain menyimpan portofolio pribadi, kamu juga bisa membagikan proyek open source dan menerima kontribusi dari developer lain. Ini bisa meningkatkan kredibilitas kamu di komunitas teknologi.
  • SEO dan Visibilitas Lebih Baik
    Portofolio kamu bisa ditemukan lewat pencarian di GitHub maupun Google, apalagi jika kamu mengoptimasi metadata dan deskripsinya dengan baik.

Baca Juga: GitHub Security: Fungsi, Fitur dan Cara Mengoptimalkannya

5 Langkah Praktis Bikin Portofolio di GitHub Pages

Bikin Portofolio di GitHub Pages

Kamu tidak harus jago desain UI dulu untuk mulai membuat portofolio digital di GitHub Pages. Yang kamu butuhkan adalah niat untuk memulai platform yang tepat. 

Berikut ini lima langkah mudah membuat portofolio menggunakan GitHub Pages:

Step 1. Buat Akun GitHub

Langkah pertama tentu saja membuat akun GitHub:

  1. Kunjungi GitHub.com lalu daftar menggunakan email yang aktif. 
  2. Proses pendaftaran cukup cepat, hanya butuh verifikasi dan sedikit pengaturan awal. 

Kalau kamu sudah punya akun, bisa langsung lanjut ke langkah berikutnya.

Step 2. Buat Repository Baru

  1. Setelah login, klik ikon “+” di bagian kanan atas, lalu pilih menu “New Repository” dari dropdown yang muncul.
  2. Isi nama repository-mu dengan format khusus. Di kolom Repository Name, tulis nama: username.github.io
    Ganti username dengan nama pengguna akun GitHub kamu. Misalnya, kalau username kamu adalah Citra Kirana, maka nama repository-nya harus citrakirana.github.io.
    Selanjutnya, isi kolom deskripsi dengan penjelasan singkat, misalnya: Portofolio digital pribadi - dibuat dengan GitHub Pages.
    Ini tidak wajib, tapi bisa jadi nilai tambah untuk SEO dan profesionalitas.
  3. Pastikan opsi Public dipilih agar portofolio kamu bisa diakses oleh siapa pun, termasuk rekruter.
  4. Centang opsi Add a README file. Ini penting karena file README.md akan menjadi konten awal portofoliomu. Kamu akan mengeditnya di langkah selanjutnya. 
  5. Klik Create Repository di bagian bawah halaman setelah semua kolom diisi dengan benar. 

Step 3. Tulis Konten Portofolio di README.md

README.md adalah halaman utama yang akan ditampilkan. Kamu bisa isi dengan informasi tentang diri kamu, skill yang kamu kuasai, proyek-proyek unggulan, dan juga tautan kontak.

Kamu cukup klik README.md > ikon pensil > lalu edit isi file tersebut. Gunakan format Markdown agar tampilan tetap rapi. Setelah selesai, klik Commit changes

Contoh pengisian konten README.md:

# Halo, saya Citra Kirana!
Saya adalah seorang Web Developer & UI/UX Designer yang aktif dalam dunia web development. Saya juga seorang blogger yang fokus di dunia SEO.

## Keahlian
- Frontend-Backend Development
- SEO Content Strategy
- Git & GitHub

## Proyek Unggulan
- [Portofolio Web Pribadi](https://citrakirana.github.io/)
- [Blog SEO Tools](https://github.com/citrakirana/blog-tools)

## Kontak
- LinkedIn: https://linkedin.com/in/citrakirana
- GitHub: https://github.com/citrakirana

Klik Commit changes setelah selesai menulis.

Step 4. Aktifkan GitHub Pages

Di tahap ini, kamu akan mengubah repository yang tadi kamu buat menjadi sebuah website yang bisa langsung diakses secara online. 

Prosesnya simpel, dan hanya butuh beberapa klik:

  1. Masuk ke menu Settings di repository yang sudah kamu buat (https://citrakirana.github.io/). 
  2. Di menu samping kiri (versi baru GitHub menaruhnya di bawah kategori “Code and automation”), cari dan klik bagian Pages.
  3. Pada opsi Source, pilih main (atau master, tergantung default branch kamu) lalu klik Save untuk menyimpan pengaturannya.
  4. Kamu akan mendapatkan URL seperti https://citrakirana.github.io/

Step 5. (Opsional) Pakai Tema Portofolio

Supaya portofoliomu lebih menarik secara visual, kamu bisa menambahkan tema bawaan GitHub Pages.

  1. Buka kembali bagian Pages di Settings
  2. Klik Choose a theme. Semua desain ini bisa langsung kamu pakai tanpa harus menyentuh kode CSS. 
  3. Pilih tema yang sesuai lalu klik Select theme. Setelah memilih, GitHub akan otomatis menambahkan file index.md ke repository kamu dengan struktur dasar dari tema tersebut.
  4. Simpan perubahan, dan portofolio kamu pun langsung aktif sesuai tema yang kamu pilih.

Tips SEO untuk Portofolio GitHub Pages

Percuma kan kamu sudah capek-capek bikin portofolio di GitHub Pages, tapi tidak bisa ditemukan oleh mesin pencari. Nah, saatnya kamu melakukan optimasi SEO agar kamu semakin eksis di dunia digital:

Maksimalkan Konten di README.md

Gunakan judul, deskripsi, dan daftar isi yang memuat kata kunci relevan seperti:

  • portofolio digital
  • developer Indonesia
  • bikin portofolio online untuk kerja

Sisipkan juga instruksi instalasi, cara penggunaan, dan informasi kontak.

Gunakan Tags dan Topics

Tambahkan tag di repository seperti web-dev, portfolio, frontend, atau indonesia-dev. Ini membantu portofoliomu muncul di hasil pencarian GitHub dan Google.

Buat Nama Repository SEO-friendly

Hindari nama repository yang generik seperti my-portfolio. Gunakan yang lebih deskriptif misalnya developer-portfolio-html-css.

Tambahkan Alt Text pada Gambar

Jika kamu menyisipkan gambar proyek, gunakan alt="deskripsi gambar" untuk membantu Google mengenali kontennya.

Promosikan Lewat Blog dan Media Sosial

Jangan ragu untuk membagikan portofoliomu lewat Twitter, LinkedIn, atau komunitas seperti GitHub Indonesia, Discord, dan Telegram developer.

Masalah Umum Saat Bikin Portofolio GitHub

Bikin Portofolio di GitHub Pages

Meskipun kelihatannya sederhana, ada beberapa kesalahan umum yang sering terjadi saat kamu bikin portofolio pakai GitHub Pages:

Terlalu Banyak Proyek yang Ditampilkan

Lebih baik menampilkan 2–3 proyek unggulan yang benar-benar kamu kuasai daripada banyak proyek kecil yang belum matang.

Tidak Menulis README.md

Tanpa README, pengunjung tidak tahu isi proyekmu. Bahkan, rekruter bisa mengabaikan portofoliomu hanya karena ini.

Takut Belajar di Depan Publik

Jangan malu kalau ada bug kecil atau proyekmu belum sempurna. Justru menunjukkan proses belajar adalah nilai tambah di mata rekruter.

Lupa Aktifkan GitHub Pages

Sudah bikin repo tapi lupa enable GitHub Pages? Ini salah satu hal yang sering dilupakan. Pastikan kamu menyelesaikan seluruh prosesnya sampai muncul URL aktif.

Kesimpulan

Bikin portofolio di GitHub Pages bisa jadi langkah awal yang sangat efektif untuk menunjukkan siapa kamu sebagai developer. 

Dengan hosting gratis, integrasi langsung ke kode proyek, dan potensi eksposur yang besar, kamu bisa tampil lebih profesional dan kredibel di dunia kerja digital.

Tapi ingat, portofolio digital yang menarik bukan cuma soal tampilannya, tapi bagaimana kamu bisa menyampaikan keahlianmu secara jelas dan meyakinkan.

Kalau kamu ingin portofolio digital yang lebih fleksibel dan kontrol penuh, kamu bisa bikin versi website dan online-kan dengan layanan Hosting Murah dari IDwebhost

Dengan kontrol penuh atas desain dan fungsionalitas, kamu bisa membangun personal branding digital yang jauh lebih kuat.