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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 861 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

工具介绍

说干就干，写了两个工具

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 目录下

其中需要关注的是

token: ${{ secrets.CHECKOUT_TOKEN }} 是为了后面的 push to github 推送后能够触发另外一个 action 流程，否则无法触发，其中的 CHECKOUT_TOKEN 为你创建的 Personal Access Token ，具体可以查看我上面的注释
on: issues: types: [opened] 的主要作用是当打开或提交一个 issue 时触发该 action
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 分支