Created: December 26, 2021 3:36 PM Description: 使用 Next.js 配合 Notion 建立博客的流程介绍. Public: Yes Published: December 26, 2021 Tags: Github, Next.js, Node.js, Notion

最近想整一个个人主页玩玩, 可是平时时间紧张, 所以需要一个建立之后, 可以快速编写博文或直接从我的笔记转换为博文, 并且需要能够快速简单的上传方式.

目前, 本人使用的笔记工具正是Notion, 并且有personal pro可以无限制上传文件. 于是使用Notion建站的话, 图床之类的问题也一并解决了(Github Pages显示1G的存贮, 长期写博文的话需要图床的支持). 另外, Notion的建站有两种方式, 本次介绍的方式和需要购买独立域名并且配合Cloudflare DNS重定位服务的方式. 后者需要购买独立域名(可能还需要备案), 并且部分域名可能需要修改DNS才能被Cloudflare识别, 试了两天还是放弃了. 本次介绍的方式无需考虑费用问题且建站调试也更快一些.

• 本文面向
• 对计算机和前端有一定知识同学.
• 不过其实只用Notion建站也够了, 就是样式简陋点, 但是好歹没有bug. 🤣

• Notion: 笔记与写作工具. 由于是基于web开发, 所以在各平台都可以无缝切换. 购买Personal Pro 或使用学生邮箱可以不受限制的上传文件, 不过免费版也够用.
  • Notion入门一些时间成本, 另外需要一些Markdown知识.
• Vercel: 免费的网站托管服务. 网页更新速度比 Github Pages 更快.
• nextjs-notion-starter-kit: 使用Vercel和Next.js服务建站的项目.
  • 缺点: 建站和调试需要一些前端知识.
  • 优点: 建站和调试结束之后, 就可以使用Notion直接更新文章. 与Github Pages相比更加方便, 不过相对的, 能使用的模板也更少一些.
• Node.js: 使用和调试上述项目的基础工具.

• 下载
  • 下载nextjs-notion-starter-kit项目的压缩包.
    • 原作者制作的主页: https://transitivebullsh.it/.
    • 如果需要本站的样式, 可以使用这个连接下载这个压缩包.
  • 下载 Node.js.
• 注册
  • 注册 Notion, Vercel, Github.

1. 在本地安装Node.js, 一路默认设置点确定即可.
2. 解压nextjs-notion-starter-kit项目的压缩包.
3. 打开终端. 进入项目的根目录. 配置项目.

# 安装npm, 如果报错的话使用: npm i --legacy-peer-deps
npm install 

# 安装vercel服务
npm i -g vercel

# 上传一次项目, 初次上传时需要选择进行一些配置, 
# 中途需要将vercel和github连接一次, 其他情况一路回车就行.
npm run deploy

• 首先打开Notion, 新建一篇笔记作为自己的站点首页, 在右上角点击Share 将这一页设为公开. 按自己的需求可以允许被他人吐槽, 被搜索引擎发现或被人复制网站所有内容等功能.

• 查看当前页面的URL(不是Share里的URL, 是浏览器里的URL)

# URL例子:
https://www.notion.so/travis-fischer/TransitiveBullsh-it-78fc5a4b88d74b0e824e29407e9f1ec1
# 则需要记下后面的编号, 这个编号是之后需要的rootNotionPageId
78fc5a4b88d74b0e824e29407e9f1ec1

• 回到本地, 打开项目中的site.config.js.

  // 修改为自己的rootNotionPageId
  rootNotionPageId: '78fc5a4b88d74b0e824e29407e9f1ec1'

  // 以下按需修改############################################################
  // basic site info (required)
  name: 'Homepage',
  domain: 'sun',
  author: 'sun',

  // open graph metadata (optional)
  description: 'Example site description',
  socialImageTitle: 'sun',
  socialImageSubtitle: 'Hello World!',
  // 以上按需修改############################################################

  // social usernames (optional) 只填自己需要的, 填用户名. 
  // 这几个不留空的话, 会以图标的形式显示在页面的右侧.
  twitter: '',
  github: '',
  linkedin: '',

• 启动网页本地调试模式

  • 终端进入项目文件夹路径, 使用以下命令进入调试, 打开网址 http://localhost:3000, 显示调试页面.

  npm run dev

• 处理网页右上角的Github项目标志

  目前点击这个图标会进入, 项目原作者的Github项目.

• 各种网站的图标可以在public文件夹中替换修改.
• 进阶: 调式主页的页面样式
  • 在项目中打开styles/notion.css, 可以进行各种参数设置.
  • 一般样式都在styles和components这两个文件夹里.

• 建立一个表格, 将Name, Description, Public, Published, Tags建立好 (或者直接复制原项目作者的Notion主页里的表格).
• 在表格中新建一行, 然后在Name列点击Open打开新的一页, 开始写文章.
• 点击Public即可公布想要公布的文章.

• Vercel进入设置界面, 在Domains添加私有域名.

• 编辑下方之前自动生成的域名, 选择刚添加的私有域名即可.

• 调试的时候出现以下警告:

(node:5656) [DEP0128] DeprecationWarning: Invalid 'main' field in 'D:\code_project\nextjs-notion-starter-kit\node_modules\react-icons\package.json' of 'lib'. Please either fix that or report it to the module author
(Use `node --trace-deprecation ...` to show where the warning was created)

解决方法: 打开node_modules/react-icons/lib/package.json. 删除并替换代码. (原代码不能注释, 一定要删除.)

// 原本的代码
  "main": "lib",

// 替换为
  "main": "./lib/cjs/index.js",
  "module": "./lib/esm/index.js",
  "exports": {
    ".": {
      "require": "./lib/cjs/index.js",
      "default": "./lib/esm/index.js"
    }
  },

• 使用网页搜索功能时卡住不出结果
  • 原因: 没有修改site.config.js中的domain参数
  • 解决方法: 需要将domain参数改为自己的网站网址.