Next-notion-blog-builder NPM

Want to start posting blog content and stand out from Medium and DEV? Use this CLI to quickly generate yourself a NextJS blog which uses Notion as a CMS to easily store and edit all your articles!

🌱 Getting started

⚙️ Generate the project with the CLI

Run: npx next-notion-blog-builder and follow the CLI.
cd into your <project-name> directory
Run: yarn dev to start the development server on http://localhost:3000
Update the page.tsx files in the /app directory to fill in the blanks!

💿 Create Notion databases for the CMS

See the Notion template page for the database you will need:

Copy this page into your personal Notion space.
Follow the steps in the NotionAPI Docs to create an integration:
- give the integration read-only permissions;
- share each database you need with that integration (Add connections);
- add the Notion integration secret to your .env.local file.
Copy the database ids and add them into your .env.local file.
Open notion in the web and open the network tab when signed in. Check request cookie:
- copy token_v2 into your .env.local file;
- copy notion_user_id into your .env.local file.

🚀 Deploy to Production

I used Vercel to deploy my blog automatically every time I push to the main GitHub branch. See the setup docs.

✨ Features

NextJS 13 Server Components and Tailwind
Mobile responsiveness
404/500 error pages
Loading skeletons
Dark mode!

🏡 Home page

❓ About me page (optional)

📝 Blog (optional)

A blog which pulls articles from your Notion database and renders the article content. Includes:

Search bar for articles by title/ tags
Renders embedded images & video
Renders code blocks & inline code
Renders Notion components (e.g. callouts)
Shows the date and article tags

📔 Dev journal (optional)

A development journal to keep track of daily learnings. Includes:

Search bar for journal entries by title/ tags
Renders embedded images & video
Renders code blocks & inline code
Renders Notion components (e.g. callouts)
Shows the date and article tags

🎓 Resources (optional)

A searchable, filterable list for recommended resources to track external resources you would recommend to others. Filter by resource type (Book, Article, Channel, Video, Newsletter, Website).

🤖 Technologies (optional)

Show off what technologies/ tools you use.

Acknowledgements

The general UX of this site is inspired by Lee Rob. I liked it because it's a very clear, minimal design which also has some mobile responsiveness (which is a must-have).