How to deploy a free blog online

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

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.

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 in rootNotionPageId 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 💪

After making changes in config file

Go to vercel.com and create a account

Import your project repo

Deploy the project

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 in rootNotionPageId 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