How to deploy a free blog online
ūüďĚ

How to deploy a free blog online

Tags
Node.js
OSS
Web Dev
Projects
Tech
Published
July 11, 2024
Author
Abu Musaddiq Zamani
 
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
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.
notion image
 
 
 
  1. Fork / clone this repo.
  1. 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.
  1. (Optional) You can change and modify these values in the site.config.ts file in this repo.
    1. 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/',
  1. (Optional) In the public folder, change favicons
  1. Commit changes to your repo.
  1. npm run deploy to deploy to vercel ūüí™
 
OR
 
  1. After making changes in config file
  1. Go to vercel.com and create a account
  1. Import your project repo
  1. Deploy the project
notion image
 

Steps to run locally

  1. Fork / clone this repo.
  1. 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.
  1. Its is important to use node 16.16.0 with npm 8.11.0
  1. npm install --legacy-peer-deps
  1. npm run dev to test locally