Notion-powered blog starter with Nextjs and Tailwind

Tuan Phung

Last update: Dec 29, 2022

Overview

Nextjs Notion Blog Starter

Default demo - Deployed from main branch
Blog setup - I wrote an article on how to use this starter to start your blog
My personal site - The source code that I use to power my website

✨ Features

✅ Setup takes only a few minutes (single file config) 💪
✅ Newsletter subscription via Convertkit API
✅ Simple analytics with Umami
✅ Automatic OG social images with Tailwind template
✅ Automatic pretty URLs
✅ Excellent page speed
✅ Optimized for Next.js and Vercel

🛠 Build with

Framework: Next.js, Typescript
Styling: Tailwind CSS
Content: Notion API
Newsletter: Convertkit
Deployment: Vercel

📕 Project Overview

layouts/* - The different layouts used on each page.
components/* - Components used throughout the site.
components/notionBlocks/* - Custom blocks made for Notion rendering.
utils/* - Short for "utilities", a collection of helpful utilities or code for external services.
pages/api/* - API routes powering /og-image dynamic OG image and /subscribe-convertkit newsletter subscription.
pages/blog/* - Static pre-rendered blog pages that fetch information from the Notion API.
pages/* - All other static pages.
public/* - Static assets including images, fonts, and videos.
styles/* - global styles and Tailwind.
data/* - a simple file containing global data about the site.

🏃‍♂️ Running Locally

git clone https://github.com/tuanphungcz/nextjs-notion-blog-starter
cd nextjs-notion-blog-starter
npm install
npm run dev

Create a .env file similar to .env.example and include the appropriate keys.

🚀 Deploy to vercel

NOTION_SECRET=
BLOG_DATABASE_ID=

# ConvertKit is optional
NEXT_PUBLIC_CONVERTKIT_FORM_ID=
NEXT_PUBLIC_CONVERTKIT_API_KEY=

# Umami is optional
NEXT_PUBLIC_UMAMI_ID=
NEXT_PUBLIC_UMAMI_URL=

💁‍♀️ How to use

Blog setup - I wrote an article on how to use this starter to start your blog

📝 Credit & inspiration

This blog starter was inspired by all of these awesome open-sources

samuelkraft-next by @samuelkraft
leerob.io by @leerob
Next.js Notion Starter Kit by @transitive-bullshit
braydoncoyer.dev by @braydoncoyer

Fullstack Turborepo starter. Typescript, Nestjs, Nextjs, Tailwind, Prisma, Github Actions, Docker, And Reverse proxy configured

Turborepo (NestJS + Prisma + NextJS + Tailwind + Typescript + Jest) Starter This is fullstack turborepo starter. It comes with the following features.

Jan 9, 2023

Starter-gatsby-blog - Gatsby starter for a Contentful project from the community.

Contentful Gatsby Starter Blog Create a Gatsby blog powered by Contentful. Static sites are scalable, secure and have very little required maintenance

Jan 29, 2022

Create nbundle-powered Notion apps with one command

⚠️ This project is under development and is not ready for public use. All 1.0.x releases are considered alpha releases, are not stable, and may have b

Nov 29, 2022

A Notion themed portfolio developed with NextJS, deployed on Vercel.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Jul 19, 2022

Show floating sticky outline (table of contents) for Notion pages, powered by nbundle.

Notion Outline Show floating sticky outline (table of contents) for Notion pages, powered by nbundle. This is an nbundle-powered Notion app bootstrapp

Nov 10, 2022

11ty starter: uses md and notion as data sources

eleventy_notion_starter 11ty starter: uses md and notion as data sources. Based on https://github.com/siakaramalegos/11ty-sia-blog. Used to power http

Oct 26, 2022

Gatsby-blog-cosmicjs - 🚀⚡️ Blazing fast blog built with Gatsby and the Cosmic Headless CMS 🔥

Gatsby + Cosmic This repo contains an example blog website that is built with Gatsby, and Cosmic. See live demo hosted on Netlify Uses the Cosmic Gats

Jan 29, 2022

⚡ Personal website and blog made using TypeScript, Next.js, Tailwind CSS.

小康 blog View Demo · Report Bug · Request Feature 🌍 honghong.me Framework: Next.js Database: Planetscale ORM: Prisma Authentication: NextAuth.js Deplo

Dec 31, 2022

🌟 My Website/Blog using Next.js, Tailwind CSS and Vercel (v3)

My Website made using Next.js, Tailwind CSS, and Vercel. Screenshots 📸 🚀 Live at - https://arunava.tech Features 🌟 Next.js Tailwind CSS Vercel Dark

Dec 22, 2022

Comments

Vercel deployment

I'm looking forward to setting this up as my open notebook deployed on vercel. For that I would need to hide keep my secrets locally while also having them on vercel. This doesn't seem to be explained in the docs.

You should be able to set up a Deploy button https://vercel.com/docs/deploy-button with the correct API keys field and get a super simple deployment setup for new users

I've went ahead and made a deploy button already :

I would recommend you include it in the readme along with the "Run locally" section. I would open a PR but I'm on mobile at the moment

opened by ajnart 2
Image not Render

I want to make some of the blog post with Image in it. Like Step By step Tutorial type of content. I found that image not showing up in the blog post after I publish . I am using Blog Starter Template( older version ). Is there any way to fix? Thank you.

opened by thelapyae 0

Notion-powered blog starter with Nextjs and Tailwind

Related tags

Overview

Nextjs Notion Blog Starter

✨ Features

🛠 Build with

📕 Project Overview

🏃‍♂️ Running Locally

🚀 Deploy to vercel

💁‍♀️ How to use

📝 Credit & inspiration

You might also like...

Fullstack Turborepo starter. Typescript, Nestjs, Nextjs, Tailwind, Prisma, Github Actions, Docker, And Reverse proxy configured

Starter-gatsby-blog - Gatsby starter for a Contentful project from the community.

Create nbundle-powered Notion apps with one command

A Notion themed portfolio developed with NextJS, deployed on Vercel.

Show floating sticky outline (table of contents) for Notion pages, powered by nbundle.

11ty starter: uses md and notion as data sources

Gatsby-blog-cosmicjs - 🚀⚡️ Blazing fast blog built with Gatsby and the Cosmic Headless CMS 🔥

⚡ Personal website and blog made using TypeScript, Next.js, Tailwind CSS.

🌟 My Website/Blog using Next.js, Tailwind CSS and Vercel (v3)

Comments

Vercel deployment

Image not Render

Owner

Tuan Phung

A Technical Blogging Website that utilizes Notion as a CMS for ease of modification with the help of the notion-API & whose content has been rendered with next-js and react-notion-x

Bookworm is a minimal NextJs Tailwind blog starter template.

A minimal norui portfolio example built with NextJS and powered by Notion 🚀.

Minimal, SEO-focused website starter kit powered by Notion, GitHub, and Vercel.

simple-remix-blog is a blog template built using Remix and TailwindCSS. Create your own blog in just a few minutes!

This is a blog built with sveltekit, tailwind and daisyUI, made to be used as my personal blog.

My personal Website, where I share my blog and project. Build using Nextjs and Tailwind CSS

Build a blog site using Nextjs, Tailwind css, GraphQL, Graph CMS

Starter template for a personal website blog, built with Next.js, MDX, and Tailwind CSS.

⏪ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more