Notion-powered blog starter with @vercel and @tailwindcss
MIT License
main
branchโ 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
layouts/*
- The different layouts used on each page.components/*
- Components used throughout the site.components/blocks/*
- 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.siteData.ts
- a simple file containing global data about the site.git clone https://github.com/tuanphungcz/nextjs-notion-blog-starter
cd nextjs-notion-blog-starter
pnpm install
pnpm run dev
Create a .env
file similar to .env.example
and include the appropriate keys.
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=
This blog starter was inspired by all of these awesome open-sources