Bikin Custom Landing Page Sendiri Yuk, Gratis!
Mfc, Bandung - Hmm disclaimer dulu kali ya, artikel ini bukan sebuah artikel tutorial tapi lebih kepada artikel yang memberikan ide kepada teman-teman terkait membuat sebuah landing page sendiri, yang tentu saja fully-customized dan tentunya gratis! Nah kalau sudah paham, selanjutnya saya mau bahas sedikit tentang Linktree yang kalau saya lihat saat ini kok banyak sekali ya digunakan oleh teman-teman saya, baik untuk penggunaan pribadi maupun untuk di akun-akun resmi dari organisasi yang dipegangnya. Tapi mungkin beberapa di antara kita masih belum tau apa itu Linktree. Ya kalau menyitir sedikit dari websitenya sih, Linktree itu :
We’re a tool for connecting followers to your entire online world - not just one feed. A Linktree not only points followers in the direction of your choosing - to your other social profiles, eCommerce store, or content you want to share - but it helps hold followers within your online ecosystem for longer. It allows users to share more, sell more, curate more and grow more. (Linktree)
Ya kalau bahasa praktisnya itu, misal di Instagram kan profilnya cuma bisa memuat satu pranala saja ya, nah dengan Linktree masalah tersebut bisa terpecahkan. Kita bisa masukan banyak pranala yang menuju ke (misal) akun-akun media sosial yang kita punya ke dalam sebuah halaman Linktree kita, dan di akun Instagram kita tadi, kita cukup menuliskan satu pranala saja yakni pranala menuju halaman Linktree kita tersebut.
Namun terlintas di benak saya sebelum membuat halaman Linktree, kenapa tidak membuat sendiri saja? Toh dengan basic knowledge seputar HTML dan CSS saja sudah cukup kok untuk membuat halaman ala Linktree tadi secara mandiri, bisa dicustom dengan sesuka hati, bersifat responsif (wah ini sih harus ya haha), dan tentunya, gratis!
Dengan tata letak yang “sedikit” berbeda dari Linktree, sayapun berhasil membuat sebuah landing page sendiri. Untuk biaya produksi tentu gratis karena saya mengetik kodenya sendiri, tapi bagaimana untuk hosting dan domainnya? Ya, sesuai judulnya, gratis juga dong! Saya menggunakan layanan GitHub Pages karena halaman yang saya buat tidak membutuhkan server-side processing sebab hanya dibuat menggunakan HTML dan CSS saja yang pemrosesannya dilakukan di web browser.
Untuk teman-teman yang mau mencoba hosting dengan GitHub Pages, halaman secara default sudah dapat diakses melalui domain github.io, tapi kalau mau yang lebih personal lagi (seperti yang saya lakukan), bisa dipasangkan custom domain sendiri. Biayanya sekitar Rp 130.000,- per tahun, cukup murah sih apalagi kalau digunakan untuk keperluan personal branding, bisa terlihat lebih profesional bukan?
Di awal tadi saya sempat singgung tentang responsif kan ya? Nah karena saya tidak suka tata letak versi mobile ketika diakses melalui komputer dengan layar yang besar (ya menurut saya aneh sih lihatnya), akhirnya untuk tampilan versi desktop saya merombak lagi dengan konsep visual yang terinspirasi dari sebuah “document folder” hehe. Oh iya, halaman tersebut bisa dilihat dengan mengakses alamat https://mf-chan.com ya!
Oh iya, meskipun landing page ini saya hosting di akun GitHub saya, tapi repositorynya tidak saya set untuk open-access, untuk yang mau “mengintip” script dari halamannya, silakan gunakan inspect element saja ya hehe. Untuk beberapa hal dasar yang bisa dipelajari untuk membuat halaman seperti ini, Anda bisa mempelajari dari beberapa website berikut :
- W3Schools (untuk HTML, CSS, dan Responsive Web Design)
- Font Awesome (untuk icon-icon media sosial dlsb.)
- GitHub Pages (hosting dan domain gratis dari GitHub)
- Dribbble (inspirasi desain landing page)
Dari proyek sederhana yang sudah saya lakukan ini, ada beberapa keuntungan lainnya yang saya dapat selain yang sudah saya sebutkan di atas. Salah satunya adalah bisa menjadi suatu portofolio yang bisa menjadi sebuah saksi bisu bahwa saya mengerti bagaimana membuat sebuah halaman responsif dengan pengetahuan front-end, didukung oleh latar belakang desain yang saya miliki. Yap, semoga artikel pendek ini bisa menginspirasi ya!
