更好的用Notion搭建自己的博客
发表于:2021-10-20 | 分类: 技术文档

用Notion作为博客站管理的后台数据源,搭配 Next.jsreact-notion-x ,再部署到 Vercel 上,配合绑定自己的域名,就能实现随时随地修改和创作了

如何搭建

Notion 模板

点击下方作者的 Notion 模板复制到自己的空间并设置分享。

https://www.notion.so/senpai-so/TransitiveBullsh-it-78fc5a4b88d74b0e824e29407e9f1ec1

其中上述分享链接的 ‘78fc5a4b88d74b0e824e29407e9f1ec1’ 就是 Notion 页面的唯一地址即 rootNotionPageId 。

notion image

修改配置

打开下面项目地址 fork 到自己仓库,点击 site.config.js 修改配置文件,不需要自己注释掉。

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.GitHub - transitive-bullshit/nextjs-notion-starter-kit: Deploy your own Notion-powered website in minutes with Next.js and Vercel.https://github.com/transitive-bullshit/nextjs-notion-starter-kitGitHub - transitive-bullshit/nextjs-notion-starter-kit: Deploy your own Notion-powered website in minutes with Next.js and Vercel.

配置如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
module.exports = {
// where it all starts -- the site's root Notion page (required)
rootNotionPageId: 'e203782f03e44a948913003b6711a0c2',

// 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,

// basic site info (required)
name: 'Toby Chung',
domain: 'www.tobychung.com',
author: 'Toby Chung',

// open graph metadata (optional)
description: '开着拖拉机奔向春天',
socialImageTitle: 'Toby Chung',
socialImageSubtitle: 'Hello World! 👋',

// social usernames (optional)
twitter: 'tractor_toby',
github: 'tractortoby',
// linkedin: 'fisch2',

替换网页图标

网页图标在 public 文件夹下,利用下方网站上传喜欢的图片生成网页图标并替换。

Favicon Generator for perfect icons on all browsersThe ultimate favicon generator. Design your icons platform per platform and make them look great everywhere. Including in Google results pages.Favicon Generator for perfect icons on all browsershttps://realfavicongenerator.net/Favicon Generator for perfect icons on all browsers

修改右上角链接

右上角 github 地址是作者的项目地址,到 components 文件夹下 GitHubShareButton.tsx 里面第八行 href 改为自己的 github 地址。

部署网站

使用 GitHub 账号登录到 Vercel 上选择 Add GitHub Org Account 导入配置好的项目并部署。

添加评论功能

安装utterances

Build software better, togetherA lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more! Learn more at https://utteranc.es Developer utterances is provided by a third-party and is governed by separate terms of service, privacy policy, and support documentation. Report abuse You can’t perform that action at this time.Build software better, togetherhttps://github.com/apps/utterancesBuild software better, together

notion image

项目是复制别人的没开Issues,到Setting里面开启。

notion image

编辑 site.config.js 中的utterancesGitHubRepo

我的:

1
utterancesGitHubRepo: 'tractortoby/nextjs-notion-starter-kit',

绑定自定义域名

Vercel 上添加域名并把项目地址和二级域名都指向三级域名,以使用 toby.com 为例。

notion image

notion image

到自己买域名的地方设置 A 记录和 CNAME 记录等待生效(我的是namesilo)。

notion image

notion image

Vervel 被墙 V 站帖子解决方案: https://www.vercel-status.com/ 给了解决方案 修改 A 记录,从 76.76.21.21 更改为 76.223.126.88 修改 CNAME,从 cname.vercel-dns.com 更改为 cname-china.vercel-dns.com

Vercel 在大陆访问不稳定,新添加一个 A 记录到 namesilo 。CNAME 就不改了,现在还能用,哪天不能用了再改吧。

notion image

生效以后 Vercel 如下图,其中两个地址都指向 www.tobychung.com 这个地址。

notion image

其中重定向http308毕竟比较新,所以考虑兼容性问题统一使用301

notion image

更新react-notion-x依赖(2021-10-15)

The author has not yet updated the dependencies in package.json, you can update it yourself.

  • update package.json
1
2
3
4
"notion-client": "^4.9.7",
"notion-types": "^4.8.2",
"notion-utils": "^4.8.6",
"react-notion-x": "^4.9.7",

notion image

  • yarn in terminal to update yarn.lock

notion image

去除右上角那个 github 入口:

删除 NotionPage.tsx 最底下的

转载参考:https://www.tobychung.com/notion

下一篇:
一个好看的神仙级导航页面
本文目录
本文目录