Notion建站之nextjs-notion-starter-kit

nextjs-notion-starter-kit是什么

GitHub - transitive-bullshit/nextjs-notion-starter-kit: Deploy your own Notion-powered website in minutes with Next.js and Vercel.

The perfect starter kit for building websites with Next.js and Notion. This repo is what I use to power my personal blog / portfolio site transitivebullsh.it. It uses Notion as a CMS, fetching content from Notion and then uses Next.js and react-notion-x to render everything. The site is then deployed to Vercel.

https://github.com/transitive-bullshit/nextjs-notion-starter-kit

演示地址

Next.js Notion Starter Kit

Deploy your own Notion-powered website in minutes with Next.js and Vercel.

https://transitivebullsh.it/nextjs-notion-starter-kit

优点

• 内容为Notion页面，不需要懂代码既可以布置版式

• 使用reaction-notion-x库渲染Notion笔记的元素样式，与Notion软件中的样式基本一致

• 支持侧边Table Contents文章目录

• 支持Collection、Database等复杂Block的展示

• 支持手动白天黑夜模式

• 支持调用NotionAPI搜索文章

准备工作

1、Github 上fork项目

2、在Notion中创建笔记

配置文件

基础配置

• notion页面ID（必需）
• rootNotionPageId 对应上面分享的notion笔记的Share to web后面那一串ID

• 网站基本信息（必需）
• name 对应网站名
• domain 对应网站域名
• author 对应网站站长名

• 网站描述（可选）
• description 对应站点描述
• socialImageTitle
• socialImageSubtitle

• 社交账号信息（可选）如果不需要展示社交信息可以注释掉
• twitter
• github
• linkedin

进阶配置

关于搜索

更换网站图标

修改右上角跳转指向

href='https://github.com/transitive-bullshit/nextjs-notion-starter-kit'

将页面限制为单个Notion工作区

解决因缓存设置导致新页面指向404的问题

import pMemoize from 'p-memoize'
import { getAllPagesInSpace, uuidToId } from 'notion-utils'

import { includeNotionIdInUrls } from './config'
import { notion } from './notion-api'
import { getCanonicalPageId } from './get-canonical-page-id'
import * as config from './config'
import * as types from './types'
import ExpiryMap from 'expiry-map'

const uuid = !!includeNotionIdInUrls
const cache = new ExpiryMap(10000)

export async function getSiteMap(): Promise<types.SiteMap> {
  const partialSiteMap = await getAllPages(
    config.rootNotionPageId,
    config.rootNotionSpaceId
  )

  return {
    site: config.site,
    ...partialSiteMap
  } as types.SiteMap
}

const getAllPages = pMemoize(getAllPagesImpl, {
  cacheKey: (...args) => JSON.stringify(args),
  cache
})

async function getAllPagesImpl(
  rootNotionPageId: string,
  rootNotionSpaceId: string
): Promise<Partial<types.SiteMap>> {
  const getPage = async (pageId: string, ...args) => {
    console.log('\nnotion getPage', uuidToId(pageId))
    return notion.getPage(pageId, ...args)
  }

  const pageMap = await getAllPagesInSpace(
    rootNotionPageId,
    rootNotionSpaceId,
    getPage
  )

  const canonicalPageMap = Object.keys(pageMap).reduce(
    (map, pageId: string) => {
      const recordMap = pageMap[pageId]
      if (!recordMap) {
        throw new Error(`Error loading page "${pageId}"`)
      }

      const canonicalPageId = getCanonicalPageId(pageId, recordMap, {
        uuid
      })

      if (map[canonicalPageId]) {
        // you can have multiple pages in different collections that have the same id
        // TODO: we may want to error if neither entry is a collection page
        console.warn('error duplicate canonical page id', {
          canonicalPageId,
          pageId,
          existingPageId: map[canonicalPageId]
        })

        return map
      } else {
        return {
          ...map,
          [canonicalPageId]: pageId
        }
      }
    },
    {}
  )

  return {
    pageMap,
    canonicalPageMap
  }
}

增加备案信息

import * as types from './types'

export interface SiteConfig {
  rootNotionPageId: string
  rootNotionSpaceId?: string

  name: string
  domain: string
  author: string
  description?: string
  language?: string
  beian?: string

// basic site info (required)
name: 'Transitive Bullshit',
domain: 'transitivebullsh.it',
author: 'Travis Fischer',
beian: '浙ICP备2021******号',

// general site config
export const name: string = getSiteConfig('name')
export const author: string = getSiteConfig('author')
export const domain: string = getSiteConfig('domain')
export const description: string = getSiteConfig('description', 'Notion Blog')
export const beian: string = getSiteConfig('beian')

import * as React from 'react'

import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'

import * as config from '@/lib/config'
import { useDarkMode } from '@/lib/use-dark-mode'

import styles from './styles.module.css'

// TODO: merge the data and icons from PageSocial with the social links in Footer

export const FooterImpl: React.FC = () => {
  const [hasMounted, setHasMounted] = React.useState(false)
  const { isDarkMode, toggleDarkMode } = useDarkMode()

  const onToggleDarkMode = React.useCallback(
    (e) => {
      e.preventDefault()
      toggleDarkMode()
    },
    [toggleDarkMode]
  )

  React.useEffect(() => {
    setHasMounted(true)
  }, [])

  return (
    <footer className={styles.footer}>
      <div className={styles.copyright}>Copyright 2022 {config.author}</div>

      <div className={styles.settings}>
        {hasMounted && (
          <a
            className={styles.toggleDarkMode}
            href='#'
            role='button'
            onClick={onToggleDarkMode}
            title='Toggle dark mode'
          >
            {isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
          </a>
        )}
      </div>

      <div className={styles.copyright}>
        <a
          href={`https://beian.miit.gov.cn/`}
          target='noreferrer noopener' 
        >
          <div>{config.beian}</div> 
        </a>
      </div>
    </footer> 
  )
}

export const Footer = React.memo(FooterImpl)

简化命令

	"deploy": "vercel --prod",
  "restart": "next build && pm2 restart notion", ## 新增命令
  "deps": "run-s deps:*",

更新依赖

    "notion-client": "^4.14.1",
    "notion-types": "^4.14.1",
    "notion-utils": "^4.14.1",
    "react-notion-x": "^4.14.2",

代码块偶尔不渲染的问题

const Code = dynamic(() =>
  import('react-notion-x/build/third-party/code').then(async (m) => {
    // add / remove any prism syntaxes here
    await Promise.allSettled([
      import('prismjs/components/prism-markup-templating.js'),
      import('prismjs/components/prism-markup.js'),
      import('prismjs/components/prism-bash.js'),

部署方式

一、vercel部署

1、创建项目

2、添加域名

二、服务器部署

安装Git

安装Nodejs环境

• npm

• pm2

• yarn

• eslint

拉取项目

git clone https://github.com/yunzhongci/notion

git init

git pull git@github.com:*****/notion.git

安装依赖

npm -v

yarn -v

npm install npm@latest -g

sudo npm install npm@latest -g

yarn install

yarn build

yarn start

[root@centos notion]# yarn start
yarn run v1.22.17
$ next start
ready - started server on 0.0.0.0:3000, url: http://localhost:3000

使用PM2管理进程持久化

yarn install -g pm2

pm2 start npm --name notion -- run start # --name 后面可以修改为你喜欢的名字

pm2 logs notion

pm2 l

nginx reload notion

更新服务

## 更新项目代码
git pull

## 重新启动进程
pm2 start npm --name "notion" -- start

反向代理到域名

其他Linux服务器

Nginx反向代理

apt install nginx -y

server {
      listen 80;
      listen [::]:80;
      server_name yourdomain.com;
      server_name www.yourdomain.com;

      listen 443 ssl http2;
      listen [::]:443 ssl http2;
      ssl_certificate /etc/nginx/ssl/youdomian.com/fullchain.pem;
      ssl_certificate_key /etc/nginx/ssl/youdomian.com/key.pem;
      ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
	    ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
	    ssl_prefer_server_ciphers on;
	    ssl_session_cache shared:SSL:10m;
	    ssl_session_timeout 10m;

    location / {
	    proxy_pass http://127.0.0.1:3000;
		  proxy_set_header Host $host;
	    proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	    proxy_set_header REMOTE-HOST $remote_addr;
    }

nginx -t

nginx -s reload

指令说明

更新依赖

npm install <package-name>@latest --save

npm install notion-client@latest --save
npm install notion-types@latest --save
npm install notion-utils@latest --save
npm install react-notion-x@latest --save

yarn add notion-client
yarn add notion-types
yarn add notion-utils
yarn add react-notion-x

参考