October 2022: I am releasing a new verssion which allows user to create multiple blog posts. The previous version Nextjs Notion Blog Starter is still available under the blog-starter branch.
Blogfolio is a open-source blog starter built with Nextjs and Tailwind. It uses Notion as a CMS and is deployed on Vercel. Build on top of Notion API worker and React-notion
- Homepage - Deployed from
main
branch - Blog demo - Demo blog from blogfolio with a subdomain: demo.blogfolio.co)
- My personal site - Built from blogfolio with a subdomain: tuan.blogfolio.co)
- Will be added - I wrote an article on how to use this starter to start your blog
- ✅ Excellent page speed
- ✅ Optimized for Next.js and Vercel
- ✅ Automatic OG social images with @vercel/og
- ✅ Automatic pretty URLs
- ✅ Newsletter subscription via Convertkit API
- ✅ Simple analytics with Umami
- Framework: Next.js, Typescript
- Styling: Tailwind CSS
- Content: Notion API worker
- Notion rendering: React-notion
- Newsletter: Convertkit
- Deployment: Vercel
layouts/*
- The different layouts used on each page.components/*
- Components used throughout the site.utils/*
- Short for "utilities", a collection of helpful utilities or code for external services.pages/api/*
- API routes powering/@vercel/og
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.
git clone https://github.com/tuanphungcz/blogfolio.co
cd blogfolio.co
npm install
npm run dev
Create a .env
file similar to .env.example
and include the appropriate keys.
DATABASE_URL= # postgresql://postgres....
GOOGLE_ID=
GOOGLE_SECRET=
NEXTAUTH_SECRET=
AUTH_BEARER_TOKEN=
VERCEL_PROJECT_ID=
SERVICE_WORKER_API=
NEXT_PUBLIC_APP_DOMAIN_URL=
NEXT_PUBLIC_DEMO_BLOG=
- Will be added - I wrote an article on how to use this starter to start your blog
This blog starter was inspired by all of these awesome open-sources