proses membuat website part 1
10 September, 2023 albawid
# jekyll
# website
Pendahuluan
Halo para pembaca yang membaca tulisan tidak jelas ini, maaf sebelumnya jika bahasa dan cara penulisan yang kurang benar dikarenakan saya tidak ada pengalaman sebagai Content-Writer atau Copywriter atau yang lain. Jadi dengan jadinya website ini semoga bisa saya gunakan sebagai bahan belajar tentang menulis artikel. Post dengan judul ini mungkin akan dibagi menjadi beberapa part karena saya ingin menulisnya secara detail. kalau bisa wkwk
Latar Belakang
Saya orangnya sangat suka menggunakan internet sampai di suatu hari saya ingin mempunyai website sendiri tapi masalahnya saya tidak ada background sebagai Web Developer apalagi menulis kode program, sehingga saya mencari tutorial membuat website, semua mengintruksikan untuk menggunakan template yang sudah ada tapi tidak ada yang cocok secara tampilan bagi saya, kemudian saya mencari tutorial belajar Web Development dan saya menemukan Youtube Channel Web Programming UNPAS yang menurut saya sangat bagus dari segi materi, penyampaian, urutan pembelajaran, latihan serta tips dan trik membuat website. Dari situ saya yang awalnya nol banget tentang Web Development sampai sekarang bisa membuat website, meskipun hanya frontend saja itu pun cuma HTML dan CSS.
Software
Saya menggunakan Jekyll sebagai framework, jika kalian tidak tahu apa itu jekyll, kalian bisa baca di doc web resmi jekyll. Secara kasar, singkatnya jekyll adalah sebuah Static Site Generator atau biasa disebut SSG merupakan kerangka atau template directory sebuah website, sebagai contoh di jekyll ada folder dengan nama _posts maka jika kalian ingin membuat judul post baru kalian harus membuat file tulisan disana.
Konsep Desain UI
Saya ingin web simpel dan menarik namun unik, yang mempunyai total 4 tab sebagai navigasi:
- Home
- post
- project
- about
untuk code tidak akan saya tampilkan secara menyeluruh agar tidak spam karena sangat panjang, sebagai gantinya akan saya cantumkan link menuju code yang ada di github saya
Home Layout
Tampilan Home atau Landing Page yang menampilkan gambar maskot dan deskripsi author secara singkat di sisi kanan kemudian dibawahnya terdapat 3 post terbaru dan 3 project terbaru dan tombol menuju semua daftar list post dan project
Post Layout
Untuk tampilan list post sama seperti yang ada di “Home” namun ada perbedaan ketika website terbuka di viewport minimal 768px dimana deskripsi post akan di matikan dengan tujuan menghemat viewport
Project Layout
Tampilan list Project sama seperti list post namun ditambahkan gambar dan tag dihilangkan karena menurut saya untuk membahas project atau bahan latihan saya tidak memerlukan tag
About Layout
Sebernarnya di tab about ini menggunakan layout project yang di duplicate langsung dari layout post sehingga tampilan about ini akan mirip dengan tampilan isi post dengan perbedaan tanggal dan author dimatikan.
Komponen daftar isi memiliki 3 level:
- Heading 1, menggunakan simbol lingkaran solid
<h1>Heading 1</h1>atau jika didalam markdown
# Heading 1 - Heading 2, menggunakan simbol outline lingkaran
<h2>Heading 2</h2>atau jika didalam markdown
## Heading 2 - Heading 3, menggunakan simbol kotak solid
<h3>Heading 3</h3>atau jika didalam markdown
### Heading 3
untuk hasilnya seperti dibawah ini
Kesimpulan
Sangat sederhana bukan?, tapi perlu diketahui pembuatan website ini dari desain tampilan sampai penulisan HTML, CSS dan sedikit Javascript hanya dilakukan oleh 1 orang saja, ya saya sendiri, meskipun saya tidak ada pengalaman sebagai Web Developer sebelumnya tapi saya sangat bersyukur bisa membuat website sesuai keinginan saya, ya seperti ini lah tampilan website yang saya inginkan. Untuk part selanjutnya mungkin akan membahas integrasi Jekyll dengan website.
Lisensi
Tulisan ini dilisensikan dengan:
Atribusi-NonKomersial-BerbagiSerupa 4.0 Internasional (CC BY-NC-SA 4.0)