Fruitionsite：使用 Notion 搭建属于你的网站

官网

实例

准备

1. 一个公开的 Notion 页面

1. 一个属于自己的域名

1. 已经绑定自己域名的 Cloudflare 账户

优势

1. 使用自己的域名

1. 使用 Pretty Link 来替代繁琐的 pageID

1. 可以设置自己喜欢的字体（基于 Google Fonts ）

1. 自由添加 JavaScript 来启用某些功能（比如使用 Google Analytics 来统计访问量）

1. “几乎“ 0 成本

劣势

1. Notion 页面上的所有工具都会同步启用，在一定程度上减慢了网站的访问速度

步骤

1. 创建 Cloudflare 账号并绑定自己的域名（成功后如下所示）

1. 主页进入 Workers，创建一个 Worker 项目（第一次设置时，需要设置 Workers 域名）

1. 访问此网站，填写必要信息，之后按下 COPY THE CODE。

1. 将代码粘贴至 Worker 项目里，并保存，修改名字为 fruitionsite（也可随意修改）

1. 返回主页，点选 DNS 选项，添加 A 记录（推荐使用 A 记录）随便输入一个 IPv4 地址，并使用 Cloudflare 代理其流量，后保存。

1. 转到 Workers 选项，添加路由，并保存

1. 大功告成。现在你可以使用此域名访问属于你的个人网站。

Super.so：简洁的网页，除了 Notion，其他都不要

官网

实例

准备

1. 一个公开的 Notion 页面

1. 一个属于自己的域名

优势

1. 去除了 Notion 自带的工具/插件，让页面访问速度更快

1. 可以免费尝试使用，之后将以每月 12 美元付费

React-Notion：使用 React 构建的 Notion 的快速渲染器

官网

实例

1. https://splitbee.io/blog

1. https://pstunnel.com/blog

1. https://timo.sh/

准备

1. 一个公开的 Notion 页面

1. 一个属于自己的域名

1. 编程“基础”

优势

1. ⚡️ 快速 - 比 Notion 快 n 倍

1. 🎯 准确

1. 🔮 支持代码高亮 - 使用prismjs

1. 🎨 可自定义样式

1. “几乎” 0 成本

劣势

1. 有一些 Notion Block 并不支持

1. 需要自行搭建 notion-api （可选，可以用由 Splitbee 提供的 API）

步骤

React-Notion-X：又一个使用 React 构建的 Notion 的快速渲染器

官网 & 实例

准备

1. 一个公开的 Notion 页面

1. 一个属于自己的域名

1. 编程“基础”

优势

1. 🚀 简单 - TypeScript + React。

1. ⚡ 快速 - 比 Notion 快 10-100 倍

1. 🔮 支持代码高亮 - 使用prismjs

1. 🎨 可自定义样式

1. “几乎” 0 成本

1. 支持“几乎”全部 Notion Blocks

步骤

Notion Web Clipper（Chrome 插件）

官网

下载

优势

1. 由 Notion 官方推出

1. 支持将当前页面快速保存至 Notion

Notion Enhancer（桌面端插件）

官网

优势 & 介绍

1. Notion + Notion

下载