You can create a blog like me using Notion

Created: 3 days ago

Updated: 3 days ago

6 min read

5 views

Tags:

websites blog nextjs notion open source

🔗

Bạn có thể đọc bài viết phiên bản Tiếng Việt tại đây.

It has been two years since I created this open-source project for everyone. After spending time exploring and learning more about Notion, I have also updated and added new features to this small project of mine. Through this article, you can also set up a similar website as I did.

For those who prefer to use the older version, the previous article will guide you through it.

Although I have already written an introduction and a detailed guide for readers with programming knowledge, I also want those without prior experience to be able to follow along and implement it successfully.

Why I Decided to Develop This Project

My initial goal was to create a blog to record knowledge and share my personal work experiences. Like many others, I first turned to WordPress. However, the editor’s writing experience felt cumbersome, so I moved on to another CMS (Content Management System). That was XenForo, but its purpose leaned more toward building a forum rather than a blog. Although I also wanted others to contribute articles, the overwhelming number of features and the complexity of moderation led me to abandon it.

Next, I tried Markdown and Obsidian, which offered a smooth writing experience. Still, their inherent limitation was the lack of real-time collaboration. Finally, I found Notion, a platform that provided an excellent writing environment and allowed me to update my system quickly and efficiently.

The previous version I developed worked fairly well. However, 👏 Thi-AnhDinh, a reader of my blog, explored Notion further and helped improve the way data is retrieved from Notion by avoiding reliance on the official Notion API. I’m truly grateful for his contribution to this iteration of the project.

👉

You can check out his blog and the article that guided me in implementing this new version.

Guide to Deploying the System with Notion and Vercel

⚠️

First, you need to have a GitHub account . Please register one before proceeding with the following steps.

🔗

Repository Link: https://github.com/howznguyen/howz.dev

Fork Repository

Go to this repository to clone the system. Use the Fork feature on GitHub before moving on to the Clone step.

Next, you need to update the Repository name and Description for your website. After that, click Create Fork.

Once the fork is successful, the next step is to modify the information you want to display.

Update Website Information in the Repository

In the project, you will notice the datas/ directory. This is where the website information is stored, and you can modify it as needed to suit your requirements.

Below are the three files you need to modify:

datas/home.ts — This file stores the information displayed on your homepage.

datas/categories.ts — This file contains information about categories and tags. Posts will be displayed under these tags if they are assigned accordingly.

datas/footer.ts — This file stores your contact information, which will be shown in the footer.

You can edit the files directly as follows:

After making your changes, click the Commit changes button.

Setting in Notion

Based on the insights from Anh-Thi Dinh's experience, we use unofficial Notion APIs instead of official ones for several critical reasons:

Speed: Unofficial APIs are extremely fast, with retrieval speed equal to that of the Notion site

Full Style Support: Complete support for all block styles and formatting

No Rate Limits: Avoid 429 "Too many requests" errors that plague official APIs

Search Functionality: Basic search through blog posts (title and description)

Database Template

In my project, I created a Notion template specifically for it. Therefore, you should duplicate this template into your own Notion workspace. Or create your own with these properties:

Posts Database:

title (Title)

slug (Rich Text)

description (Rich Text)

tags (Multi-select)

status (Select: Published, Draft, Archived)

featured (Checkbox)

Get Required IDs and Tokens

You can use the following methods to retrieve your system information; however, make sure you have all the required parameters:

ini

From Notion URLs:

Database ID: Found in the URL after the last /

Space ID: Found in the URL after notion.so/. (NOTION_SPACE_ID)

Collection View ID: Found in the database view URL (NOTION_POST_DATABASE_VIEW)

From Browser (Chrome/Edge):

Open Notion in your browser and log in

Open Developer Tools (F12 or right-click → Inspect)

Go to Application tab → Cookies → https://www.notion.so

Find these cookies:

token_v2: Copy the value (this is your NOTION_TOKEN_V2)

notion_active_user: Copy the value (this is your NOTION_ACTIVE_USER)

From Network Tab:

Open Developer Tools → Network tab

Refresh Notion page or navigate to your database

Look for API requests to https://www.notion.so/api/v3/queryCollection?src=initial_load

Check request headers for cookie field containing the tokens

Next, retrieve the required information from the Payload section within the request.

Deploy website

I will use Vercel as the hosting platform to deploy the website. You will need to log in with your GitHub account.

🔗

Vercel: https://vercel.com

After successfully logging in, click Add New… and then select Project.

Select the project you forked earlier and choose Import.

After the import, update the Project Name and add the Environment Variables you saved previously. You can refer to the information stored in your project and apply it here. Once you’ve entered everything, click Deploy.

After waiting a few minutes, you will have a fully deployed blog website powered by Notion.

Conclusion

By following the steps above, you can quickly set up and deploy a personal blog powered by Notion and hosted on Vercel. This approach allows you to manage content seamlessly within Notion while taking advantage of Vercel’s reliable and scalable infrastructure.

I will continue to maintain and update this project, so you are welcome to share feedback, suggest improvements, or report any issues in the comments section below. I hope this guide helps you build your own space to share knowledge and experiences—and don’t forget to explore the flexibility that Notion provides when combined with modern deployment platforms.

Thanks for reading this article

howznguyen with love ❤️