如何将Notion用作我的Gatsby网站的内容管理系统

2023 年 11 月 8 日

如何将Notion用作我的Gatsby网站的内容管理系统 - Tony Faieta - Medium

过去一年，我一直在使用Notion (opens new window)作为综合生活管理工具，到目前为止，它在创建一个空间来管理待办事项、内容、目标追踪甚至个人财务方面非常有用。

Notion的一个不足之处在于它没有官方的API，因此在开发或扩展方面受限于其自身平台。与此相反，我开始注意到许多人在Twitter上使用非官方的Python API (opens new window)，甚至在逆向工程Notion的API以将其用作CMS。

我爱上了将Notion用作CMS的想法，特别是我使用Notion在多个设备上的原因是，我希望能够随时随地写作和发布内容，以减少摩擦。

因此，我开始尝试将Notion作为我的Gatsby (opens new window)博客的CMS集成到我的tony.so (opens new window)博客中。

步骤1：研究 #

这个过程有些棘手，大部分时间都花在了调试如何从Notion页面获取文本上。

我只是想能够在iPad上写博客文章，而不用离开Notion应用程序。由于我希望这些博客文章与我的日常Notion设置独立，所以我在Notion设置中创建了一个名为“博客文章”的新页面，如下所示：

设置这个隔离环境让我可以开始尝试一个不用花太长时间就能完成的脚本：

// get_blog_posts.pyimport osimport datetimefrom notion.client import NotionClientclient = NotionClient(token_v2="NOTION_TOKEN")blog_home = client.get_block("NOT ION_BLOG_POSTS_PAGE

主循环
对于博客主页的每篇文章：
    处理前言
    text = "---\n标题：%s\n日期：%s\n描述：\n---" % (post.title, datetime.datetime.now())
    处理标题
    text = text + '\n\n' + '# ' + post.title + '\n\n'
    对于每个内容：
        处理H1标题
        if (content.type == 'header'):
            text = text + '# ' + content.title + '\n\n'
        处理H2标题
        if (content.type == 'sub_header'):
            text = text + '## ' + content.title + '\n\n'
        处理H3标题
        if (content.type == 'sub_sub_header'):
            text = text + '### ' + content.title + '\n\n'
        处理代码块
        if (content.type == 'code'):
            text = text + '```\n' + content.title + '\n```\n'
        处理图片
        if (content.type == 'image'):
            text = text + '![图片]' + content.source + '\n\n'
        处理列表
        if (content.type == 'bulleted_list')

```python
text = text + '* ' + content.title + '\\n'        # 处理分隔线        if (content.type == 'divider'):            text = text + '---' + '\\n'        # 处理基本文本、链接、单行代码        if (content.type == 'text'):            text = text + content.title + '\\n'    title = post.title.replace(' ', '-')    title = title.replace(',', '')    title = title.replace(':', '')    title = title.replace(';', '')    title = title.lower()    try:        os.mkdir('../content/blog/' + title)    except:        pass    file = open('../content/blog/' + title + '/index.mdx', 'w')    print('写入新页面')    print(text)    file.write(text)

参考一下，这是blog_home所指的页面，如果您想复制脚本以用于个人设置，这很重要，因为它只期望在一个空的“博客文章”页面中包含单独的页面：

脚本处理了大部分常见的Markdown用法，并将它们写入我的content/blog/目录下。第三步：部署

由于这个项目的初衷是希望能够在我的iPhone或iPad上的Notion应用中完成所有操作，而且我对如何部署这个项目没有很好的想法。

经过一些关于使用Netlify的研究，我发现他们有一个触发构建钩子的功能。可能是一个不错的主意使用它们（它们与Python设置的集成似乎很容易使用）。

因此，我配置了一个[build.sh](http://build.sh/)作为我的构建脚本，并配置了一个netlify.toml将Netlify配置为我的CI。另外，由于get_blog_posts.py使用的是Python 3.7，需要创建一个简单的runtime.txt文件来将Netlify指向正确的Python版本。

我首先通过githooks设置了这个配置，并确保一切顺利，然后进一步深入研究了Netlify (opens new window)提供的webhooks。

设置webhook非常简单，我认为一个简单的设置就是在我的网站上添加一个页面我给我的React组件起了一个随机的哈希值来稍微隐藏它，让它对公众来说不那么容易被发现。不幸的是，我还没有想到完全让这个过程只对我有效的解决方案，但如果你有任何想法，请随时在Twitter上联系我！

// hash.jsx
import React, { useEffect } from "react";

const hash = () => {
    useEffect(() => {
        fetch("NETLIFY_WEBHOOK", { method: "POST" })
    }, [])

    return <div>触发构建！</div>
}

export default hash

对我来说，Gatsby是根据我放置它的目录（对我来说是pages目录）来创建页面的。

所以最终的结果是，在我的Notion主页上创建一个网页书签，以便在我完成一篇博客文章后构建我的网站。

它看起来像这样：

虽然这个设置还存在很多问题，但它绝对有效，并且一直在帮助我快速从任何地方发布文章，这也是我的目标。这篇文章是在我的博客和这里同时发布的：tony.so (opens new window)

希望这对你有所帮助！