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.co

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

✨ Live Demo

• 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

✨ Features

• ✅ 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

🛠 Tech stack

• Framework: Next.js, Typescript
• Styling: Tailwind CSS
• Content: Notion API worker
• Notion rendering: React-notion
• Newsletter: Convertkit
• Deployment: Vercel

📕 Project Overview

• 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.

🏃‍♂️ Running Locally

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.

🚀 Deploy to vercel

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=

💁‍♀️ How to use

• Will be added - 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