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(Createdtime):建立時間

• UpdateAt(Lasteditedtime):更新時間

預設當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無法讀取到