首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
V2EX  ›  分享创造

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

  •  1
     
  •   mayne95 · 43 天前 · 2545 次点击
    这是一个创建于 43 天前的主题,其中的信息可能已经有所发展或是发生改变。

    从今年 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 )

    第 1 条附言  ·  42 天前
    前天晚上发完贴,熬夜看完 WWDC。清晨突然感觉右边肚子疼腰疼,呕吐几次,疼的翻来覆去受不了。开始以为是受凉了,想裹辈子休息一下,发现怎么躺都不舒服。

    查了一下症状,以为是急性阑尾炎。最后疼的受不了开始痉挛,吓死我了。慌忙之下叫了救护车(人生头一次,真他妈的疼)。到医院后走流程,最后查出来是尿道结石导致肾积水。好在不严重,最后医生开了药,叮嘱多喝水多运动。

    昨天真是魔幻的一天。从小到大身体都还不错,没啥毛病。仰仗着自己年轻,作践身体。哎,失去了才懂得珍惜,生病了才知道健康的可贵。从今往后要开始养生了(再也不熬夜看发布会了😂

    希望 V 友们引以为戒,注意身体健康。

    活着真好。
    第 2 条附言  ·  31 天前

    懒人版部署步骤

    1. 访问:https://app.netlify.com/start/deploy?repository=https://github.com/mayneyao/gine-blog 按照提示,一路下一步即可(使用 github 授权登录 netlify)。部署完成后,github 帐号下会多出一个代码仓库。

    2. clone 文章表格模板 到自己的 notion 中。

    3. 在 github 上修改 config.js ,将 blog.url 修改为自己的 notion 表格地址。提交后 netlify 会自动更新(重新构建博客)

    完成上述步骤后,博客就搭建起来了。接下来具体的细节优化,可以参考文档操作。

    23 回复  |  直到 2019-06-24 20:51:56 +08:00
        1
    nosky   43 天前 via Android   ♥ 1
    用 notion 做数据源真的是不错的想法,👍👍👍
        2
    mayne95   43 天前
    @nosky notion 天下第一 2333
        3
    creedowl   43 天前 via Android
    notion 对 md 支持奇奇怪怪的一直劝退。。
        4
    mayne95   43 天前
    @creedowl 可能 notion 觉得自家的 block 比 md 更厉害,不屑于兼容 md。到现在 md 导出都是怪怪的,gfm 支持都提了好久了,也不跟进😂
        5
    xieweizhi007   43 天前 via Android
    还能这么玩,赞一个
        6
    adamwang   42 天前
    关注一波。👍
        7
    tozp   42 天前
    懒得折腾了,还是 Hugo 好用。
        8
    7138888   42 天前
    你这操作太 6 了,搬到到 12i.cn/notion 社群中给小伙伴们分享下
        9
    blessu   42 天前
    rss 订了👍
        10
    xiaoluoboding   42 天前
    666,支持个
        11
    mayne95   42 天前 via Android
    好多收藏,谢谢大家的支持🎉。因为文档写的太烂了,大家在部署过程中有啥问题的话,欢迎提 issues。
        12
    flavoury   41 天前
    等楼主更新,更“懒人”一点我也部署上去哈哈哈
        13
    flavoury   41 天前
    另外楼主注意身体哦,我现在定下目标每天都跑步~还是要注意身体,身体是本钱
        14
    sidkang   41 天前
    已点赞,楼主厉害了,我最近也在研究怎么样能利用 notion api 来实现一定程度的自动化,学习一波。
        15
    wolfie   41 天前
    『终于可以好好写博客了( flag+1 )』😂😂

    上次见过一次用 Notion 写博客的。
        16
    watsy0007   40 天前
    @wolfie 求链接~
        17
    wolfie   40 天前
        18
    sama666   40 天前 via Android
    今天试试😋,有问题再问
        19
    zdb1115   39 天前 via Android
    身体最重要,
        20
    mayne95   31 天前
    @flavoury @zdb1115

    谢谢关心,“懒人版” 部署步骤见附言。
        21
    xmsz   23 天前
    还是有点太绕了,相当于还是 (模拟)抓取数据 => 处理数据结构 => 自己渲染。和 github 上现有的实现一样,这三个环节都很占用时间。
    现在的方法里,最懒的方式就是直接导出 Html ( Notion 已经支持,同时还支持子页面),所以只有 hook 一下去导出 =》 解压 =》 就行
    但,这也有点操作成本
        22
    mayne95   23 天前
    @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 再推送的做法。无奈这些都不符合我的使用需求。我想的是尽可能自动化的完成这些操作,现在的实现基本符合我的需求。

    文档和帖子都没说清楚,这里详细解释以下。也欢迎大家交流实现思路。
        23
    xmsz   22 天前
    @mayne95 行吧~ 年轻还是可以多折腾一下
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3203 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 20ms · UTC 01:02 · PVG 09:02 · LAX 18:02 · JFK 21:02
    ♥ Do have faith in what you're doing.