Membuat Portofolio Website dengan Bootstrap, Management Project dengan Github dan deploy hosting gratis menggunakan Vercel (Part 2)
Selamat pagi, siang ataupun malam teman-teman semua, saat ini saya kembali dalam mengetik sebuah artikel lanjutan/part 2 dari artikel sebelumnya yang bisa kalian lihat disini. artikel sebelumnya kita sudah membahas dan praktik untuk membuat project, memanagement project dengan github dan sudah mendeploy project github ke hosting melalui vercel app.
pada artikel ini kita cukup simple (aslinya ribet🤣) hanya memperbaharui project dengan template bootstrap yang sudah saya sediakan nanti kalian bisa mendownloadnya, nah nantinya kita bakal custom sedikit isi dari template tersebut dan meng-push project update an kita ke github.
nah lalu apa project yang kita update di github bakal ke update juga di vercel ??? jawabannya iya, karena vercel sudah mengintergrasikan repository yang ada di github sebagai status repository production. okeyy kita lanjut saja ke langkah- langkahnya.
Step by Step
Download terlebih dahulu template bootstrapnya yang bernama resumeku, download disini atau kalian bisa pakai template bootstrap lain yang free ada disini bootstrapmade.com. untuk artikel ini saya menggunakan yang sudah saya sediakan yaitu resumeKu.
jika sudah terdownload ekstrak compressed file tersebut, maka tampilan semua isi filenya seperti gambar diatas.
langkah selanjutnya select all file tersebut lalu pindahkan ke folder cloning repository pada artikel kemarin yang bernama cover-sample
alamat path folder repository cloningan pada saya ada pada gambar diatas
lalu jika sudah masuk folder repository cover-sample, pastekan semua isi file yang ada di folder resumeku lalu replace.
setelah itu, hapus file cover.css maka tampilan semua isi file seperti gambar diatas. untuk melihat tampilan template bootsrapnya klik 2 kali pada index.html (karena file sudah terbaca oleh google chrome) atau bisa klik kanan > open in browser
inilah tampilan website dari template bootstrap resumeku, selanjutnya mari kita custom sedikit template tersebut
klik kanan pada file index.html lalu buka menggunakan code editor, pada contoh gambar saya menggunakan code editor visual studio code
Pada custom kali ini kita hanya perlu mengganti bagian nama, posisi/jabatan dan foto profil. kita pergi ke baris 58 dan 59 untuk mengganti Nama dan Posisi/Jabatannya. sebagai contoh saya menggantinya seperti gambar diatas. baris yang saya ubah seperti dibawah ini.
<h1>Huda Putra Santosa</h1><p>I'm <span class="typed" data-typed-items="Designer, UI/UX Designer, Developer"></span></p>
lalu untuk mengganti foto profil resume, siapkan foto kalian setelah itu copy dan pastekan ke folder repository cover-sample didalam folder assets > img dan pastekan di folder img. setelah itu ganti nama file gambar kalian sesuai kebutuhan, misalkan untuk kebutuhan foto profil berikan nama profile(sesuai konteks) dan hindari spasi untuk penamaan file. untuk isi semua file dan alamat pathnya seperti di gambar atas
Langkah selanjutnya, pergi ke baris 85 untuk menemukan baris code selector <img>untuk menentukan alamat path gambar foto profil yang akan ditampilkan. baris tersebut seperti dibawah ini
<img src=”assets/img/profile.jpg” class=”img-fluid” alt=””>
setelah itu klik save atau ctrl+S untuk melihat perubahan tampilan website yang sudah di custom, pada gambar diatas terdapat ada logo bulat putih yang menandakan bahwa file index.html belum di save (berlaku pada text editor vsc)
untuk melihat tampilan website terbarunya kalian tinggal refresh website dari file index.html yang kalian buka sebelumnya, maka hasilnya seperti gambar diatas. nama, posisi dan foto sesuai dengan yang diubah pada source codenya
jika sudah selesai, langkah selanjutnya adalah membuka github desktop untuk meng-push project yang sudah kita berikan perubahan. pastikan repository yang terpilih adalah cover-sample. lalu centang semua pada file updatenya. pada keterangan terdapat perubahan/penambahan pada 86 file dan tanda + warna hijau menandakan bahwa file tersebut baru/penambahan file pada repository
jika sudah tercentang semua, selanjutnya kita akan melakukan commit file, sebelumnya kita berikan commit-message terlebih dahulu sebagai contoh saya mengetikkan change-resume sebagai commit-message. jika sudah kita klik commit to main
menunggu proses commit selesai…
jika sudah selesai, kita klik push origin semua file yang sudah di commit
jika project sudah selesai di push, maka kita cek terlebih dahulu pada repository yang ada di github website. pada gambar diatas memberikan keterangan terdapat perubahan 3 menit yang lalu dengan commit-message “change-resume” menandakan bahwa project kita berhasil kita push ke repository. sudah paham kan kenapa ada commit dan commit-message?
lalu langkah selanjutnya kita mengecek pada hosting integrasi yang disediakan oleh vercel apakah project kita secara realtime langsung mengalami perubahan atau tidak. untuk menemukan url nya kalian bisa perhatikan di bagian about (kolom paling kanan). untuk url punya saya adalah https://cover-sample.vercel.app/
Taraaaa..🥳 kita berhasil mengubah project kita sebelumnya yang belum mempunyai layout dan interface kurang jelas menjadi website simple resume yang menarik dengan layout rapi dan menjadi responsive. kalian bisa memanfaatkannya integrasi vercel dan github sebagai front-end deployment untuk keperluan pribadi misalkan portofolio/resume kalian. untuk kedepannya kalian bisa coba sendiri untuk mengcustom website resumeKu semenarik mungkin😁
Thanks buat teman teman yg menyimak pembahasan topik lanjutan diatas, semoga yang saya share bisa dipergunakan dengan benar dan bermanfaat serta menambah ilmu buat kalian yang ingin belajar mengenai programming 😁, Ganbatte (がんばって) minasan!
