• Erwindo Sianipar
    Interaction designer
    Software Engineer
  • blog
    craft
    portfolio
    guestbook
    update
    login
ES
Caritas in VeritateMade with love from Jakarta
brut-velvety-0c@icloud.com
© 2019-2024 Erwindo Sianipar. All Rights Reserved.
termspoliciescookies

Blog Headless CMS dengan Notion

Menerbitkan tulisan blog langsung dari basis data Notion

avatar
Posted by Erwindo SianiparFeb 2, 2022 (3 years ago) · 8 min read
idEngineeringJavaScript
https://images.unsplash.com/photo-1516880711640-ef7db81be3e1
subtitle
Menerbitkan tulisan blog langsung dari basis data Notion
comments
comments
title
Blog Headless CMS dengan Notion
slug
blog-headless-cms-dengan-notion
published
Feb 2, 2022
tags
Engineering
JavaScript
image
https://images.unsplash.com/photo-1516880711640-ef7db81be3e1
active
active
lang
id
type
blog
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.
Tabel sebagai basis data
Tabel sebagai basis data

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.
Manajemen seperangkat data dan konten
Manajemen seperangkat data dan konten
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.
GitHub - janniks/vue-notion: A fast Vue renderer for Notion pages
An unofficial Notion renderer A Vue renderer for Notion pages. Use Notion as CMS for your blog, documentation or personal site. Also check out react-notion (developed by - a fast, reliable, free, and modern analytics for any team) This package doesn't handle the communication with the API.
GitHub - janniks/vue-notion: A fast Vue renderer for Notion pages
https://github.com/janniks/vue-notion
GitHub - janniks/vue-notion: A fast Vue renderer for Notion pages

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.
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
https://www.notion.so/signup
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
Buatlah sebuah basis data untuk penyimpanan data blog, untuk selengkapnya kamu dapat membaca dokumentasi tentang basis data Notion dari dokumentasi di bawah ini.
Creating a database
You can unlock a lot of Notion's most powerful features by using databases. Just click the + New Page button and select a database type to get started.
Creating a database
https://www.notion.so/help/guides/creating-a-database
Creating a database
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.
Your connected workspace for wiki, docs & projects | Notion
A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team.
Your connected workspace for wiki, docs & projects | Notion
https://www.notion.so
Your connected workspace for wiki, docs & projects | Notion

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.
Import konten dari berbagai ekstensi
Import konten dari berbagai ekstensi

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.
Dokumentasi developer Notion
Dokumentasi developer Notion
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.
Blog yang sudah direlease dengan Notion
Blog yang sudah direlease dengan Notion

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
https://images.unsplash.com/photo-1619082044737-4c99b27fdc16

Migrasi Web dari Vue.js ke Nuxt.js

Saya sudah beberapa kali migrasi website mulai dari Jekyll hingga ke NuxtJS
Jan 19(4 years ago)
https://images.unsplash.com/photo-1603623898218-0cb7f493309b

Ekstensi Berguna untuk Peramban

Gunakan ekstensi peramban ini untuk membantu memudahkanmu
Nov 24(2 years ago)
# Installing dependency from nmp
npm install vue-notion --save-dev
const table = await $notion.getPageTable(process.env.NOTION_TABLE_ID)
const pages = table.filter((page) => page.active)
const table = await $notion.getPageTable(process.env.NOTION_TABLE_ID)
const page = table.find((item) => item.slug === params.slug)
const block = await $notion.getPageBlocks(page.id)
<notion-renderer :block-map="block" />
export default async () => {
	var routes = []

	const notion = require("vue-notion")
	const table = await notion.getPageTable(process.env.NOTION_TABLE_ID)
	
	table.filter((item) => item.active).map((item) => {
		routes.push(`/blog/${item.slug}`)
	})
	
	return routes
}