Easiest and Free Way to Collect, Organize, Share Knowledge - Use Notion as Blog Site - NETSEC


Learning, Sharing, Creating

Cybersecurity Memo

Monday, July 24, 2023

Easiest and Free Way to Collect, Organize, Share Knowledge - Use Notion as Blog Site

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:


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:
  1. NotionNext Project: https://github.com/tangly1024/NotionNext
  2. Nobelium Project: https://github.com/craigary/nobelium

My own modified Github based on 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


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
  • notion image
  • 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

4 Deploy to Vercel

  • Log into Vercel account. You can choose Continue with Github
  • notion image
  • Create a new project and select NotionNext repostion to import into your new project. Not click Deploy button. 
  • 2.点击导入您的NotionNext项目
  • 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. 
  • 2.在Vercel控制台中找到访问地址

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


SettingDomainsAdd,enter your domain name:
notion image

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

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

Cloudflare setup screenshots example:

    notion image
    notion image
notion image

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. 

Share from mobile device to Notion


YouTube: https://youtu.be/hCtJY_df-cs


  • https://www.notion.so/
  • https://vercel.com/

No comments:

Post a Comment