Cara Mudah Membuat Website Portofolio Pakai HP (Dengan Bantuan AI & GitHub)
Di era digital saat ini, memiliki website portofolio adalah sebuah keharusan bagi siswa, terutama yang berada di jurusan vokasi seperti Informatika atau Desain Komunikasi Visual (DKV). Kabar baiknya, kamu tidak lagi membutuhkan laptop atau aplikasi coding yang berat untuk mulai membuatnya!
Hanya dengan menggunakan smartphone, bantuan AI (seperti Gemini atau ChatGPT), dan layanan hosting gratis dari GitHub, kamu sudah bisa memiliki website portofolio yang profesional dan siap dibagikan.
Berikut adalah panduan lengkap dari nol hingga website kamu tayang!
Fase 1: Meminta AI Membuat Kode Portofolio
Langkah pertama adalah mendapatkan kode website. Kita akan menggunakan aplikasi AI di HP untuk membuatkan kodenya secara utuh.
- Buka aplikasi Gemini atau ChatGPT di HP kamu.
- Salin dan tempelkan (copy-paste) prompt spesifik di bawah ini agar AI menghasilkan satu file utuh yang mudah ditangani di HP:
Prompt untuk di-copy siswa:
"Berperanlah sebagai Web Developer. Buatkan saya kode website portofolio siswa SMK jurusan [Informatika/DKV] dalam SATU file index.html saja (gabungkan kode HTML, Tailwind CSS via CDN, dan sedikit JavaScript di dalamnya).
Buat desainnya modern, menarik, dan responsif untuk layar HP. Isi halamannya:
1. Navbar dengan nama saya.
2. Hero Section: Ucapan 'Halo, Saya [Nama]', foto profil bundar (pakai gambar placeholder), dan tombol 'Lihat Karya'.
3. Skill: Tuliskan 3 keahlian yang saya pelajari di sekolah.
4. Galeri Proyek: 3 kotak (card) yang berisi contoh tugas sekolah.
5. Footer: Copyright.
Tampilkan kodenya secara utuh dari awal<!DOCTYPE html>sampai akhir</html>tanpa terpotong."
- Setelah AI membalas, ketuk tombol Salin (Copy) pada blok kode tersebut.
Fase 2: Mendaftar Akun GitHub via HP
GitHub akan menjadi "rumah" untuk menyimpan kode website kamu. Bagi siswa yang belum memiliki akun GitHub, ikuti langkah ini di browser Chrome atau Safari:
- Buka situs github.com.
- Ketuk tombol Sign Up di pojok kanan atas.
- Masukkan alamat email yang aktif, lalu ketuk Continue.
- Buat password yang kuat, ketuk Continue.
- Buat username (gunakan nama asli tanpa spasi, misal:
ruli-portofolio), ketuk Continue. - Selesaikan puzzle verifikasi (biasanya mencocokkan gambar).
- Buka aplikasi Email/Gmail, cari email dari GitHub, dan masukkan kode angka verifikasinya ke halaman pendaftaran tadi. Akun siap digunakan!
Fase 3: Membuat Repositori & Menempel Kode
Sekarang saatnya memasukkan kode HTML ke akun GitHub:
- Di halaman utama GitHub (dalam kondisi login), ketuk ikon + (tambah) di pojok kanan atas, lalu pilih New repository.
- Pada kolom Repository name, isi dengan nama web (misal:
portofolio-tugas). - Pastikan memilih opsi Public.
- Sangat Penting: Centang kotak kecil bertuliskan "Add a README file". (Ini wajib agar kita bisa menambah file HTML lewat HP).
- Ketuk tombol hijau Create repository di paling bawah.
- Di halaman baru yang terbuka, ketuk tulisan Add file, lalu pilih Create new file.
- Pada kolom nama file, ketik tepat seperti ini:
index.html(huruf kecil semua). - Ketuk area kosong di bawahnya, lalu Tempel (Paste) kode yang tadi disalin dari AI.
- Ketuk tombol hijau Commit changes... di pojok kanan atas, lalu ketuk lagi Commit changes pada kotak yang muncul.
Fase 4: Mengudarakan Website (GitHub Pages)
Ini adalah langkah terakhir untuk mendapatkan link yang bisa diserahkan sebagai tugas:
- Masih di dalam repositori
portofolio-tugas, ketuk ikon Settings (gambar gir). - Di menu sebelah kiri, cari dan ketuk Pages.
- Pada bagian Build and deployment, lihat opsi Branch. Ubah tulisan
Nonemenjadimain(ataumaster). - Ketuk tombol Save.
- Tunggu sekitar 2-3 menit. Muat ulang (refresh) halaman tersebut.
- Anda akan melihat tulisan "Your site is live at..." diikuti dengan tautan website (contoh:
https://[username].github.io/portofolio-tugas). - Tautan tersebut sudah bisa disalin dan dibagikan!
إرسال تعليق