Cách sử dụng Notion làm trang Blog để thu thập, sắp xếp, chia sẻ kiến thức

Loại

Trạng thái

Ngày

slug

Tóm tắt

Thẻ

Bộ sưu tập

icon

Mật khẩu

URL

NotionNext is an opensource GitHub project which is based on Craig Hard's project nobelium, a static blog system built with NextJS and Notion API, deployed on Vercel. It is designed for Notion and all creators.

There are two popular Github projects which can easily transfer your Notion notes to your blog posts, and share to public. You can utilize the Notion Web Clip extention or share function from browsers or applications to send the interesting findings from Internet to Notion, then you can share it out through following two projects:

NotionNext

Demo (Supports multiple themes.)：

https://notion.51sec.org

Nobelium

Demo:

https://nobelium.vercel.app/

Features

Highlights of the features:

Supports switching between multiple themes.

Multiple Deployment solutions supported

🚀 Fast and responsive

Fast page render and responsive design

Fast static generation with efficient compiler

🤖 Deploy instantly

Deploy on Vercel in minutes

Incremental regeneration and no need to redeploy after update the content in notion

🚙 Fully functional

Comments, full width page, quick search and tag filter

RSS, analytics, web vital... and much more

🎨 Easy for customization

Rich config options, support English & Chinese interface

Built with Tailwind CSS, easy for customization

🕸 Pretty URLs and SEO friendly

Original Author's Github:

NotionNext Project: https://github.com/tangly1024/NotionNext

Nobelium Project: https://github.com/craigary/nobelium

My own modified Github based on NotionNext:

https://github.com/JohnnyNetsec/NotionNext

Vercel Severless Deployment Steps

The steps is based on following original author's deployment guide:

https://docs.tangly1024.com/article/vercel-deploy-notion-next

1 Copy my Notion Template

Log into your Notion account (https://www.notion.so/)

Click to open following template I shared out. URL: https://51think.notion.site/6a16d7fc702649b4aac2382259fb7391

Click Duplicate at the top right which will copy whole template into your Notion account.

2 Get your own Page ID from your notion template

Click the top right Share link: Share - > Published tab -> Share to Web

notion image

Copy Page ID which is 32 characters mixed with letters and numbers

Only the red text part, not else

Here is my link and red text part is my page id.

https://51think.notion.site/6a16d7fc702649b4aac2382259fb7391?v=4f1190087c3e453dadaace4161e112ca&pvs=4

3 Copy Github codes

Log into Github account. If no Github account, please register one

Click following original author's Github link and fork it to your Github account

Original author's Github Link: https://docs.tangly1024.com/article/vercel-deploy-notion-next
My modified Github repository link: https://github.com/JohnnyNetsec/NotionNext

4 Deploy to Vercel

Log into Vercel account. You can choose Continue with Github

Create a new project and select NotionNext repostion to import into your new project. Not click Deploy button.

Don't click deploy yet. Lets create an Environment Variable

Add a new variable : NOTION_PAGE_ID

Value is the Page ID we copied from preivous step in Notion part.

如图所示，左侧填写 NOTION_PAGE_ID ，右侧填写页面ID的值

Now we can click Deploy button

Wait two minutes for the completion.

Now we should be able to visit our website using Vercle assigned url.

Original author's demo site: https://preview.tangly1024.com

5 (Optional) Use your own domain

Please see following section for more detail.

Use your own domain for Vercel Project

Vercel:

Setting→Domains→Add，enter your domain name:

It will show invalid configuraiton since cname record in your domain registrar did not add this record yet.

Once all done, you should be able to see valid configuraiton in your domains page:

Cloudflare setup screenshots example:

Customization your Notion Web Site

If you would like to modify your new Notion web site, here are some places you might want to take a look:

1. blog.config.js

I personally like following three themes, heo, hexo and next. I am using heo right now, but you can easily switch it to others through this configuration.

2. Another file you might want to change is your theme's config.js file.

It is easy to understand what each configuration is used for.

Other than those two files, if you find any other components you would like to change, just go to theme's component folder to find out related file to make your own changes. Vercel will automatically deploy the changes to your site. That is how nice we are able to use Vercel this kind free application platform to deploy our Github project.

Use Notion extension to capture contents & use it as your blog post

For Computer:

Install Notion extension to your browser, such as Chrome:

Once you see an interesting page from your browser, click it to save page to your Notion Database.

In my case, I created a Notion database as effective thinking which is https://notion.51sec.org

Click Save page button, it will be saved to your Notion site and you can directly open it in Notion.

You will need to change four options to make this notion page shows in your website created in Vercel:

You will wait about five minutes to let your Vercel https://notion.51sec.org fetch the updates and show you this new content.

Here is the result how it looks like:

For mobile device:

You will need to install Notion app on your mobile devices first, then when you find interesting things such as page, url, video, etc, you always can share it to Notion.

Column 1

Column 2

Share from mobile device to Notion

https://i.51sec.org/202306/nNr3CcCU44.png

Videos

References

https://www.notion.so/

https://vercel.com/