Blog Headless CMS dengan Notion
Menerbitkan tulisan blog langsung dari basis data Notion
Posted by Erwindo SianiparFeb 2, 2022 (5 years ago) · 15 min read
Photo by Randy Fath on Unsplash
Website ini sudah sering saya ubah dan saya sering mencoba untuk menggunakan teknologi website yang baru, saya juga sering melakukan desain ulang terhadap website ini, berapa waktu lalu juga, saya ingin melakukan perombakan terhadap desain agar menjadi lebih sederhana, namun saya berpikir bahwa website ini masih dapat berjalan sesuai dengan kebutuhannya.
Cadangan kekuatan blog dengan Notion
Perubahan besar yang saya lakukan kali ini adalah mengubah konten pada blog menjadi dinamis, tidak lagi membutuhkan fail format markdown
.md seperti blog versi sebelumnya, serta tidak memerlukan Sistem Manajemen Konten (CMS) untuk proses seperti penyuntingan, menambahkan atau menghapus sebuah item blog, dan bahkan tidak perlu menambah suatu baris kode lagi untuk menerbitkan blog. Ini karena seluruh blog dapat langsung ditangani dari Notion API bahkan untuk pengelompokan blog dengan kategori dan seperangkat data lainnya.
Kelebihan Notion sebagai manajemen konten
Menerbitkan blog hanya dengan semudah mengisi seperangkat data dan langsung menulis artikel ke dalam konten area, selain itu, Notion juga memiliki banyak komponen yang siap pakai, kita juga dapat dengan mudah melakukan penambahan komponen tersebut ke dalam konten area.
Jika kamu seorang pemrogram yang pernah membuat postingan blog dengan Generator Situs Statis (SSG) seperti Jekyll, Next.js dan Nuxt.js, maka kamu mungkin akan familiar dengan fail format markdown untuk membuat sebuah postingan blog.
Tahun 2021, saya hanya menghasilkan 1 buah postingan blog, ini karena saya cukup malas untuk menulis blog dengan format markdown, butuh upaya lebih untuk menulis postingan, mengunggah aset seperti gambar pendukung dan melakukan commit ke Github repositori untuk mendapatkan sebuah blog yang berjalan.
Karena hal ini saya sangat antusias segera merubah blog ini, lalu memigrasikannya ke Notion yang dapat mendukung banyak aktifitas dalam menulis blog. Sejauh saya menggunakan Notion hingga saat ini, saya hanya menggunakannya sebagai penyimpanan catatan, menulis dokumentasi kode, dan coretan-coretan seputar pekerjaan dan catatan pribadi.
Dan sekarang saya memiliki sebuah blog dengan kekuatan penuh yang dapat ditangani langsung dengan Notion editor, tersinkronisasi dengan basis data Notion tempat semua item blog berada, dan hal itu semua terjadi secara langsung.
Sekarang mari kita belajar teknik tentang cara saya membangun hal ini, karena dasar website ini saya buat dengan kerangka kerja Nuxt.js, maka yang dibutuhkan adalah pengalaman mengembangkan website dengan JavaScript dan kerangka kerja yang dibutuhkan.
Sebelumnya di sini saya menggunakan sebuah dependensi yang sangat luar biasa dan terbilang cukup mudah untuk diterapkan.
Membuat basis data untuk blog
Mulailah dengan membuat akun di Notion jika kamu belum memilikinya, maka kamu harus mendaftar terlebih dahulu dari tatutan di bawah ini.
Buatlah sebuah basis data untuk penyimpanan data blog, untuk selengkapnya kamu dapat membaca dokumentasi tentang basis data Notion dari dokumentasi di bawah ini.
Selanjutnya hal yang paling penting dalam membuat data untuk blog adalah seperangkat yang akan merepresentasikan sebuah item blog. Properti-properi yang saya gunakan sebagai berikut.
Properti | Tipe data | Keterangan |
slug | string | Tautan |
title | string | Judul |
subtitle | string | Subjudul |
published | string | Tanggal |
tags | string[] | Penanda |
image | string[] | Gambar kecil |
active | boolean | Draf |
Untuk konten website dapat langsung dibuat dengan komponen-komponen yang sudah sangat banyak dan berguna langsung dari Notion editor.
Properti-properti di atas sebaiknya menyesuaikan dengan kebutuhan blog yang ingin dibuat. Kamu dapat menduplikasi basis data yang saya gunakan untuk blog ini, dengan duplikasi dari tautan di bawah ini.
Impor konten format markdown ke Notion
Karena sebelumnya saya menggunakan format markdown untuk semua item blog sebelumnya, maka yang saya lakukan adalah mengimpor konten item blog tersebut ke Notion. Salah satu fitur dari Notion ini sangat mempermudah pengimporan konten ke dalam basis data Notion. Bukan hanya untuk format markdown saja, namun juga tersedia berbagai format fail lain, hanya semudah melakukan impor seperti terlihat pada gambar di bawah ini, maka konten langsung terimpor ke Notion dengan seketika.
Bekerja dengan Notion API
Notion API (antarmuka aplikasi pemrograman) adalah sumber keajaiban yang terjadi di sini, dengan pemanfaatan Notion API ini, saya dapat dengan mudah mengambil konten blog yang ada di Notion, lalu mengimplementasikan ke dalam desain blog yang saya miliki.
ℹ️
Di sini saya tidak akan menjelaskan hal dasar dan kode untuk pengaplikasiannya, untuk kalian yang mengikuti tahapan-tahapan di bawah, sebaiknya kalian sudah memiliki pengetahuan dasar JavaScript dan kerangka kerja Nuxt.js yang baik.
Saya mulai dengan melakukan pemasangan paket dependensi
vue-notion sebagai Kit Pengembangan Perangkat Lunak (SDK) untuk website yang saya gunakan. karena di sini saya menggunakan Nuxt.js. Maka berikut beberapa tahap pemasangan yang saya lakukan, dimulai dengan pemasangan dependensi.Setelah melakukan hal di atas, saya hanya perlu melakukan beberapa konfigurasi untuk dapat menggunakan basis data dari Notion.
Untuk selanjutnya, ini adalah contoh kode untuk mengambil daftar blog dari basis data Notion hanya beberapa baris kode.
Dari hal di atas, saya melakukan pemilihan dengan hanya menampilkan blog dengan status aktif, selanjutnya dengan mudah saya tinggal melakukan perulangan untuk mendapatkan tiap item blog yang ada di dalam daftar basis data.
Kemudian untuk item blog setiap halamannya, saya menambahkan beberapa baris kode, pertama saya akan mengambil seluruh item blog yang ada di dalam basis data, kemudian saya akan membandingkan
slug dari basis data dengan slug yang didapat dari route saat melakukan perpindahan halaman. Hal tersebut dilakukan karena basis data Notion hanya menyimpan data id unik untuk identifikasi item blog, namun blog yang saya buat memiliki konfigurasi route dengan slug. Tujuan menggunakan slug agar alamat blog lebih mudah dibaca.Dari hal di atas saya telah mendapatkan konten setiap item blog dan langkah selanjutnya hanya melakukan render konten mentah tersebut agar dapat di baca ke dalam skrip HTML.
Dari hal di atas maka konten mentah dari respon Notion API akan diterjemahkan ke dalam skrip HTML yang dapat dibaca oleh peramban.
Menghasilkan peta situs untuk setiap konten
Dari versi website sebelumya, saya sudah menggunakan peta situs dengan bantuan dari dependensi
nuxt-sitemap untuk menghasilkan peta situs. Konfigurasi daftar blog dari Notion sendiri, saya hanya perlu menambahkan beberapa baris kode untuk menghasilkan peta situs yang diinginkan.Merilis ke Github Pages
Tahap ini adalah tahap terakhir dari perjalanan membangun website ini, akhirnya saya mengucapkan selamat tinggal ke pada format markdown untuk kebutuhan menulis blog di website ini.
Pernyataan penutup
Saya masih sangat ingin mempelajari banyak hal lagi dari Notion API ini, walaupun masih dalam status BETA (saat blog ini ditulis) namun hal-hal luar biasa sudah bisa digunakan. Saya akan terus belajar banyak hal terutama di bidang teknologi.
More from Erwindo SianiparSee all
