Earlier this year, I decided to give Notion another try. I used to just use the Apple Notes app, as I thought it was good enough for me. The native app is pretty handy, and it also syncs in the background with all my other Apple devices. But when I started to use my notes for work, it felt inadequate.
Notion is an app that I tried before. At the time I used it, it still had limited blocks in a page for the free plan. I think they have removed that limit recently, making it more consumer-friendly. I was also attracted by its AI writing/editing feature. It is just so wonderful to have an AI assistant to check my writing, help me come up with a skeleton of my writing, etc.
Later on, I realized that I could actually write blog posts in Notion and leverage the open-source package react-notion-x to turn my posts into a React application. I know a thing or two about React, so I said, "Why not give it a try?" Because of that, I started the migration work, and the result is pretty satisfactory. Now it is way easier for me to maintain and publish new content. Most of the content on the site is directly from my Notion app, rather than being stored in a WordPress database. It takes away all the maintenance process, and I can just focus on content creation. Furthermore, I don’t have to leave my Notion app. I can do everything in one app.
The front page
I re-created the front page using the Bootstrap 5 framework. In my old WordPress site, the theme that I used was Theme X, which provides a drag-and-drop interface for me to create the front page. I am not thinking about a redesign here. The current front page is simple, with a short description about myself, which I think is good enough.
The Bootstrap 5 framework handles the layout for me pretty well. It didn’t take me more than one day to finish recreating everything exactly the same as my current front page.
Instagram feeds
My original website is on WordPress, and I have installed many plugins there. One of them displays my Instagram feeds on the front page. I enjoy having these little thumbnail pictures that keep my site lively. Recreating this section on my own is not too difficult. I looked at the Instagram open API, and it's fairly straightforward to call the official API, retrieve all the details including the thumbnail location, and arrange them in a grid layout.
NFT showcase
I am considering adding Web3 elements to my site, and what better way to showcase them than by displaying my NFTs? After all, what is the point of minting or buying NFTs if there is no way to showcase them? To do this, I need a service provider that has indexed the blockchain and can return all the NFTs owned by my wallet address across different chains. There are many service providers that do this, but after comparing their support for different chains, I chose Moralis. It supports chains I have NFTs on, such as BSC, ETH, and Polygon. Using their SDKs, it is easy to retrieve the list of NFTs. The final step is to arrange them in a grid layout using the Bootstrap 5 framework. Nothing too fancy here 😁.
Data migration
Data migration can be a tricky process. In my case, the data includes blog posts and images that are scattered across various locations. As a result, this part of the migration cannot be done automatically. Instead, I need to manually copy over the content and images from my old sites to Notion.
However, I find this process enjoyable as it gives me a chance to go back and read my previous blog posts. I can revisit things that I wrote long ago and look at pictures that I took in the past. This is also a curation process where I let go of old content that I think is no longer relevant. For content that I want to keep, I migrate, tag, and reorganize it to make it easier for readers and my future reference.