type
status
date
slug
summary
tags
category
icon
password
动机
之前的 blog 方案一直是使用 Gridea 生成静态页面搭配 Vercel 托管。Gridea 是一个很棒的工具，但作者已经很长时间没有更新了
另一方面，在写作的过程中还是感到 Markdown 的表达能力不足，很多时间都要靠插入 HTML 或使用外挂的插件才能实现预期排版or样式。
最简单的例子就是空行，Markdown 是会忽略多行空行的，而现代电子设备屏幕上的文字排版非常依赖空行来做分段（相对应纸质时代是采用首行缩进的方式），但在 Markdown 中却还要通过
<br/> 手动空行有时还想有个单独的页面记录自己的旅行地图或摄影作品，显然这些要在基于 Markdown 的方案中实现都十分困难，就连图片管理都不方便
是时候摆脱 Markdown 的束缚了
还有一个原因是，我在个人的记录、信息整理中都重度使用了 Notion，保守估计在其中存放了上千个页面。与此同时，blog 却需要使用一个单独的工具来进行写作和管理，这也让我感到麻烦，很大程度上影响了写作的欲望（终于找到不更新的理由了
Notion-based blog
Notion 有很强的表达能力，block 和 database 的设计都是很大的创新，这些设计和功能被各种云文档和笔记软件抄了一遍又一遍，足以见其影响
现在又集成了 LLM，对写作更方便了。所以很早之前我就想，能否将 blog 也搬到让 Notion 上，让 all in one 更加彻底呢？
不过 Notion 并不是一个建站工具，虽然有提供公开页面的站点功能，但充其量也只是公开页面/文章，离站点还差了点味道，只能说勉强能用，绑定自定义域名还需要额外 10 刀一个月
而且要进行比较好的管理，就肯定得用 Notion 的 database，这时候如果直接使用站点功能，用户进来看到的就是一个表格，这很奇怪（虽然有其他view，但那些玩意没好到哪去，说到底是 database 目的是管理数据而不是展示数据)
如果将 Notion & Database 的组合在这里看作一个 Backend/Database as a Service，提供的是数据，那么还缺的就是面向最终用户的前端页面，这就是 Notion-based 建站方案需要解决的问题
后来也考虑过基于 这个 Notion block 的渲染库自己实现，不过这只是个渲染库，离搭出一个能用的产品还差了很多上层功能，加上我实在不想写太多前端代码，只能作罢
react-notion-x
NotionX • Updated Oct 6, 2024
直到最近偶然刷到了 ，在功能上基本满足了我的想象，可以自托管，也能直接生成静态页面，是开箱即用的。并且 MIT license 开源意味着可以自由定制修改甚至商业化（或许未来可以整个自己的 Notion 建站 SaaS 产品），不需要额外成本（除了折腾的时间），于是决定这次将 blog 迁移过来
NotionNext
tangly1024 • Updated Oct 6, 2024
实施
虽然 NotionNext 在功能性上满足我的要求，但还要进行一些小调整（例如去掉一些审美堪忧才会喜欢的花里胡哨鼠标特效，和有了 tag 却还要存在的意义不明的 category，以及乱加的与 Notion 相悖的样式），同时移植原先 blog 的主题 到 NotionNext 上
gridea-theme-autumn
xxxuuu • Updated Aug 9, 2024
我 fork 了 NotionNext，花了一个周末来完成这些修改和移植（还是写了不少前端代码 真痛苦
NotionNext 改造完成后，还得把原先的文章搬到 Notion 中，Notion 能直接导入 Markdown，但有些样式（特别是代码块）会有奇怪的换行问题。所以最后还是手动 copy 并调整的，好在文章数量不多。在这个过程中看到自己以前写的东西，稍微有些感叹，原来当时那么弱智青涩，不过这就是记录的意义吧
NotionNext 可以直接作为服务端运行，但我不想维护一个额外的服务器。Vercel 之类的服务对这种有动态 API 和网络请求的 project 也有严格的资源限制
所以计划和之前一样生成静态页面推送到仓库，仓库更新就会触发 Vercel 部署。这样还能复用原来的仓库 和 Vercel project
xxxuuu.github.io
xxxuuu • Updated Sep 25, 2024
不过这样还需要解决的一个问题是，站点无法动态更新。每次编辑完后要重新生成一下静态页面。在之前 Gridea 中点击一下发布就会自动完成这些操作，在 NotionNext 中就得执行
yarn export 再 git push，显然有些麻烦。于是我将这个操作丢到了 Github Action 中，定时或手动 run 一下就行
其实也可以直接为 NotionNext 仓库创建一个新的 Vercel project，设置 build command 为
yarn export。每次更新在 Vercel 中 redeploy 就可以了，但我绕一圈的目的主要是想将 NotionNext 的仓库和最终成品的静态页面仓库分离开来最终效果：
现在 blog 所有的编辑和管理都可以在 Notion 中完成
样式测试
测试 Notion 各种元素能否正常显示，源自 react-notion-x test suite，与正文无关
Text
All kinds of text styling options are supported. Basic rich text formatting options.
text blocks are akin to HTML <p> tags. Text blocks also support a variety of gray brown orange yellow green blue purple pink red
gray bg
brown bg
orange bg
yellow bg
green bg
blue bg
purple bg
pink bg
red bg
Image
Quote
This is an example quote.
Callout
This is a basic callout. It can contain blocks and rich text. 💪
Divider
Linked Block
The following block is linked to the content of a global footer block.
Lists
- Bulleted lists are supported
- Second Items
- Nested 1
- Nested 2
- Back at top level
- Child 1
- Child 2
- First Item
- Second
- Third
- First Nest
- Second Nest
- Deeply nested
- Third Nest
- Last
Pretty URLs
Custom domains
Google Fonts
Page title/description for SEO
Custom scripts
A setup wizard to customize the script (instead of having to change the raw code)
Stop random pages from showing up under custom domain
Hide the What's New banner
Normal Toggle
Content inside here.
Code Blocks
basic code
mermaid
Links
bookmark
没有特殊处理的普通站点的 mention 会显示异常，比如 https://google.com
mention：
- ‣
Inline styled text and more after
react-notion-x
NotionX • Updated Aug 27, 2024
block
react-notion-x
NotionX • Updated Aug 15, 2024
Tables
1 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
Column Layouts
one
two
three
four
five
Equations
Block
Inline
This is an example of an inline equation:
You can also add formatting:
Databases
Test
Embed
PDF
YouTube
twitter
Spotify Playlist
Google Maps