Notion 部署你的个人博客
date
Aug 2, 2024
slug
example-017
status
Published
tags
notion
blog
summary
基于 Notion 和 Nextjs 构建的静态博客,部署在Vercel上。
type
Post
网址
category
URL
害怕哪天官方说明无法访问了,特此备份一份在本地
官方部署说明
截屏
亮点✨
🚀 快速响应
- 快速页面渲染和响应式设计
- 使用高效的编译器进行快速静态生成
🤖 立即部署
- 几分钟内在 Vercel 上部署
- 增量再生,更新 Notion 中的内容后无需重新部署
🚙 功能齐全
- 评论、全宽页面、快速搜索和标签过滤器
- RSS、分析、网络重要信息……等等
🎨易于定制
- 丰富的配置选项,支持中英文界面
- 采用 Tailwind CSS 构建,易于定制
🕸 漂亮的 URL 和 SEO 友好
快速入门
- 为该仓库加注 😉
- 复制此 Notion 模板,并分享给公众
- 分叉此项目
- 定制
blog.config.js
- (可选)将文件夹中的’
avatar.svg’、‘favicon.svg’替换成自己的favicon.ico/public
- 在Vercel上部署,设置以下环境变量:
NOTION_PAGE_ID
(必填):你之前分享到网络上的 Notion 页面的 ID,通常在你的工作区地址后有 32 位数字NOTION_ACCESS_TOKEN
(可选):如果您决定不共享数据库,则可以使用令牌让 Nobelium 从 Notion 数据库抓取数据。您可以在名为 的浏览器 cookie 中找到它‘token_v2
’
。请记住,概念令牌仅有效期 180 天,请确保在 vercel 仪表板中手动更新,我们可能会在将来切换到官方 API 来解决此问题。
- 就是这么简单!是不是非常简单?
技术细节
- 生成:Next.js 和增量静态再生
- 页面渲染:react-notion-x
- 样式:Tailwind CSS 和@tailwindcss/jit编译器
- 评论:Gitalk 和更多即将推出
执照
MIT 许可证。
下面是网友自己编写的使用步骤,可以结合着看