I personally use this method to convert notion pages into websites, this website and its content on which you are viewing this article is entirely built on notion.
![Example of deployed blog at https://blog.toffeemoney.com](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd44ecdb8-702c-43ff-a0bc-f27d73e9993e%2Fdccbeaf3-85b9-43d4-94af-747fea26b255%2FUntitled.png?table=block&id=0fd58d19-8569-4287-a7b4-a17ff8edfd16&cache=v2)
Features
- Setup only takes a few minutes
- Excellent page speeds
- Can be deployed for free on any hosting provider
- Can be configured with custom domain
Prerequisites
- Basic working knowledge of github and vercel
- Free account on github, vercel and notion
- (Optional) Vercel CLI installed
Steps to deployment
I recommend duplicating the default page as a starting point, but you can use any public notion page you want.
Make sure your root Notion page is public and your notion page that you want to publish as website has a public published page.
After duplicating on notion, click share button.Copy the web link to your clipboard.
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd44ecdb8-702c-43ff-a0bc-f27d73e9993e%2F5e323b23-2709-44af-beb8-b726bde97af4%2FUntitled.png%3Ftable%3Dblock%26id%3D7dd6737e-5e88-46a0-9ebe-61307a7d30a5%26spaceId%3Dd44ecdb8-702c-43ff-a0bc-f27d73e9993e%26expirationTimestamp%3D1725832800000%26signature%3DIUgPcUmeGMIm3xJqIhK2pWKbCMc6UTaErhwz4webfoo?table=block&id=7dd6737e-5e88-46a0-9ebe-61307a7d30a5&cache=v2)
- Fork / clone this repo.
- From notion, extract the last part of the URL that looks like
437a047a1dfb4932bf54c3772ed11849
,continous string of 32 charachets, after-
before
?
which is your page's Notion ID. [as seen in the above image]. Put that value inrootNotionPageId
in site.config.ts of your cloned/forked repo.
- (Optional) You can change and modify these values in the site.config.ts file in this repo.
name: 'ToffeeMoney Blog', domain: 'blog.toffeemoney.com/', author: 'Zamani Tech Ventures Pvt Ltd', // open graph metadata (optional) description: 'ToffeeMoney Blog: Say hello to organised spending and savvy shopping', // social usernames (optional) // twitter: '', // github: '', linkedin: '/company/toffeemoney/', instagram: '/toffeemoney/',
- (Optional) In the public folder, change favicons
- Commit changes to your repo.
npm run deploy
to deploy to vercel 💪
OR
- After making changes in config file
- Go to vercel.com and create a account
- Import your project repo
- Deploy the project
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd44ecdb8-702c-43ff-a0bc-f27d73e9993e%2Ff63e9a0b-033f-4a23-9127-bf3077ab46ca%2FUntitled.png?table=block&id=c0aed7db-4cef-4eab-b3b3-773dd5ea2c22&cache=v2)
Steps to run locally
- Fork / clone this repo.
- From notion, extract the last part of the URL that looks like
437a047a1dfb4932bf54c3772ed11849
,continous string of 32 charachets, after-
before
?
which is your page's Notion ID. [as seen in the above image]. Put that value inrootNotionPageId
in site.config.ts of your cloned/forked repo.
- Its is important to use node 16.16.0 with npm 8.11.0
npm install --legacy-peer-deps
npm run dev
to test locally