Notion博客折腾指南

前言#

阿里的语雀和字节的飞书还有notion都是很好的写作平台，飞书的智能表格应该也是借鉴了notion的产品风格，而语雀前段时间在周一下午发生所有节点宕机8小时的P0事故，并且创始人已经入职飞书，这种亏损的团队出现如此严重的事故，一定会被边缘化，为了减少以后再出现故障，决定使用notion作为写作平台，并且备份到GitHub中，同时使用cloudflare部署站点。

用到了哪些工具#

完整的工具链如下，除了elog和hexo剩下的工具都需要注册

notion→slack→pipedream→elog→hexo→github→cloudflare→最终博客

博客搭建教程#

第一步#

单独注册完这些工具后，先看一遍elog官方文档，因为是使用elog作为同步工具，承上启下，所以重点会在elog上

第二步#

注册notion，并复制 elog-notion-template | 表格数据库到空间内，记录数据库ID。创建integrations https://www.notion.com/my-integrations 并集成到刚复制的这个模板中，记录Integrations的Secrets当作同步Token。(注意两个关键要素NOTION_DATABASE_ID和NOTION_TOKEN)

第三步#

注册slack，添加notion应用，与notion进行关联，并且配置小闪电（自动程序）用于监听文档状态，例如当有文档status设置为已发布，则给slack发送消息

第四步#

注册pipedream，添加自动化脚本trigger用于监听slack的消息，并通知GitHub Workflow Action进行打包发布，创建trigger和http调用通知。需要提前在Github创建存储仓库并生成**Github Token**

使用elog提供的vercel-severless服务可以很方便的调用GitHub的Deploy API

https://serverless-api-elog.vercel.app/api/github?user=cyolc932&repo=elog&event_type=deploy&token=xxx
//例如你的github用户名，仓库名称，部署名称以及github的token

如果点击Test调用Github API没有出现Success，需要检查Github Token

第五步#

使用Hexo 6.3+ 网站皮肤选择 Hexo Aurora，安装hexo和配置皮肤在此不在赘述

第六步#

在安装好hexo的项目环境中通过npm安装elog

# 使用 npm 安装 CLI
npm install @elog/cli -g

# 使用 yarn 安装 CLI
yarn global add @elog/cli

# 使用 pnpm 安装 CLI
pnpm install @elog/cli -g

# 安装指定版本
npm install @elog/cli@0.9.0 -g

# 也可使用 npx 运行 elog 的所有命令：将本文档使用 elog 命令的地方换成 npx @elog/cli
# 例如
# 初始化 elog 配置文件
npx @elog/cli init
# 本地同步命令
npx @elog/cli sync -e .elog.env
# 清除本地缓存
npx @elog/cli clean

在代码路径中初始化elog后，会出现这些elog开头的配置文件，使用哪个平台就配置哪个，比如我选择的是notion+GitHub，注意将.elog.env加入忽略文件，避免泄露关键信息

配置.elog.env后，继续配置elog.config.js，关键配置如下

module.exports = {
  write: {
    platform: 'notion',
    notion: {
      token: process.env.NOTION_TOKEN,
      databaseId: process.env.NOTION_DATABASE_ID,
      limit: 3,
      filter: {
        and: [
          {
            property: 'status',
            select: { equals: 'Published' }
          },
          {
            property: 'type',
            select: { equals: 'Post' }
          },
        ]
      },
      sorts: false, // [{timestamp: 'created_time', direction: 'descending'}],
      catalog:  {
        enable: true,
        property: "date",
      },
    },
  },
  deploy: {
    platform: 'local',
    local: {
      outputDir: './article',
      filename: 'title',
      format: 'matter-markdown',
      catalog: true,
      formatExt: './formatext.js',
    },
  },
  image: {
    enable: true,
    platform: 'local',// 注意， 如果放在local，会导致cloud flare无法显示图片，建议使用图床
    local: {
      outputDir: './images',
      prefixKey: '../../images',
    }
  },
}

如果使用了hexo，需要对markdown做一些格式处理，在代码根目录添加formatext.js，代码如下

const { matterMarkdownAdapter } = require("@elog/plugin-adapter");

/**
 * 自定义文档处理器
 * @param {DocDetail} doc doc的类型定义为 DocDetail
 * @return {string} 返回处理后的文档内容字符串
 */
const format = (doc) => {
  if (doc.properties) {
    let properties = doc.properties

    for (var key in properties) {
      if (properties.hasOwnProperty(key) && properties[key] === "") {
        delete properties[key];
      }
    }
  }

  return matterMarkdownAdapter(doc);
};

module.exports = {
  format,
};

现在elog环节配置结束，使用命令验证是否可以正常同步

第七步#

配置GitHub环境变量和Github Action ，在你创建的GitHub存储库中点击Settings如下图步骤

第八步#

使用仓库的Github Action接收pipedream的调用，并通过elog同步notion数据转换成markdown并提交。Action代码如下:

name: Notion-Action-MD

on:
  push:
    branches:
      - main
  # 手动运行
  workflow_dispatch:
  # 允许外部仓库事件触发
  repository_dispatch:
    types:
      - deploy
  schedule:
    - cron: "0 * * * *"

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: 检出代码库
        uses: actions/checkout@v2

			- name: Install dependencies
        run: npm install

      - name: 安装 @elog/cli
        run: npm install @elog/cli -g
			
			- name: 安装 @elog/plugin-adapter
        run: npm install @elog/plugin-adapter -g

      - name: 执行 elog sync
        env:
          NOTION_TOKEN: ${{ secrets.NOTION_TOKEN }}
          NOTION_DATABASE_ID: ${{ secrets.NOTION_DATABASE_ID }}
          COS_SECRET_ID: ${{ secrets.COS_SECRET_ID }}
          COS_SECRET_KEY: ${{ secrets.COS_SECRET_KEY }}
          COS_BUCKET: ${{ secrets.COS_BUCKET }}
          COS_REGION: ${{ secrets.COS_REGION }}
        run: |
          elog sync

      - name: 配置Git用户名邮箱
        run: |
          git config --global user.name "user"
          git config --global user.email "[email protected]"

      - name: 提交拉取的文章到GitHub仓库
        run: |
          echo `date +"%Y-%m-%d %H:%M:%S"` begin > time.txt
          git add .
          git commit -m "Refresh elog.cache.json" -a

      - name: 推送文章到仓库
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}

      - name: Action保活
        uses: gautamkrishnar/keepalive-workflow@master

第九步#

在CloudFlare创建pages应用，连接你的GitHub仓库，构建命令如下，如果有域名可以使用子域名映射进来，比如我的将blog映射到此pages下。添加完成之后，每次GitHub提交后CloudFlare就会拉取代码，重新构建。

第十步#

在上一步我们已经结束了所有的配置，确实有点繁琐，希望以后可以优化成开箱即用的产品，回顾一下，本次做的工具调用链如下：
通过notion作为创作平台编写文章，文章到已发布 状态就给slack发送消息通知
slack收到消息通知后，pipedream也在slack的notion频道偷听，要开始发布内容了
pipedream听到消息就通过vercel的severless以HTTP方式调用GitHub的Deploy API
GitHub的deploy api收到消息就通知仓库的Github Action起来干活，安装elog环境，读取Github的环境变量，执行elog命令拉取notion数据，生成为markdown格式，提交到GitHub 仓库中
cloud flare的pages应用监听到链接的GitHub仓库有新的提交内容，就调用GitHub API拉取仓库数据，然后进行hexo编译和npm打包生成静态页面，并悄悄地部署在pages节点中。

异常指南#

notion链接到slack中发送消息失败，多拖动几次，slack并非实时接收notion的变更消息
pipedream中通过HTTP调用GitHub API失败，检查token，首次部署建议多开放一些权限
elog同步数据失败，检查notion数据库ID和token
GitHub action运行失败，检查环境变量，GitHub Actions 的工作流语法 - GitHub 文档并且参考 github-push-action/action.yml at master · ad-m/github-push-action
elog同步时将notion内容转换为markdown格式还有一些适配问题，需要发布后重新检查下格式

前言#