Intro
I have fallen in love with Notion, since I discovered. So far, the records of my life are managed by Notion, which greatly improves the efficiency of my study, life and work. Because of this, the article you are looking at, or should say that the entire blog is auto generated from Notion.
Discovery
I stumbled upon a Notion-related project React-Notion on GitHub, which uses React for rendering and can turn Notion pages into personal blogs, databases, or even personal websites, the converted pages are almost a copy of Notion.
React-Notion do not have a Demo Link for there project, I cloned it and tried to build the Blog Template provided by them locally, and found that there is nothing but monotonous content, but this is enough.
NextJS is used as the framework, and some CSS can be used to beautify the page. Referring to some examples of using React-Notion, I started to use tailwindcss to design my own Notion Blog.
Using tailwindcss, even though I don't know anything about design or CSS, the usage of tailwindcss is very simple and straightforward and has made the design of my blog a lot less difficult.
A lesson learned from the past
I have used many Server-based CMS (e.g. Wordpress) and Serverless page rendering frameworks (e.g. Hugo), also have modified the rendering framework of my Blog many times, but I always felt that it was not as good as I wanted it to be, and I wanted my Blog to be both simple and in my own style if possible.
Using a Server-based CMS such as Wordpress:
Although there are many plugins for Wordpress that you can always find a favourite plugin to make your blog/website shine, it is the number and complexity of plugins that makes the website that is meant to be simple and clean cumbersome and bloated. In addition, using Wordpress requires you to manage updates to your plugins in a timely manner, and managing your database is an even bigger headache. If you are a team or company blogger, Wordpress is definitely the way to go. Furthermore, as Wordpress is a Server and Database based product, the speed of access varies from location to location, making it difficult to access in some areas. We can use the Cloudflare to make it faster in most parts of the world, however, the server hardware configuration is always a challenge. This is one of the reasons why I gave up on Wordpress after using it for a few months.
Using Serverless-based static page rendering frameworks such as Hugo, Hexo:
Being based on serverless simply solves a major pain point for me when using Wordpress, as it allows users to access content on the site as quickly as possible through a Content Delivery Network (CDN) such as the one provided by Vercel.
Why I abandon it again? I don't know anything about design, but I wanted to have my own style for my blog, even my website. I liked some of the Hexo themes, but in the end, I gave up using Hexo.
Referencing
I have known for a long time about Fruitionsite, a tool that uses Cloudflare Workers to turn a Public Notion Page into a personal domain name that can be nested. However, this is only nesting, or what could be interpreted as a reverse proxy, but in reality, Notion uses services such as Intercom, Sentry, etc., which load simultaneously even when using their own domain name, those may can slow down the loading of the page. If you don't care about these issues, Fruitionsite is indeed a good choice.
React-Notion-X is also a project similar to React-Notion.
Unlike React-Notion, where notion-client is their main API service, React-Notion uses notion-api-worker, which needs to be paired with Cloudflare Workers and KV space to build the API service, and the free Cloudflare Workers has a limit of 100,000 accesses per day that is more than enough for normal accesses. (Of course, you can use the Notion-API already hosted by Splitbee)
Super.so is also a service that offers the use of Notion as a Blog, but for an additional fee, so if you don't know anything about programming but love Notion, you might want to try the following.
Start coding
JS + tailwindcss + TypeScript with notion-api-worker + React-Notion (both written by Splitbee), and the Blog is pretty much in place. But there were a few drawbacks that I really struggled with, such as Latex and Table of Content not being displayed, which were caused by the Blocks limitation of React-Notion, you can check if they support certain Blocks here. Simply comparison, I finally used notion-api-worker + React-Notion-X, after all React-Notion-X supports more Blocks than React-Notion.
Disadvantages (planned for later)
Use the official Notion API (Blogging entirely using Notion's official API is finished and hope to release it soon in the future)
Sitemap
Postview
Tag page
Understand
Under this service, it is understood that we use Server + Serverless to support our Blog.
Both React-Notion and React-Notion-X are just Notion React Renderer applications. In simple terms, we extract the content of the CMS into JSON via the API, and then, by some means, read this JSON and our page is created.
In here, either notion-api-worker or notion-client, they act as our API to extract the content of the Notion pageID.
// Using notion-api-worker to get JSON export const getNotionPosts = async (): Promise<PostContent[]> => { return await axios.get(`https://${NOTION_API}/v1/table/${NOTION_PAGE_SLUG}`).then((response) => response.data); };
// Using notion-client to get JSON const notionAPI = new NotionAPI(); const recordMap = await notionAPI.getPage(notionPostID);
Once extracted, we render them into readable text using the Notion Renderer.
// Using NotionRenderer <NotionRenderer recordMap={recordMap} fullPage={true} showTableOfContents={true} components={{ code: Code, equation: Equation }}></NotionRenderer>
Finished...
Consideration
Using .env
❓
Please Note: This does not prevent the original tableID from being read.
Since the Notion Table may be read with unpublished content, you need to use .env to avoid reading the Notion tableId.
Summary
As a personal blog, clean content and a simple interface are important. I don't need the same login function as Wordpress, nor do I need a bunch of plugins to drive the blog. Access is as fast as it can be, which is what I really need for my Blog.