blogging with Notion + Next.js + GitHub pages

The perfect starter kit for building websites with Next.js and Notion. This repo is what I use to power my personal blog / portfolio site transitivebullsh.it. It uses Notion as a CMS, fetching content from Notion and then uses Next.js and react-notion-x to render everything. The site is then deployed to Vercel.

https://github.com/yihui-he/blog

Notion is the best note taking app :) Now you can write blogs in Notion and publish them automatically with Next.js and GitHub pages.

⚠️

if you are not familiar with javascript, I recommend using Google sites. You can create website in seconds without coding.

Notion as the content management system (CMS)

create a Notion page for blogging and make it public:

Yihui He's Blog

Welcome! I'm an AI research scientist (3k citations) / full stack engineer (5k GitHub stars).

https://yihuihe.notion.site/yihuihe/Yihui-He-s-Blog-bd32b787e47149f38941174a9c6846b6

All config is defined in site.config.js. Change config values accordingly

All you really need to do to get started is edit rootNotionPageId. It defaults to rendering my site's public notion page 78fc5a4b88d74b0e824e29407e9f1ec1.


// where it all starts -- the site's root Notion page (required)
rootNotionPageId: 'bd32b787e47149f38941174a9c6846b6',

// basic site info (required)
name: 'Yihui He',
domain: 'yihui-he.github.io',

You'll want to make your root Notion page public and then copy the link to your clipboard. Then extract the last part of the URL that looks like d1b5dcf8b9ff425b8aef5ce6f0730202, which is your page's Notion iD.

publish with Next.js + Github pages

Next.js is a React static page generator. You can publish the static pages to GitHub pages by:


npm install
npm run deploy-gh

Done!

Yihui He's Blog

Yihui He, AI research scientist / full stack engineer

https://yihui-he.github.io/blog/