这是一个创建于 2001 天前的主题，其中的信息可能已经有所发展或是发生改变。
从今年 1 月份开始造轮子，经过断断续续几个月的改进，现在感觉可以拿出来玩了。
概要
- Notion 表作数据源（文章，友链等），看以把 notion 表格看成云端数据库。
- 构建流程：Gatsby build > 从 notion "数据库" 获取数据 > 转化为 GraphQL 结构化数据 > React 获取数据 > 静态化渲染 > 静态博客内容
- 动态内容实现，通过 netlify 的 lambda function 请求 notion 接口获取数据（ notion api 跨域限制，只好曲线救国😂）
- 添加了一些个性化的接口，展示实时数据（正在听的音乐，正在玩的游戏）
- 使用流程： 在 notion 上写文章 > 触发 netlify 的 build hook （此处应有发射按钮）> 博客更新
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 ）
第 1 条附言 · 2019-06-05 07:30:16 +08:00
前天晚上发完贴，熬夜看完 WWDC。清晨突然感觉右边肚子疼腰疼，呕吐几次，疼的翻来覆去受不了。开始以为是受凉了，想裹辈子休息一下，发现怎么躺都不舒服。
查了一下症状，以为是急性阑尾炎。最后疼的受不了开始痉挛，吓死我了。慌忙之下叫了救护车(人生头一次，真他妈的疼）。到医院后走流程，最后查出来是尿道结石导致肾积水。好在不严重，最后医生开了药，叮嘱多喝水多运动。
昨天真是魔幻的一天。从小到大身体都还不错，没啥毛病。仰仗着自己年轻，作践身体。哎，失去了才懂得珍惜，生病了才知道健康的可贵。从今往后要开始养生了（再也不熬夜看发布会了😂
希望 V 友们引以为戒，注意身体健康。
活着真好。
查了一下症状，以为是急性阑尾炎。最后疼的受不了开始痉挛，吓死我了。慌忙之下叫了救护车(人生头一次，真他妈的疼）。到医院后走流程，最后查出来是尿道结石导致肾积水。好在不严重，最后医生开了药，叮嘱多喝水多运动。
昨天真是魔幻的一天。从小到大身体都还不错，没啥毛病。仰仗着自己年轻，作践身体。哎，失去了才懂得珍惜，生病了才知道健康的可贵。从今往后要开始养生了（再也不熬夜看发布会了😂
希望 V 友们引以为戒，注意身体健康。
活着真好。
第 2 条附言 · 2019-06-16 03:11:46 +08:00
懒人版部署步骤
-
访问：https://app.netlify.com/start/deploy?repository=https://github.com/mayneyao/gine-blog 按照提示，一路下一步即可（使用 github 授权登录 netlify）。部署完成后，github 帐号下会多出一个代码仓库。
-
clone 文章表格模板 到自己的 notion 中。
-
在 github 上修改 config.js ，将 blog.url 修改为自己的 notion 表格地址。提交后 netlify 会自动更新（重新构建博客）
完成上述步骤后，博客就搭建起来了。接下来具体的细节优化，可以参考文档操作。
第 3 条附言 · 2019-09-23 16:24:51 +08:00
⚠ 又经过一段时间的折腾，上面的懒人版部署步骤已经不可用。
项目已经重构，部署和配置也变得简单了。详情查看使用文档： https://gine.me/posts/a788c3e6713e4166a4a8c72a7977b457
项目已经重构，部署和配置也变得简单了。详情查看使用文档： https://gine.me/posts/a788c3e6713e4166a4a8c72a7977b457
 |
1
nosky 2019-06-03 22:48:10 +08:00 via Android  1
用 notion 做数据源真的是不错的想法，👍👍👍
|
 |
3
creedowl 2019-06-03 23:01:17 +08:00 via Android
notion 对 md 支持奇奇怪怪的一直劝退。。
|
 |
4
mayne95 OP @creedowl 可能 notion 觉得自家的 block 比 md 更厉害，不屑于兼容 md。到现在 md 导出都是怪怪的，gfm 支持都提了好久了，也不跟进😂
|
 |
5
xieweizhi007 2019-06-04 00:27:34 +08:00 via Android
还能这么玩，赞一个
|
 |
6
adamwang 2019-06-04 10:10:07 +08:00
关注一波。👍
|
 |
7
tozp 2019-06-04 10:41:42 +08:00
懒得折腾了，还是 Hugo 好用。
|
 |
8
7138888 2019-06-04 13:37:24 +08:00
你这操作太 6 了，搬到到 12i.cn/notion 社群中给小伙伴们分享下
|
 |
9
blessu 2019-06-04 13:38:26 +08:00
rss 订了👍
|
 |
10
xiaoluoboding 2019-06-04 20:36:14 +08:00
666，支持个
|
|
11
mayne95 OP 好多收藏，谢谢大家的支持🎉。因为文档写的太烂了，大家在部署过程中有啥问题的话，欢迎提 issues。
|
 |
12
flavoury 2019-06-05 10:59:29 +08:00
等楼主更新，更“懒人”一点我也部署上去哈哈哈
|
|
13
flavoury 2019-06-05 11:00:16 +08:00
另外楼主注意身体哦，我现在定下目标每天都跑步～还是要注意身体，身体是本钱
|
 |
14
sidkang 2019-06-05 14:14:23 +08:00
已点赞，楼主厉害了，我最近也在研究怎么样能利用 notion api 来实现一定程度的自动化，学习一波。
|
 |
15
wolfie 2019-06-05 15:31:21 +08:00
『终于可以好好写博客了（ flag+1 ）』😂😂
上次见过一次用 Notion 写博客的。 |
 |
18
sama666 2019-06-07 05:40:44 +08:00 via Android
今天试试😋，有问题再问
|
 |
19
zdb1115 2019-06-07 09:22:31 +08:00 via Android
身体最重要，
|
 |
21
xmsz 2019-06-23 18:43:08 +08:00
还是有点太绕了，相当于还是 （模拟）抓取数据 => 处理数据结构 => 自己渲染。和 github 上现有的实现一样，这三个环节都很占用时间。
现在的方法里，最懒的方式就是直接导出 Html （ Notion 已经支持，同时还支持子页面），所以只有 hook 一下去导出 =》 解压 =》 就行 但，这也有点操作成本 |
|
22
mayne95 OP @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 再推送的做法。无奈这些都不符合我的使用需求。我想的是尽可能自动化的完成这些操作，现在的实现基本符合我的需求。 文档和帖子都没说清楚，这里详细解释以下。也欢迎大家交流实现思路。 |
 |
24
zengguanzhong 2020-06-27 11:18:09 +08:00
按照文档使用 Netlify 部署站点失败了。希望楼主康康怎么回事！已将具体信息发送至您 github 所留邮箱。
@mayne95 |
 |
25
EGOISTK21 2020-06-30 20:26:38 +08:00
@zengguanzhong 我也回到 v2 来考古了
@mayne95 请查看最新的[issue]( https://github.com/mayneyao/gatsby-starter-gine-blog/issues/9) |
 |
26
dalaomai 2021-07-15 14:58:46 +08:00
notion 的官方 api 出来了，大佬还会更新么
|
Select Language