为了用 notion 写博客，我造了一个轮子🌈

从今年 1 月份开始造轮子，经过断断续续几个月的改进，现在感觉可以拿出来玩了。

概要

Notion 表作数据源（文章，友链等），看以把 notion 表格看成云端数据库。
构建流程：Gatsby build > 从 notion "数据库" 获取数据 > 转化为 GraphQL 结构化数据 > React 获取数据 > 静态化渲染 > 静态博客内容
动态内容实现，通过 netlify 的 lambda function 请求 notion 接口获取数据（ notion api 跨域限制，只好曲线救国😂）
添加了一些个性化的接口，展示实时数据（正在听的音乐，正在玩的游戏）
使用流程：在 notion 上写文章 > 触发 netlify 的 build hook （此处应有发射按钮）> 博客更新

效果： https://gine.me/page/1

github： https://github.com/mayneyao/gine-blog

挖坑详情： https://gine.me/posts/54fc4aaa38434d92afddf5d4b75b76b0

使用文档： https://gine.me/posts/a788c3e6713e4166a4a8c72a7977b457

用到的技术栈：React + Gatsby + GraphQL + Material-UI

用到的服务：Notion + Netlify + Github

全是第三方服务，代码甚至不用走本地，没啥使用负担。用到的服务都提供 API，数据均可导出。至此为止似乎圆满了，终于可以好好写博客了😂（ flag+1 ）

xmsz

2019-06-23 18:43:08 +08:00

还是有点太绕了，相当于还是（模拟）抓取数据 => 处理数据结构 => 自己渲染。和 github 上现有的实现一样，这三个环节都很占用时间。
现在的方法里，最懒的方式就是直接导出 Html （ Notion 已经支持，同时还支持子页面），所以只有 hook 一下去导出 =》解压 =》就行
但，这也有点操作成本

mayne95

2019-06-23 21:40:03 +08:00

@xmsz

并不是三个环节都占用时间

1. 文章的结构化数据，是通过 notion 的 api 获取的。表格 > json，这里就是一个请求的事情。
2. 文章的主体内容是通过 puppeteer 抓取的，这里是最耗时的部分，所以加了缓存机制。因为已经发布的文章更新频率很低，将 puppeteer 抓取的 html 和更新时间放在 github 的仓库中。如果下次更新时，这篇文章没有变动，就会自动从 github 获取文章主体内容，这样可以提高 build 速度。
3. 渲染部分。得益于 gatsby 的优化，这部分花费的时间很少。

目前 30 篇文章，build 时长在 2 分钟左右。下面是某次 build 中的部分 log

3:51:27 AM: Build ready to start
3:52:03 AM: >>>开始同步文章:gine-blog 使用文档 from notion
3:52:16 AM: >>>gine-blog 使用文档更新到 github 成功
3:52:22 AM: success source and transform nodes — 24.565 s
3:52:58 AM: Site is live

完整的 log 可以在这里查看： https://app.netlify.com/sites/gine/deploys/5d054c3e0c5086000810d51b

通过 puppeteer 抓取新文章内容，1 篇 /15s
从 github 缓存中获取的文章，是 4 篇 /1s

即使是高产似母猪地每个月更新 4 篇文章，坚持写 10 年 blog。在后续新增文章的 build 中，获取文章内容部分的耗时约为: 4*12*10/4 + 15 = 125s。总共的 build 时间约为 5 分钟。

按照我目前的构思，支撑起前期写 blog 的工作因该没什么问题。最开始也尝试了导出 markdown，build 再推送的做法。无奈这些都不符合我的使用需求。我想的是尽可能自动化的完成这些操作，现在的实现基本符合我的需求。

文档和帖子都没说清楚，这里详细解释以下。也欢迎大家交流实现思路。