使用语雀随时编写文章
本文章首发于语雀!
通过各种高科技功能同步到Hajeekn 的博客
本文章基于冰卡诺老师的教程编写
「语雀」是一个「专业的云端知识库」,孵化自 蚂蚁金服 ,是 体验科技 理念下的一款创新产品,已是 10 万阿里员工进行文档编写、知识沉淀的标配。
语雀诞生伊始,只是希望能给工程师提供一个好用的工具用来写技术文档,达成「用 Markdown 写文档」这个小目标。但在产品研发的过程中,我们发现其实身边的每个人、每个团队、每个组织都有很多知识,但一直以来缺少一个好用的工具让这些知识不只是留在每个人的大脑或电脑里,还可以被记录、分享和交流。
所以,带着这颗初心,我们觉得语雀不应止步于服务工程师,应该致力于为每个想表达所思所想的人提供一款顺手的工具,让知识能得以记录和传播,让人们可以在「语雀」中平等快乐地创作和交流知识,让再小的个体也可以拥有自己的知识库。
部署流程
在语雀上编写文章并发布 -> 通过 Webhook 触发 serverless 云函数的部署 – serverless 云函数使用 token 等数据调用 GitHub API -> GitHub Actions 脚本运行(包括安装依赖与 Hexo / 同步语雀文章到本地 / 执行部署)
教前准备
- 一个语雀账号
- Vercel 账号
- GitHub 私钥
GitHub 私钥的获得
Click Me进入以上地址
选择 Generate new token
Note 随便填写
Select scopes 选择 repo / 或者宁可以全选,但是泄露了你就完蛋了(哭笑)
生成好后复制这一串(避免有人手贱,推荐点击后面的蓝色按钮
然后我们可以新建个 txt 记录下来,避免老年痴呆忘记(不是)
仓库新建
进入 GitHub 新建仓库
点我传送
创建仓库时,权限请选择 Private(否则后续会很麻烦的)
开始工作
创建知识库
登录语雀,进入工作台
进入个人知识库
选择创建知识库
归属选择你自己,类型选择文档知识库
点击下一步
名称随便填写,可见范围选择互联网可见
公开内容是否允许搜索引擎收录选择允许(其实允许不允许也没关系)
然后我们点击三个点 - 管理文档
新建 - 导入
类型选择 Markdown
为了方便以后文档的撰写,可以新建模板。注意图片链接需要加上’’防止被渲染成链接。
盗一下冰老师的图
如果你使用了 abbrlink,请手动填写 abbrlink。
这里提供一套语雀模板
1 | --- |
tags 配置和 categories 配置推荐用数组格式
安装语雀插件进行本地调试
为了确保在云端能够正常生成博客,需要首先在本地进行调试。
打开你的终端
使用
1 | npm i -g yuque-hexo |
全局安装 yuque-hexo 插件
修改 package.json
在第一个对象代码块后增加”yuqueConfig”代码块。
1 | { |
其中的 login repo token 需要自己更改
login:框起来的这一段(不要/和https://www.yuque.com)
token 是在右上角头像 -> 账户设置 -> Token 添加的,权限的话只给读取就可以。复制粘贴获取的”token”字段。
再次盗图
添加完成后保存,在执行命令前,请先备份自己的_post 文件夹,因为语雀的下载操作会覆盖原有的_post 文件夹。
在终端中输入‘yuque-hexo sync’就会把语雀的文章给下载下来。
然后通过‘hexo g&hexo s’进行调试。
ps:输入‘yuque-hexo clean’就会清除_post 下的所有文章。
如果存在外挂标签,请确保外挂标签格式的书写规范,否则容易报错。
配置 GitHub Actions
删除主题的.git(使用 npm 安装请忽略)
因为在仓库里面再放一个仓库是没法把里面那个仓库 push 到 github 的,只会传一个空文件夹,会导致后期博客成了空白页面,需要把 git clone 的 hexo 主题里的.git 文件夹给删掉。
修改 hexo 主题文件中的 meta
以 Butterfly 主题为例
进入%brt%/themes/butterfly/layout/includes/head.pug (Windows 用户请替换 / 为 \ )
在 meta(name=”theme-color” content=themeColor)后方添加 meta(name=”referrer” content=”no-referrer”)。
该步骤是确保语雀中的图片可以正常加载。
1 | meta(name="theme-color" content=themeColor) |
修改 hexo 的_config,yml
前往博客的根目录,修改 hexo 的_config,yml 中关于 develop 的配置
1 | # Deployment |
创建 GitHub Actions 脚本
在博客根目录下新建.github 文件夹(点不要漏掉了),在该文件夹下新建 workflows 文件夹。
在 workflows 文件夹下新建 autodeploy.yml。并填入以下代码。
将下面那个 user.name 和 user.email 修改为自己的信息,注意对齐。
1 | name: 自动部署 |
上传博客源码
在你的终端输入:
1 | git init |
进行云端调试
上传后你会发现 github action 生效。等待几分钟后,如果打勾,就说明部署成功。如果未打勾请检查出错的步骤。
配置云函数
以下采用 Vercel 示范,其他云函数请看详细步骤:https://zfe.space/post/554e.html
为了方便调用,冰老师写了一个 API
调用方式如下
1 | https://yuque-vercel-webhook-api.vercel.app/api?token='{填写你的github私钥}'&user='{填写你的github用户名}'&source='{填写你的github仓库地址}' |
你需要传递的参数有 token,user,source。
当然你也可以直接 Fork 冰老师的项目自己搭建
https://github.com/Zfour/yuque_vercel_webhook_api
部署完成后将https://yuque-vercel-webhook-api.vercel.app换成你搭建好的地址
配置语雀的 webhook
设定触发规则
在知识库中选择设置 -> 开发者
添加一个 WebHook
推送方式选择发布文档 更新文档 删除文档
然后名称随便写,URL 就把上面的调用方式补充完成放上去就行
设置完毕后,你可以尝试发布一篇文章进行测试。如果 github action 执行则说明配置成功。