notion 实现自动发布到 hugo github 博客

notion 是用来记录笔记的，hugo 是我用来作为 github 博客自动构建发布的

我目前设置了一个 github action 是：当我的博客仓库 hugo 分支有 push 事件时，自动构建文章发布到 master 分支，并且发布到博客园。

但是会有这样的不便：在 notion 中写了一篇笔记或文章，想要发布到 github 静态博客上，发现需要先将文章转化成 markdown ，图片需要上传到图床，然后贴入 markdown ，然后再推送到 github ，等待 action 自动构建静态博客

既然我使用 notion 记录笔记，何不继续 All-in-one ，将 notion 作为我的博客发布工具。

只需要在 notion 中建立一个用于博客发布的 database ，然后写完笔记后填入这个 database ，再使用一些手段触发 CI 即可完成博客文章的发布

工具介绍

说干就干，写了两个工具

• https://github.com/akkuman/notiontomd

• https://github.com/akkuman/notion_to_github_blog

notiontomd 是用来 notion 中的某个 page 转化为 markdown 的库，当然，当前支持的 block 是有限的，详细信息可以查看该仓库

notion_to_github_blog则是一个 github action 模板，用来自动从指定格式的 database 中拉取需要更新发布的文章，然后利用 notiontomd 转化为 markdown ，然后推送到 github 仓库，再触发另外的 github aciton 进行博客静态文件构建

使用

怎么建仓怎么自动从某分支拉取推到 github pages 所在分支我就不展开说明了，感兴趣的可以去网上搜索相关资料，本文所关注的流程是从 notion database 到博客源文件

基础环境

本文所涉及到的例子环境可以前往我的博客仓库 https://github.com/akkuman/akkuman.github.io 进行查看

• hugo 分支用来存放博客源文件，其中有一个 github action 的功能是 push 时触发，然后自动构建推送到 master 分支

• master 分支用来存放 hugo 构建之后生成的站点静态文件

• 博客相关的图片我会推送到 https://github.com/akkuman/pic 仓库

• hugo 作为主分支，master 设置为 github pages 分支（原因后面描述）

workflows 编写

要使用该 action ，首先你需要在 notion 中创建一个 database ，这个 database 需要有几个字段，字段名如下:

• Name (title): 文章标题

• Article (text): 文章链接

• MDFilename (text): 创建的 markdown 文件名

• Category (select): 文章分类

• Tags (multi_select): 文章标签

• IsPublish (checkbox): 文章是否发布

• NeedUpdate (checkbox): 文章是否有更新

• CreateAt (Created time): 创建时间

• UpdateAt (Last edited time): 更新时间

默认当 IsPublish 未勾选或 NeedUpdate 勾选的项目才会触发流程，即 IsPublish=false || NeedUpdate=true 时触发

样例如下

然后你需要在你存放博客源文件的仓库进行一些设置，放置上 workflows

下面以我的 github 博客仓库 akkuman/akkuman.github.io 为例进行说明

我们创建一个 workflows: akkuman/akkuman.github.io/.github/workflows/xxx.yml

name: Notion To Blog on: issues: types: [opened] jobs: notion-to-blog: if: ${{ github.event.issue.user.login == github.actor && contains(github.event.issue.title, 'notion-ci') }} runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 with: # Workflows are only triggered when commits (and tags I think, but it would need to be tested) are created pushed using a Personal Access Token (PAT). # ref: https://github.com/EndBug/add-and-commit/issues/311#issuecomment-948749635 token: ${{ secrets.CHECKOUT_TOKEN }} - name: Markdown From Notion uses: akkuman/notion_to_github_blog@master with: notion_token: ${{ secrets.NOTION_TOKEN }} notion_database_id: ${{ secrets.NOTION_DATABASE_ID }} img_store_type: github img_store_path_prefix: notionimg # img_store_url_path_prefix: ${{ secrets.IMG_STORE_URL_PATH_PREFIX }} # Actions run as an user, but when they are running in a fork there are potential security problems, so they are degraded to "read-only" # ref: https://github.com/actions/first-interaction/issues/10#issuecomment-546628432 # ref: https://docs.github.com/en/actions/security-guides/automatic-token-authentication#permissions-for-the-github_token # so you should set another token img_store_github_token: ${{ secrets.CHECKOUT_TOKEN }} img_store_github_repo: akkuman/pic img_store_github_branch: master # md_store_path_prefix: ${{ secrets.MD_STORE_PATH_PREFIX }} - name: push to github uses: EndBug/add-and-commit@v7 with: branch: hugo message: 'Notion CI' 

字段解释：

• notion_token: notion 申请的 app 的 api token

• notion_database_id: notion 中需要作为博客发布的 database 的 id ，这是一个 uuid ，可以通过 Share->Copy link 获取，注意需要把其中的 id 转化为 uuid 的格式，比如 Copy link 出来为 https://www.notion.so/akkuman/7bf568e946b946189b2b4af0c61b9e78?v=c45b5e45e96541f4bf81994ab4af1a6e，则 notion_database_id 为 7bf568e9-46b9-4618-9b2b-4af0c61b9e78，并且你所要发布的文章以及该 database 都需要 invite 我们上面申请的 app （为了 token 能够获取到内容）

• img_store_type: notion 中提取出来的图片保存到哪，可选 local 或者 github ，local 代表保存到源仓库，github 代表保存到另一个 github 仓库（图床）中去，默认为 local

• img_store_path_prefix: 图片保存的路径前缀，默认为 static/notionimg

• img_store_url_path_prefix： 当 img_store_type=local 时需要，设置在 markdown 图片链接中的前缀，和上面的 img_store_path_prefix 不相同，比如 img_store_path_prefix='static/notionimg' img_store_url_path_prefix：='/notionimg/' 的情况下，则图片保存路径为 './static/notionimg/{img_md5}{img_ext}', 而在 markdown 文件中的体现为 ![](/notionimg/{img_md5}{img_ext})

• img_store_github_token: 当 img_store_type=github 时需要，设置保存图片到 github 图床所使用的 token （secrets.GITHUB_TOKEN 只有读权限，所以需要另外使用）

• img_store_github_repo: 当 img_store_type=github 时需要，你把哪个仓库当作 github 图床

• img_store_github_branch: 当 img_store_type=github 时需要，你把哪个 github 图床仓库的哪一个分支当作图床

• md_store_path_prefix: 最后生成的 markdown 文件保存在哪，默认是当前仓库目录的 content/posts 目录下

其中需要关注的是

1. token: ${{ secrets.CHECKOUT_TOKEN }} 是为了后面的 push to github 推送后能够触发另外一个 action 流程，否则无法触发，其中的 CHECKOUT_TOKEN 为你创建的 Personal Access Token ，具体可以查看我上面的注释

2. on: issues: types: [opened] 的主要作用是当打开或提交一个 issue 时触发该 action

3. if: ${{ github.event.issue.user.login == github.actor && contains(github.event.issue.title, 'notion-ci') }} 的主要作用是：当提交 issue 的人是你自己，并且 issue 标题包含 notion-ci 时进行 action 流程

注意: 只有当 workflows 在主分支时，使用 issues 作为触发条件才会生效，所以我个人是将 hugo 作为主分支，将 master 作为 Github Pages 分支

测试

首先申请一个 token ，在 https://www.notion.so/my-integrations 点击 + New integration ，然后配置好你想要的 app 名称，以及设置到的工作区，这里我取的名称是 api

然后我们需要把指定的 databse 以及所需要发布的文章都集成我们申请的 app

以及需要发布的文章

注意：database 中的 Article 列，按下 @ 号来搜索选择文章

github 配置好相关的 Secrets ，

我们在仓库中提交一个标题包含 notion-ci 的 issue ，即可触发 workflows

全自动整个流程

平台调研

根据官方文章 Connect your tools to Notion with the API 中所提到的，我们可以得到一些可以用于 notion 的自动化集成平台，对比了一下，automate.io 应该是最实惠的平台，免费用户每个月可以触发 300 次，一般而言，对于博客来说够了

自动化集成

在 https://automate.io/app/signup 注册好账号后，打开 Add an Issue in GitHub on a New Database Item in Notion ，在 database 添加条目时在指定的 github 仓库添加一条 issue

首先点选 Link Notion ，一路下一步，出现下面的页面时，点选我们的 databse

然后确认后点选我们的 database

然后继续 Link Github 授予 github 权限（注意，这个应用所需的权限较大）

然后配置一下相关属性

注意选好相关仓库，以及 Title 中需要包含 notion-ci

确认就好了，当然，有一些缺陷，免费的是每五分钟检查一次，等不及的话，你还是可以手动提交 issue 触发

现在尝试在 database 中使用右上角的 New 新增一个条目，查看会有什么变化

注意：所有涉及到的文章，都需要 invite 我们先前创建的 app ，否则 github action 无法读取到