Notion Blog Project

• ✏️ Write your posts using Notion
• ⚙️ Easily configure site
• 🎨 Easily customize theme (with vanilla-extract)
• 📊 Google Analytics Support
• 🤖 Sentry Support

🚀 Getting Started

Fork this repository and clone on your workspace.

Copy this Notion template

Input your NOTION_BLOG_PAGE_ID and NOTION_VIEW_ID

Add your env values in Vercel Environment Variables

If you need sentry debugging, add your sentry configure in environment

• SENTRY_ORG
• SENTRY_PROJECT
• SENTRY_AUTH_TOKEN
• SENTRY_DSN

Sentry.init() will not proceed unless you add all four Sentry settings.

Deploy your repository on Vercel!

💻 Development

cp .env.example .env

if you try develop this project, copy .env.example to .env and

yarn && yarn dev
# or
npm install && npm dev

🎨 Customize

import type { Config } from "@/types";

const CONFIG: Config = {
  // Profile
  profile: {
    // 댓글 기능을 위한 레포명, 입력하지 않으면 댓글 기능이 비활성화됩니다.
    repo: "im-ian/notion-blog",
    // 페이지 상단 Github 아이콘 링크
    github: "https://github.com/im-ian",
  },
  // ...
}

you can customize below information on site.config.ts

• github profile
• notion
• metadata(SEO)
• site
  • title
  • cache revaliate time
  • google analytics
• sentry

export const vars = createGlobalTheme(":root", {
  // ...
  color: {
    white: "#fff",
    black: "#333",
    darkgray: "#2f3437",

    "gray-50": "#f9fafb",
    "gray-100": "#f3f4f6",
    "gray-200": "#e5e7eb",
    "gray-300": "#d1d5db",
    "gray-400": "#9ca3af",
    "gray-500": "#6b7280",
    "gray-600": "#4b5563",
    "gray-700": "#374151",
    // ...
  }
});

If you want to edit color or size, edit file sprinkles.css.ts or vars.css.ts