Intro
Hi, I created my site with notion and react! There are many repos and ways to create your blog with react and notion. Some use Gatsby and the others use Next.js! I tried both and both have their pros and cons. Here I want to share my experience using them and talk about some great project I may try out for creating a better site.
Data: Markdown or Notion API
First, I tried a multi-language package that uses Gatsby to generate static sites ( blog.julies.pro ). The benefit for using it is that it uses markdown as a data source. This way the data is simply from the markdown file and all the site is generated during the deployment. However, if we want to live update the blog content, we need to re-deploy and all the static page are generated again!
Then, I used Notion API packages like react-notion-x to create my site with next.js ( andys.pro ). The great part about it is the content can be live update from changing the content in Notion. Also, I can use the notion collection to serve as a blogging database system. However, since everything is on Notion, the linked database wasn't rendered properly after notion changed its api last week. It's heavily rely on the notion source. If notion is down, my site is gone!
Framework: Gatsby or Next.js
Gatsby
Using Gatsby, everything is static and it's a great way to practice GraphQL!
👍 for Gatsby
Gatsby creates a lot of packages that you can install and use it! I'm loving the experience that everything is one plugin away!
👎 for Gatsby
However, using Gatsby, I tend to create the site and managing the route. I spent most time making the site instead of writing post for sharing. Writing Markdown is nice, handling the data flow is awesome, however, I tend to enjoy having a nice WYSIWYG editor. Maybe, I should just find a great Markdown editor that handles the ui and mdx.
Next.js
Next.js can be more complicated than Gatsby. However, since I'm creating my site with some help from Github packages , everything just got easier! The notion page is linked and the demo site looks great! The only thing I need is to edit the style a little bit to fit my site's need. everything can be done below a day!
👍 for Next.js
The best thing about Next.js is that it not only handles the SSG ( Server-side generation ) but also handles the SSR ( Server-side Rendering ). For most content, it will just give the user the generated content. After refresh for several times, the new generated content can be served! With Notion, the combination creates a wonderful experience! there's no need for me to deploy to Github every time I updated my post since the content is fetched by notion block instead of markdown static file. I can just write on Notion and my site content can be updated instantly with a refresh!
👎 for Next.js
to be continued....
Good blog framework I need to try!
Notablog
Notablog in practice
gatsby source notion - data link for notion and static sites with markdown. Currently, multiple notion blocks are not available. I'll try it when it's more mature.
Conclusion
Actively managing to blog, vlog and instagram is hard. I need more contents for YouTube to grow attentions and a great blog for creating a better SEO for the Google search engine, so that my content can be discovered. A nice workflow is needed, so that I can create videos, images and posts all together in a lean way. Hopefully, I'll continue to provide great contents for you and discuss what's happening and the tips and tricks I found for better workflows and life hacks! For, blogging framework, I'll continue to try different ways and share my experiences! Hope you have a great day!