Halaman ini berisi dokumentasi tentang background, teknikal desain, dan post morterm dalam pembuatan personal website ini, dokumentasi ditunjukan sebagai referensi untuk pembaca yang ingin tahu cara membuat personal website dan melihat berbagai pilihan yang bisa dipakai nantinya ketika membuat.

Background

Ide untuk membuat personal website sudah ada dari dulu, rencananya menggunakan Laravel dengan Virtual Private Server (VPS) sebagai hostingnya dengan setup ini skalabilitas dan fungsi seperti comment dan user log in dapat diimplementasikan hanya saja mahal dari biaya bulanan VPS lalu mempelajari Teknologi OOP dan Laravel. Karena itu aku urungkan niat untuk membuat personal website.

Portfolio or Blogging Website

Selama riset banyak teman teman yang kulihat menggunakan portfolio website, mereka menampilkan Background, Project, Testimoni, List Skill, Resume/CV, dan Kontak. Sekilas mudah untuk dibuat namun terkadang ketika dikunjungi menampilkan animasi yang berlebihan, menurutku itu menjengkelkan dan tidak perlu karena pengujung ingat lihat isinya bukan animasi yang cantik.

Pilihan kedua adalah blogging website, blogging website bebas dalam menampilkan konten dan memiliki tema tertentu seperti teknologi, memasak, dan olahraga dengan ini blogging terasa personal karena memiliki kebebasan dalam publikasi konten. Kekurangannya adalah blogging website konten didalamnya bersifat dinamis maka pengunjung tahu mana website blogging yang masih aktif dan yang sudah ditinggalkan 1.

Dari portfolio dan blogging aku memilih blogging karena kebebasan dalam mengatur konten didalamnya serta lebih personal dibandingkan portfolio, alasan kedua portfolio itu cherrypicking konten yang ada didalamnya dipilih dari prestasi, pekerjaan, skills, serta project yang ingin ditampilkan sedangkan blogging seseorang bebas menulis dan publikasikan karyanya2.

Terakhir adalah domain name, menurutku ada nilai unik untuk memiliki domain name pribadi karena ketika domain name sudah diambil orang lain tidak bisa mengambilnya lalu dalam platform media sosial akan aneh untuk memanggil seseorang dengan usernamenya. Dengan itu aku memiliki pendapat bahwa semua orang bisa punya akun di media sosial tapi tidak semua memiliki domain name yang bisa dicari di internet3.

Teknikal Desain

Dalam membuat blogging website bisa menggunakan Content Management System (CMS) seperti Wordpress. Pilihan kedua dengan framework seperti Laravel dan terakhir dengan Static Site Generator (SSG). Static Site Generator bekerja dengan membuat konten tulisan seperti blogpost dan artikel yang telah dibuat dengan format HTML atau Markdown untuk diproses agar terbaca oleh browser4 .

Dalam kasusku personal website tidak perlu menyimpan data, kemudian tidak ada logika bisnis, terakhir setiap halaman yang dibuat berbentuk markdown atau HTML. Dengan ini SSG cocok untuk kasus ku karena tidak ada biaya sewa server lalu untuk desain website bisa menggunakan tema yang telah dibuat oleh komunitas.

Static Site Generator yang kupakai adalah Jekyll5, Jekyll memiliki fitur templating untuk membuat halaman, memiliki banyak pluggin, dan didalamnya sudah ada fitur yang ditunjukkan untuk blogging sepeti categories, tags, permalink. Terakhir adalah proses deployment-nya mudah dengan Github-Pages dan Netlify ketika website sudah siap untuk dipublikasikan.

Struktur Halaman

Berikutnya adalah menentukan struktur halaman berserta fungsinya.

  • Home: Halaman home memperkenalkan website ini apa dan siapa yang membuatnya, pada halaman home aku deskripsikan sebagai penulis karena semua tulisan yang ada di dalamnya adalah buatanku dan maintainer karena personal website ini sebagai tempat ku berkreasi maka aku punya tanggung jawab untuk selalu update dan menambah konten didalamnnya.

  • Index: Halaman Index memiliki banyak penamaan seperti Article, Blogs, Posts, Essay dan Archive semua memiliki tujuan yang sama yaitu daftar dari konten yang ada didalam website. aku membedakan post ku menjadi tiga kategori yaitu Blog, Artikel, dan Log. Masing Masing memiliki fungsi yaitu:

    • Blog
      Tulisan tentang pengalaman ku dalam sehari hari ataupun topik yang ingin ku angkat, biasanya bersifat personal dan opini pribadi.
    • Artikel
      Tulisan dengan pembahasan yang panjang dan mendalam, direksi untuk artikel masih belum aku tetapkan dalam style atau tone tapi pembahasannya akan dari berbagai sudut pandang.
    • Log
      Log dalam ilmu komputer adalah proses yang tercatat di dalam sistem, Log untukku sebagai tempat buat menulis kegiatan yang sudah aku lakukan dan melihat kembali apa yang sudah kukerjakan seperti memoar6.

  • Portfolio: Halaman ini menampilkan project yang telah dikerjakan dan portfolio akan berisi dokumentasi yang menampilkan tujuan, teknologi, dan fungsinya - dengan membuatnya sebagai dokumentasi menjadi sarana untuk menjelaskan kepada pembaca fungsi dan tujuan dari project yang dibuat.

  • About: Halaman ini menceritakan diri sendiri, ada banyak cara yang bisa dilakukan seperti menjelaskan pekerjaan yang dilakukan sekarang, motivasi dalam melakukan pekerjaan, ataupun sekedar menjelaskan website yang dibuat berfungsi untuk apa. Halaman about aku menambahkan CV, siapa diriku, kontak, website ini untuk apa dan media sosial yang bisa diikuti, halaman about bisa berubah tanpa notice tergantung dari motivasku untuk menulis bio data ku.

Tema

Tema dalam Static Site Generator beragam dimulai dengan membuat sendiri dari awal ataupun memakai tema yang sudah dibuat oleh komunitas, website ku menggunakan tema yang sudah ada karena cepat dan praktis lalu tujuan utama ku membuat personal website sebagai tempat untuk menulis dan memajang karya yang pernah aku lakukan.

Jekyll memberikan banyak opsi dalam menggunakan tema ada yang lewat Ruby Gems yaitu Package Manager milik Ruby atau download langsung dari repository, untuk mencari tema yang sesuai bisa lewat rubygems.org dan memasukkan query jekyll-themes atau lewat Jekyll Resources dan melihat berbagai tema yang ada di Github.

Aku menggunakan Minimal-Mistake karena fiturnya lengkap lalu salah satu contributornya memiliki website Made Mistake dan dari websitenya itu lah aku terinsprasi untuk mengikuti gaya yang dibuat dan untungnya dia sudah membuat tema yang mirip dengan website dia sebelumnya.

Pembuatan

Bagian ini aku akan menjelaskan secara singkat bagaimana aku membuat personal website dari halaman, setting, dan publish di internet, tahapannya tidak akan mendetail karena sudah ada dokumentasi dan guide yang tertulis di website Jekyll namun aku akan coba highlight poin point penting ketika ingin membuat website dengan Static Site Generator.

  • Persyaratan:
    • Memiliki komputer pribadi seperti Laptop atau Komputer Dekstop
    • Akses Internet
    • Pengetahuan version control system seperti Git7
    • Kode Editor (Vscode, Notepad++, Atom, Sublime Text, Neovim)

  • Instalasi Jekyll: Tahapan instalasi aku menggunakan Ubuntu WSL2 di Windows 10 22h2 dengan package manager apt untuk menginstall Ruby. Lihat dokumentasi Jekyll dan Ruby untuk sistem operasi yang dipakai untuk instalasi. Dari yang kubaca Ruby di Windows rumit untuk digunakan karena itu aku pakai WSL2 untuk lingkungan pengembangan ku namun dokumentasi Jekyll sudah menyediakan opsi jika ingin memakai Windows untuk pengembangan 8.

  • Instalasi Tema: Tema yang ada di rubygems.org bisa diinstall dengan dua cara pertama menggunakan Gems seperti gem install minima maka tema tersebut akan terpasang secara global di dalam sistem, cara kedua adalah menggunakan bundler9 di dalam direktori proyek. Bundler bekerja seperti penjaga perpustakaan dia menjaga buku atau dalam kasus ini dependecies tetap sama ketika masa pengembangan dan publikasi, lalu daftar dari buku yang ada di perpustakaan tersimpan dalam file bernama Gemfile, Gemfile berfungsi untuk menyimpan daftar dependecies yang diperlukan oleh website. Ketika update atau mengunci versi tertentu dari dependecies yang dipakai maka Bundler akan melihat Gemfile sebelum melakukan perubahan10.

  • Membuat Halaman: Setelah Jekyll dan Tema terpasang maka membuat halaman dimulai dengan membuat index.html di dalam root direktori, karena index.html ini akan dipasang dalam direktori _site yang menjadi tempat untuk website terlihat oleh internet. Kemudian membuat halaman lain seperti Home, Archives, dan About Me. Hal terpenting ketika membuat halaman adalah memperhatikan layout yang sudah diberikan oleh tema, biasanya mereka menamakan tema layout seperti home, archive, dan single11 untuk digunakan sesuai dengan kebutuhan dan layout bisa menggunakan format HTML atau Markdown. Dalam kasusku halaman Home menggunakan layout:home, halaman Posts layout: posts, halaman Portfolio layout: collection dan terakhir About menggunakan layout: single.

  • Front Matter: Front Matter adalah metadata yang digunakan oleh Static Site Generator untuk generasi konten yang ditulis untuk membantu menentukan hal hal seperti judul, tanggal, kategori dan tags. Opsi dari Front Matter antara lain:

    • layout
    • permalink
    • title
    • date
    • tags
    • categories

    Tanpa Front Matter halaman tidak akan dibuat oleh SSG dan hasilnya akan kosong tanpa adanya data data yang diperlukan untuk membuat halaman.

Deployment

Tahapan yang seru sekaligus menakutkan yaitu publikasi website ke internet, dalam tahapan ini sering kali aku tersandung dengan depedencies error ketika push ke tempat hosting padahal di local environment bekerja. Berikut adalah pemilihan teknologi yang ku pakai untuk publikasikan website ke internet12.

  • Hosting: Pilihan Hosting ku adalah Netlify karena di dalam dokumentasi Jekyll terdapat guide untuk deploy website dengan Netlify dan kedua adalah dukungan plugin, kalau aku deploy lewat Github Pages maka ada beberapa plugin yang tidak bisa dipakai dengan Netlify aku bisa bebas memakai plugin apapun lalu bersifat serverless jadi semua konfigurasi yang diperlukan untuk menyiapkan website sudah ditangani oleh Netlify ditambah proses sertifikasi SSL dilakukan otomatis dan menambah domain name pun mudah13.

  • Domain Name: Membeli domain name bisa lewat Hostinger atau Rumahweb, aku ambil domain name .my.id karena melihat domain name dari portfolio teman dan seharga Nasi Padang yaitu Rp. 16.000. Aku pilih Hostinger untuk registrasi domain name dan kedepan ingin coba layanan mereka yang lain seperti Mailbox dan VPS. Ketika website berhasil deploy di Netlify maka perlu menambah IP Address yang didapat kedalam DNS Record milik Hostinger dengan A record menuju IP Address yang diberikan14.

  • DNS Provider: DNS Provider aku memakai Cloudflare karena mereka memiliki fitur AI Bot Crawler yang mencegah AI Bot untuk scraping data dari website. Mengganti DNS Provider dari Hostinger ke Cloudflare prosesnya mudah pertama menghapus nameserver yang diberikan oleh Hostinger lalu mengubahnya dengan milik Cloudflare setelah itu record yang ada di Hostinger akan berpindah ke Cloudflare dashboard dan disitu bisa menambah record lain jika diperlukan. Jangan panik ketika record dari Hostinger hilang karena telah berpindah ke Cloudflare.

  • Analytics: Analytics website ku adalah Umami karena telemetri yang ingin ku dapat adalah darimana pengunjung berasal dan link apa yang mereka klik, aku tidak memakai Google Analytics karena berbagai alasan seperti Privasi Pengunjung, Google belum mematuhi GPDR dan Google Analytics bisa memperlambat website.

Postmortem

Dari membuat personal website banyak pelajaran dan teknologi yang ku temukan kemudian menemukan gerakan indie community dan webring, lalu selama proses membuatnya aku hanya mengikuti tutorial yang diberikan oleh Jekyll dan langsung implementasi dengan tema karena aku belum memiliki kemampuan untuk membuat desain dengan Figma ataupun CSS sehingga aku memakai tema yang sudah dibuat.

Pendapat tentang RSS

Ada satu teknologi yang terasa asing padahal sudah ada lama yaitu Real Simple Syndicate disingkat RSS, website seperti berita atau blog update kontennya secara berkala dan pengunjung harus pengunjungi website mereka jika ingin membaca konten didalamnya. Akan jadi masalah jika banyak blogger dan website berita yang diikuti karena harus berkunjung ke berbagai website. Dengan RSS pemilik website bisa standarisasi konten websitenya menjadi format yang sama yaitu Feeds, Feeds dipakai oleh feed reader, news reader, feed aggregate untuk mengambil update dari website berita atau blogger lalu menampilkannya di dalam satu tempat jadi pembaca atau pengunjung tidak perlu cek manual masing masing sosial media atau website jika ada update 15 16.

RSS Feed aku pikir akan bermanfaat bagi pendidikan karena selama aku kuliah update tentang kampus dilakukan di Instagram dan informasi penting dibagikan lewat Grup Chat WhatApps, itu tidak efektif karena terpisah pisah tempat untuk mencari informasi apalagi aku bukan pengguna aktif Instagram jadi aku sering kali tertinggal informasi. Dengan kampus menyediakan RSS Feed untuk sumber informasinya aku yakin bisa mempermudah para mahasiwa mengakses dan mencari informasi yang diperlukan tanpa perlu tenggelam dalam doom-scrolling.

Berikutnya daftar peningkatan yang bisa kubuat nanti:

Hosting Platform

Tempat ku hosting website terpisah pisah kalau diiingat kembali hosting berada di Netlify, membeli domain name di Hostinger, dan DNS Provider dengan Cloudflare. Akan menjadi maintanance nightmare jika terjadi sesuatu lalu ketika ingin melakukan perubahan seperti mengganti domain name atau berpindah hosting website.

Idealnya adalah menggunakan satu provider dan ketiga layanan di atas lucunya sudah menyediakan hosting, DNS, dan domain name dalam satu layanan, untuk kedepannya aku ingin menggunakan VPS untuk hosting website ku nanti karena menggunakan layanan serverless seperti Netlify tidak memberikan kebebasan untuk otak atik server lalu dengan Cloud Hosting seperti Azur, AWS, dan GCP mahal dalam biayanya - aku pernah kena suprise billing dari GCP - jadi memiliki VPS pribadi bisa membuka kesempatan untuk mencoba aplikasi lain seperti analytics, coolify, docker, kubernetes, terakhir hosting game server seperti Left 4 Dead 2. Untuk DNS masih memilih Cloudflare karena fitur AI Bot Crawlernya.

Bahasa

Kebanyakan personal website menggunakan bahasa Inggris untuk tulisan mereka ada juga yang memakai bahasa lokal tetapi itu jarang, sempat terpikir untuk memakai bahasa Inggris tapi aku putuskan untuk tetap memakai bahasa Indonesia karena aku masih balajar menulis dengan bahasa Indonesia lalu masih ada potensi untuk memakai kosa kata lain dengan ejaan yang benar. Untuk itu aku tetap memakai bahasa Indonesia sampai aku sudah nyaman dengan kegiatan menulis ku mungkin kalau domain name ku sudah berubah aku akan coba konten dengan bahasa Inggris secara reguler.

Halaman

Halaman Post dan Index ku pisahkan karena asumsi awalku ialah pengunjung bisa memilih antara melihat post berdasarkan kategori lalu melihat daftar berdasarkan tahun atau tag namun terkesan redudan dan memakan tempat untuk navigasi jadi kedepan aku akan gabungkan fitur archive menjadi satu dengan tampilan utama post berdasarkan kategori dengan tombol tahun dan tags jika pengunjung inginkan.

Selain archive aku juga mempertimbangkan untuk menambah koleksi lain seperti galeri game yang pernah kumainkan, review buku, dan memoar. Motivasi ku ingin membuat memoar sebagai pengingat buat diriku nanti di masa depan apa yang sudah ku lalui di masa lampau dan kenang kenangan nantinya.

Terakhir aku ingin membuat wiki atau dokumentasi seperti melakukan penelitian, menggunakan software atau hardware, dan guide game sebagai tempat untuk melihat lagi apa yang sudah kubuat dulunya dan coba mengajarkan orang lain bagaimana mereka bisa meraih hasil yang sama. Seperti tulisan yang kubuat ini sebagai motivasi untuk menulis hal hal teknikal karena hal yang aku suka ketika menulis adalah membuat konsep ku sendiri dari hasil tangkapanku dan hanya diriku lah yang tahu, dengan personal website ini menjadi long term project untuk mengubah konsep yang kuciptakan menjadi sesuatu yang orang lain mengerti dan bisa digunakan nanti di masa depan.

  1. Referensi kedua paragraf diambil dari Geeks for geeks https://www.geeksforgeeks.org/websites-apps/blog-vs-portfolio-choosing-the-right-website-format-for-you/. ↩

  2. Tujuan ku blogging bukanlah untuk ‘Personal Branding’ tapi sebagai tempat yang bisa membawa ku kepada tulisan dan project berikutnya https://pluralistic.net/2021/05/09/the-memex-method/ ↩

  3. Pendapat pribadi dengan media sosial masa kini. Bisa cek pendapat pribadi ku di blog sebelumnya. ↩

  4. https://developer.mozilla.org/en-US/docs/Glossary/SSG ↩

  5. https://jekyllrb.com/ ↩

  6. https://id.wikipedia.org/wiki/Memoar ↩

  7. https://git-scm.com/ ↩

  8. https://jekyllrb.com/docs/installation/windows/ ↩

  9. https://bundler.io/ ↩

  10. Dependecies adalah kode yang berisi fungsi fungsi tertentu seperti math, gambar atau sebbagainya lalu dijadikan paket untuk dikirim kedalam repositori seperti Rubygems untuk developer atau pengguna lain memakainya. ↩

  11. https://mmistakes.github.io/minimal-mistakes/docs/layouts/#default-layout ↩

  12. Aku memakai kata Publikasi karena kata Deployment hanya diketahui oleh mereka yang pernah kembangkan aplikasi sampai produksi, sedangkan orang awam tahu kata publikasi seperti publikasi buku. ↩

  13. Bagi yang ingin deploy Jekyll di Netlify tambahkan rake package di Gemfile karena bisa tidak terbaca di gem-locks sehingga perlu tertulis di dalam gemfile. ↩

  14. Intruksi lengkapnya akan didalam setting project ketika ingin menambah domain name di Netlify. ↩

  15. https://www.howtogeek.com/115317/htg-explains-what-is-rss-and-how-can-i-benefit-from-using-it/ ↩

  16. https://en.wikipedia.org/wiki/News_aggregator ↩

Updated: