关联主题::
同级:: 2025-08-19_星期二
下一级::
NotionBlog
成品： www.brmys.ac.cn
一、介绍
本博客由Notion作为网站后台来搭建，配合Next.js和react-Notion-x去渲染网页，最后博客部属在Vercel上。
二、博客搭建流程
2.1 保存Notion模板到自己的Notion账号
模板地址： https://transitive-bs.notion.site/transitive-bs/TransitiveBullsh-it-78fc5a4b88d74b0e824e29407e9f1ec1 点击右上角「Duplicate」将其保存进Notion
2.2 访问Github复刻代码到自己的库
github地址：https://github.com/zhimiaoli/nextjs-notion-blog 进入后，点击右上角的「fork」
2.3修改代码中的参数地址
1、进入Notion找到刚刚复制的模板 点击右上角的「Share」，然后点击「Share to web」，建议只开启「Allow comments」权限，然后点击「Copy web link」
<https://brmys1.notion.site/TransitiveBullsh-it-82a312922982481bb0f4a3f1c7e41223>
其中82a312922982481bb0f4a3f1c7e41223就是这个页面的ID，对应site.config中的rootNotionRageld。
2、浏览器中打开Notion，定位到刚刚保存的模板页面，然后打开浏览器的开发者工具（快捷键为F12，或者鼠标右键点检查），进入后点击「网络」，选择「Fetch/XHR」，然后刷新该页面，在名称里找到「getPublicPageData」并点击。
3、进入自己的github仓库，找到「nextjs-Notion-blog」进行地址修改 点击「site.config.ts」点击编辑分别修改「rootNotionPageId」和「rootNotionSpaceId」
2.4登录Vercel部属代码
1、登录Vercel： https://vercel.com/
2、点击「Add New Project」
3、然后你会看到「nextjs-Notion-blog」直接点击「Import」部属即可
4、进入后点击「Deploy」等待完成后即可访问
至此一个简单的个人博客就搭建好了，接下来你可以在Notion随意的增删Database或者添加一些好看的小组件，然后进入你的个人博客刷新，看看效果。
NotionNext
一、介绍
成品： www.brmys.top
二、博客搭建流程
2.1 保存Notion模板到自己的Notion账号
模板地址：<https://tanghh.notion.site/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d>
点击右上角的「Share」，然后点击「Share to web」，之后点击「copy」复制页面ID。‘
以链接为例https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d
这里的页面ID就是：02ab3b8678004aa69e9e415905ef32a5
2.2 fork此github项目
github地址：https://github.com/tangly1024/NotionNext
2.3 将Github项目导入Vercel
1、登录Vercel： https://vercel.com/
2、点击「Add New Project」
3、然后你会看到「NotionNext」直接点击「Import」部属即可
4、点击Environment Variables（环境变量），并添加一个属性名称为NOTION_PAGE_ID， 值为步骤一获取到的页面ID
5、添加完环境变量后，点击Deploy按钮，静候两分钟等待部署。
2.4完成
- 在部署完成页面，点击
Go to Dashboard访问控制台
- 在控制台右上角的
Visit按钮访问您的站点。或在DOMAINS中获取您的网站地址
三、博客更新维护
1、自定Notion字段名
1）在github里找到「blog.config.js」
2）点击右上角编辑，然后在下方修改你需要的字段名
可以让你的Notion模板变成中文的表头和中文的下拉框。
// 自定义配置notion数据库字段名
NOTION_PROPERTY_NAME: {
password: process.env.NEXT_PUBLIC_NOTION_PROPERTY_PASSWORD || 'password',
type: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE || 'type', // 文章类型，
type_post: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_POST || 'Post', // 当type文章类型与此值相同时，为博文。
type_page: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_PAGE || 'Page', // 当type文章类型与此值相同时，为单页。
type_notice: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_NOTICE || 'Notice', // 当type文章类型与此值相同时，为公告。
title: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TITLE || 'title', // 文章标题
status: process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS || 'status',
status_publish: process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS_PUBLISH || 'Published', // 当status状态值与此相同时为发布，可以为中文
status_invisible: process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS_INVISIBLE || 'Invisible', // 当status状态值与此相同时为隐藏发布，可以为中文 ， 除此之外其他页面状态不会显示在博客上
summary: process.env.NEXT_PUBLIC_NOTION_PROPERTY_SUMMARY || 'summary',
slug: process.env.NEXT_PUBLIC_NOTION_PROPERTY_SLUG || 'slug',
category: process.env.NEXT_PUBLIC_NOTION_PROPERTY_CATEGORY || 'category',
date: process.env.NEXT_PUBLIC_NOTION_PROPERTY_DATE || 'date',
tags: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TAGS || 'tags',
icon: process.env.NEXT_PUBLIC_NOTION_PROPERTY_ICON || 'icon'
},
参考资料
- NotionNext 说明文档：NotionNext – NotionNext (tangly1024.com)
- NotionNext B站教程：5分钟，0成本，用notion搭建一个自己的博客站，非直接套用模板
- NotionNext操作手册：NotionNext 操作手册 | TANGLY’s BLOG (tangly1024.com)