1853 words
9 minutes
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 安装 CLInpm install @elog/cli -g
# 使用 yarn 安装 CLIyarn global add @elog/cli
# 使用 pnpm 安装 CLIpnpm 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"
- 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第九步
- 注册
Cloud Flare或者Vercel作为站点托管平台,如果仅仅是备份目的,在第8步完成就结束了

- 在
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格式还有一些适配问题,需要发布后重新检查下格式
参考文章
备份 Notion 文档到 Github | 某中二的黑科技研究中心 (darkreunion.tech)
工具平台
官方文档
文件存储
云存储 - 大规模文件数据存储 - 又拍云 (upyun.com)
Share
If this article helped you, please share it with others!
Last updated on 2023-11-07,794 days ago
Some content may be outdated