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:
-
- Demo (Supports multiple themes.)：
- Nobelium
Features
Highlights of the features:
- Supports switching between multiple themes.
- Multiple Deployment solutions supported
- Fast page render and responsive design
- Fast static generation with efficient compiler
- Deploy on Vercel in minutes
- Incremental regeneration and no need to redeploy after update the content in notion
- Comments, full width page, quick search and tag filter
- RSS, analytics, web vital… and much more
- Rich config options, support English & Chinese interface
- Built with Tailwind CSS, easy for customization
Vercel Severless Deployment Steps
Reference: 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
- 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.
- 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
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
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 |
Videos
References
- https://www.notion.so/
- https://vercel.com/