Notion+next.js+Vercel部署个人博客

前言

本人自从被安利Notion以后就开始使用Notion作为自己的知识管理工具。在此基础上，我想将部分内容作为个人博客的一部分对外共享。所以，我找了好几个~~解决方案~~（好看的主题），主要有两种方案我觉得比较适合迁移：

Hexo + NotionDown (Notion → Markdown)：Hexo的主题比较丰富，开发者比较多；缺点是现有的工具并不能完全意义上将Notion导出为Markdown。NotionDown工具是比较符合我们这一套pipeline的，专注于Notion写作，使用脚本将其导出为Markdown和Hexo的后端源文件。可以放在之后进行

Notion + Next.js + Vercel：可以使用原生的Notion页面作为数据源，nextjs-notion-starter-kit工具可以将Notion页面转化为blog的形式，再基于Vercel进行自动部署。缺点是定义空间小。本博客使用的是这种方式。

基础的配置

Fork项目，然后修改site.config.ts这个文件，具体如下


import { siteConfig } from './lib/site-config'

export default siteConfig({
  // 主页面
  rootNotionPageId: '83f0ed6205334fe79b32777c6b9af6d8',
  // if you want to restrict pages to a single notion workspace (optional)
  // (this should be a Notion ID; see the docs for how to extract this)
  rootNotionSpaceId: null,

  // 页面的基本信息和链接
  name: 'Ethan\'s home',
  domain: 'https://www.notion.so/ethan-lyu/Ethan-s-Page-83f0ed6205334fe79b32777c6b9af6d8',
  author: 'Ethan Lyu',

  // open graph metadata (optional)
  description: 'Example Next.js Notion Starter Kit Site',

  // 社交媒体账号
  twitter: '',
  github: 'fantasyEthan',
  linkedin: '',
  // newsletter: '#', // optional newsletter URL
  // youtube: '#', // optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX`

  // default notion icon and cover images for site-wide consistency (optional)
  // page-specific values will override these site-wide defaults
  defaultPageIcon: null,
  defaultPageCover: null,
  defaultPageCoverPosition: 0.5,

  // whether or not to enable support for LQIP preview images (optional)
	// 会调用google analysis所以就关了吧
	isPreviewImageSupportEnabled: false,

  // whether or not redis is enabled for caching generated preview images (optional)
  // NOTE: if you enable redis, you need to set the `REDIS_HOST` and `REDIS_PASSWORD`
  // environment variables. see the readme for more info
  isRedisEnabled: false,

  // map of notion page IDs to URL paths (optional)
  // any pages defined here will override their default URL paths
  // example:
  //
  // pageUrlOverrides: {
  //   '/foo': '067dd719a912471ea9a3ac10710e7fdf',
  //   '/bar': '0be6efce9daf42688f65c76b89f8eb27'
  // }
  pageUrlOverrides: null,

  // whether to use the default notion navigation style or a custom one with links to
  // important pages
//   navigationStyle: 'default'
	//定义导航栏
  navigationStyle: 'custom',
  navigationLinks: [
    {
      title: 'About',
      pageId: '8b7a770329f1413b8a5b3a3d9d0bfff4'
    },
    {
      title: '技术Tech',
      pageId: '03dab9e894ca4dc5978c06ac45dac7f8'
    },
    {
      title: '生活Life',
      pageId: '82aaec894cdc47dcaecd44a886178817'
    },
    {
      title: '算法刷题',
      pageId: 'fbda448de99c46f49373ad2190165055'
    }
  ]
})

使用Vercel进行部署，这里没什么要注意的

绑定已有的域名

TODO： CDN加速

部署过程中出现的问题

root页面需要是public页面（包括里面包含的workspace），具体的设置方法是点击share，会默认开放view权限

首页并不需要像模板里那样用数据库展示，我倾向于放在上面的导航栏中

Notion服务器不在境内，同步速度可能比较慢