Free database & CMS by using Notion API
As many poor developers 😂, I looking for a cloud provider that offers services at a reasonable price. I’ve used AWS, Azure, Render Cloud and also Railway etc. But finally, I found my perfect solution in Notion. Since I already use Notion as my main note-taking app, I decided to leverage it. In this post, I am excited to share how I used the Notion API to build my Blog & Portfolio for $0.
I. Notion API Introduction
I’ve used Notion as my note-taking app for many years. And Now Notion is the single platform where you can do all your work. Yes “all your work”. We can use Notion to manage the development process by Kanban board, or we can organize our data by using Notion database bla bla. We even can use notion to replace Jira and Confluence and run company process.
Besides the power tools provided, they also provide us APIs for integration, you can checkout their documentations here.
III. Use case
In my previous portfolio, I used the JSON files to store my works data then rendered that data using a ReactJS app. That was very inconvenient because I had to redeploy the app for very single change. I was also constrained by the JSON structure which make it hard to flexible data for my blog page.
💡 So, the solution sound simple: Migrate the json data to a database and build the lightweight CMS to store markdown content for rendering blog. But I didn’t have enough time to implement this solution and I’d have pay for database and spend extra time building the CMS, If I focus to build these things, I worry I would lose my current job haha 🤣.
🚀 Notion is the keys to solve this problem. It provides free database and we can retrieve data via the Notion API. then we can use Notion as a CMS. the blog content can also be retrieved from notion as a blocks and Rendered with ReactJS.
III. Infrastructure
Because Notion API isn’t allow to install and use their SDK from Client Side, then we need the BFF (Back end for Front End) to retrieve the data. NextJS is the good choice in this situation.
- Back-End & Front End: NextJs
- Database: Notions & Notion API
- CMS: Notions.
Build a Database
Firstly, I create database in this notion follow this template. My friend also use notion as a database for his blog and look like his database entity is work well. So now that database entity is mine 🧛♂️.
Create Notion Integration
Next step is create a Notion integration app in Notion Integration. and follow the documentation so your project can read your Notion pages.
Build Your BFF & UI.
In Next.js, we can fetch the database records and page content by slug like this.
Notion provides the data as blocks, which means we can create a custom UI for these blogs. you’ll find that some developers have already built libraries to render blocks quickly and easily. But I chose to build it myself, because I wanted the UI to follow my own portfolio’s UI/UX principles. Hmm 🤔. Actually, it was really easy with the help of Copilot (only $10 haha).
Deployment.
Ok, now let deploy our app on my favorite service Vercel. and checkout the result.
Remaining problem and enhancement.
In this post, I just want to introduce the concept and the way we take advantage of Notion. But in detail, we still have remaining problem and some point need to be enhanced.
- Notion provide free storage but limited, if we have many blogs and many blog image, that would be problem, so we need to pay for Notion pro or find extra solution to handle free image upload.
- Notion block images doesn’t return the image size, it’s hard to make the flexible size of image in blog page.
Hopefully, you’re enjoy this blog and can take advantage of notion as well. Saving your money from cloud invoice and buy your own house 😎.
Thank you 🪶
JUST READ A LITTLE MORE