A static blog build on top of Notion and Nextjs, deployed on Vercel.
This repo is customized based on craigary/nobelium.
- Write in Notion, publish with Next.js: pages are statically generated and refreshed from Notion every 60 seconds (ISR), so there is no need to redeploy after editing
- A compact post list grouped by year, with search and tag filter
- Profile section, dark mode, RSS (
/feed), sitemap and Open Graph images - Previous / next post links at the end of each post, also on the ← / → keys (Esc goes home)
- A reading progress bar on posts
- A 🎲 button next to search that opens a random post from the current list
- Interface in English, Chinese (Simplified / Traditional), Japanese and Spanish
- Configured from a single file,
blog.config.js
- Duplicate this Notion template into your workspace
- Create an internal integration at notion.so/profile/integrations and copy its secret
- Open the database page, choose ⋯ → Connections, and add the integration so it can read the database
- Fork this repository
- Edit
blog.config.js(title, author, language, colors, which parts of a post to show, ...) - Deploy on Vercel with these environment variables:
NOTION_TOKEN: the integration secret from step 2NOTION_PAGE_ID: the database ID, the 32 characters after your workspace name in its URL
- For CI, add the same
NOTION_TOKENas a GitHub Actions secret
The database needs the properties title, slug, type (Post or Page), status (Published to publish), date, tags, summary and outer_link; the template already has them.
Where is the page ID?
- Tags: set a display name and emoji per tag in
tagsofblog.config.js. Tags not listed there are shown by their name as-is - Profile: add a page with the slug
profile(or setprofileSlug). It is shown above the post list, and its first image gets an animated frame /link: redirects toexternalLink- Analytics: set
gaMeasurementIdto enable Google Analytics in production - Icons: replace
favicon.svgandapple-touch-icon.pnginpublic/
Each page gets an Open Graph image drawn by og-image, a small service on Vercel. lib/getOGImageURL.ts builds its URL from the page title and blog.config.js:
ogImageGenerateURL: the service. The default,https://simple-og-image.vercel.app, is free to use; deploy your own from the og-image repository to change the designdarkBackgroundandlightBackground: the card's background and text colorstitle: shown as the site title, except on the home pageogImageLogo: anhttpsimage next to the site title, such ashttps://github.com/<you>.png. Leave it empty for none- Posts also show their date, formatted for
lang
For example, a post's image:
https://simple-og-image.vercel.app/Hello%20world.png?background=%23040808&foreground=%23ffffff&siteTitle=yokinist.me&date=Oct+15%2C+2026
The service takes more parameters, such as layout, accent and description; see its README. Images are cached for a year, so an image changes only when its URL does.
Requires Node.js 20.9 or later (CI uses 24) and Yarn 1.
yarn install
yarn dev # http://localhost:8080Copy .env.example to .env.local and fill in NOTION_TOKEN and NOTION_PAGE_ID (or run vercel env pull). .env.local is ignored by git, so the token stays on your machine.
| Command | What it does |
|---|---|
yarn lint |
Biome (lint and format check) |
yarn tsc |
Type check |
yarn test |
Unit tests (node --test) |
yarn build |
Production build |
CI runs all of these on every push to template and main.
- Next.js 16 (App Router, ISR) and React 19
- The official Notion API (
@notionhq/client) through notion-kit (docs):@yokinist/notion-fetchfetches the database and pages within Notion's rate limit@yokinist/notion-rscrenders blocks with server components, with code highlighted by Shiki, math by KaTeX and posts on X by react-tweet
- Spotify, SoundCloud, YouTube and Instagram players load only when played, so visitors get no third-party cookies until then
- Files uploaded to Notion are served through
/api/notion/file/[id](notion-fetch'screateFileHandler), which redirects to a fresh signed URL (they expire after an hour), so no image optimization quota is used - Tailwind CSS 4
- TypeScript and Biome
Craig Hart |
Notion CN Community |
SilentDepth |
Lee Robinson |
Spencer Woo |
The MIT License.