Bagaimana website ini dibuat

Membangun ulang website ini (damaera.com) dengan NextJS dan Prismic?

Setelah saya keluar dari Bukalapak sekitar pertengahan September. Saya harus segera cari-cari tempat baru. Otomatis diperlukan CV baru kan ya? buat apply-apply pekerjaan lain meneruskan karir ke perusahaan selanjutnya. Nah, setelah mengedit-edit CV, ada field website: www.damaera.com. Saya jadi ingat saya punya website. Tapi website ini sudah lama tidak dirawat. Apakah masih relevan sekarang?

Secara design, website tersebut nampak masih bagus. Namun saya rasa layout websitenya jadi terlalu "pasaran" di jaman sekarang. Hero image dengan gambar direwolf (sebenarnya ini serigala). Pasaran kan?

Secara teknis, website ini juga sudah ketinggalan jaman. Masih pakai jekyll yang dihosting di github (pakai [username].github.io), dan sudah tidak adaupdate selama 2 taun! (repo website lama).

Yang saya inginkan?

• Bikin dengan React
• Blog engine, saya mau menulis artikel-artikel disini
• Hosting murah, (kalau bisa gratis)
• Design yang bagus
• Sistem komentar

Dari kriteria yang saya butuhkan, saya riset dan mulai mengerjakan website ini

Framework

Kriteria pertama, Harus React. Kalau bikin pakai create-react-app bakal jadi susah, karena tidak SSR. Jadinya mengerucut hanya ada 2 kandidat kuat di sini: NextJS dan GatsbyJS.

Dan akhirnya saya memilih NextJS: SSR, karena lebih gampang buat dikustomisasi, saya lebih memilih untuk tidak jadi static site, bisa bikin custom API.

Kenapa saya tidak memilih GatsbyJS: GraphQL, too much for me. Dan struktur GraphQL nya menurut saya aneh. Selain itu Gatsby hanya generate static site, jadi tidak bisa membuat custom API.

Pilihan final: NextJS

Blog Engine

Kandidatnya: NextJS + MDX, Headless CMS macam Prismic, ButterCMS, StoryBlok atau Contentful.

Sebenarnya NextJS+MDX cukup powerful untuk membuat suatu artikel, karena kita bisa embed React component ke dalam MDX. Blog nya bisa sangat interaktif. Tetapi saya memilih untuk tidak memilih MDX, karena untuk membuat artikel, kita harus push .mdx ke repo kita. Dan juga tidak adanya WYSIWYG editor untuk membuat artikel. Bisa jadi tanpa WYSIWYG saya akan malas menulis artikel.

Kandidat berikutnya: Headless CMS. Apa itu Headless CMS? Singkatnya Headless CMS adalah CMS tanpa frontend, jadi outputnya berupa API saja. Frontendnya terserah kita mau buatnya bagaimana. Lalu saya coba sign-up satu-satu dari Prismic, ButterCMS, StoryBlok dan Contentful. Setelah mencoba, saya lihat pricingnya. Contentful mahal, yang paling murah $39/month. Yang gratisnya unlimited hanya Prismic dan StoryBlok, tapi hanya buat 1 user saja. Paling cocok dengan prismic, maka saya pilih prismic.

Saya sudah memilih prismic sebagai blog engine, nantinya menulis konten, upload image dari sini. Ada fitur lokalisasi konten, jadi bisa nulis 1 artikel tapi dengan beberapa bahasa. Rencananya mau indonesia dan inggris.

Pilihan final: Prismic

Hosting

Karena pakai NextJS dynamic site, bukan static site. Saya memakai now.sh dari zeit.co, yang bikin NextJS. Tidak ada pilihan lain bagi saya.

Pilihan final: Zeit

Design

Design, Less is more: Design nya sendiri bertema minimalis hanya ada warna putih di background serta warna lain di foreground. Font nya serif, "EB Garamond" Gratis dari google fonts. Sebenarnya saya ingin memakai font "Freight Text" tapi cukup mahal, akhirnya ga jadi. Pakai yang gratisan saja.

Transisi antar page web ini terlihat kompleks, padahal sebenarnya cukup simple. Saya menggunakan next-morph-page.

Sistem komentar

Pakai disqus, atau yang sejenis itu sudah terlalu pasaran. Setelah riset,saya menemukan "Sistem komentar berdasarkan Github issue". Dan saya langsung tertarik dengan ini. Dikarenakan pembaca blog ini (seharusnya) adalah developer, harusnya mereka semua mempunyai akun Github. Ada 3 seperti ini yang saya temukan, gitment, gitalk dan utterances. Yang terakhir yang saya pilih karena desainnya lebih cocok.

Tentu saja website ini open source dan sudah berada di Github. Jika ada saran, pertanyaan atau rekues bisa diteruskan di kolom komentar dibawah ini ya.