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:
Table of Contents
- Supports switching between multiple themes.
- Multiple Deployment solutions supported
Vercel Severless Deployment Steps
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.
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.
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
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 :
- 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.
Use your own domain for Vercel Project
Add，enter your domain name:
Cloudflare setup screenshots example:
Customization your Notion Web Site
Use Notion extension to capture contents & use it as your blog post
For mobile device:
|Share from mobile device to Notion