首页
论坛
课程
招聘
[原创]自动同步语雀文档到你的hexo博客
2020-7-23 20:44 3229

[原创]自动同步语雀文档到你的hexo博客

2020-7-23 20:44
3229

hexo+github pages+yuque-hexo插件+github actions+serverless云函数+语雀

实现语雀写完文章能够自动同步到 hexo 博客

语雀的文档编辑器是我目前用过最舒服的,我写文章都是用语雀写好了然后直接复制的

ps.搭好的博客直接用传到语雀上的图片,访问速度快,还不用考虑图床啥的

本文针对已经用 github pages 搭建好 hexo 博客的,如果没有搭好的可以去网上找一下教程,很方便


hexo同步语雀内容


用到了这个项目:https://github.com/x-cold/yuque-hexo

安装:npm i -g yuque-hexo


然后把 package.json 的内容添加上下面这些

  "yuqueConfig": {
    "postPath": "source/_posts",
    "cachePath": "yuque.json",
    "mdNameFormat": "slug",
    "adapter": "hexo",
    "concurrency": 5,
    "baseUrl": "https://www.yuque.com/api/v2",
    "login": "hxfqg9",
    "repo": "web",
    "token": "语雀token",
    "onlyPublished": true,
    "onlyPublic": true
  },
  "devDependencies": {
    "yuque-hexo": "^1.6.0"
  },
  "hexo": {
    "version": "4.2.1"
  },

这里说一下里面的 baseurl 是固定的

login 和 repo 是如下图这样对应的,个人界面和团队界面都可以


image.png


token 是在右上角头像 -> 账户设置 -> Token 添加的,权限的话只给读取就可以

ps.公开的知识库也要设置 Token


image.png


在 "scripts" 中添加

    "sync": "yuque-hexo sync",
    "clean:yuque": "yuque-hexo clean",

这样整体下来我的 package.json 内容如下

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server",
    "sync": "yuque-hexo sync",
    "clean:yuque": "yuque-hexo clean"
  },
  "yuqueConfig": {
    "postPath": "source/_posts",
    "cachePath": "yuque.json",
    "mdNameFormat": "slug",
    "adapter": "hexo",
    "concurrency": 5,
    "baseUrl": "https://www.yuque.com/api/v2",
    "login": "hxfqg9",
    "repo": "web",
    "token": "语雀token",
    "onlyPublished": true,
    "onlyPublic": true
  },
  "devDependencies": {
    "yuque-hexo": "^1.6.0"
  },
  "hexo": {
    "version": "4.2.1"
  },
  "dependencies": {
    "hexo": "^4.2.1",
    "hexo-deployer-git": "^2.1.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-baidu-sitemap": "^0.1.6",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-feed": "^2.2.0",
    "hexo-generator-index": "^1.0.0",
    "hexo-generator-json-content": "^4.2.3",
    "hexo-generator-searchdb": "^1.3.1",
    "hexo-generator-sitemap": "^2.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^2.0.0",
    "hexo-renderer-stylus": "^1.1.0",
    "hexo-server": "^1.0.0",
    "hexo-wordcount": "^6.0.1"
  }
}

这时候用 yuque-hexo sync 就会把语雀的文章给下载下来,下载到 \source\_posts


然后 hexo g && hexo s 就可以访问 127.0.0.1:4000 本地看一下了

手动发布是 hexo g && hexo d


针对语雀图片无法正常显示的解决办法

在主题的 layout 文件夹中的 post.ejs 文件中加上一句

<meta name="referrer" content="no-referrer" />

image.png


github actions自动更新


在 github 上创建一个私有仓库(因为会涉及到一些 token 啥的)仓库名字无所谓

注意:在仓库里面再放一个仓库是没法把里面那个仓库 push 到 github 的,只会传一个空文件夹,导致后期博客成了空白页面,最简单粗暴的办法就是把你 git clone 的 hexo 主题里的 .git 文件夹给删掉


然后在 hexo 的目录下运行如下命令

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/yichen115/blog.git
git push -u origin master

去 github 的 settings 创建一个 token


image.png


只勾上这一个即可


image.png


image.png


生成了 token 之后一定要记下来,再回来就没法看了

然后来到刚才创建的私有仓库的 settings


image.png


添加两个 secret

GH_REF 是你博客的仓库地址 github.com/yichen115/yichen115.github.io

注意去掉前面 https://

GE_TOKEN 是刚才生成的 token


然后来到 actions,点击 set up a workflow yourself


image.png


编辑内容如下:

name: Blog CI/CD

on: [push, repository_dispatch]

jobs:
  blog-cicd:
    name: Hexo blog build & deploy
    runs-on: ubuntu-latest
    env:
      TZ: Asia/Shanghai
    steps:
    - name: Checkout codes
      uses: actions/checkout@v2

    - name: Setup node
      uses: actions/setup-node@v1
      with:
        node-version: '12.x'
    - name: Cache node modules
      uses: actions/cache@v1
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

    - name: Install dependencies
      run: |
        npm install hexo-cli -g
        npm install yuque-hexo -g
        npm install
        yuque-hexo sync
    - name: Generate files
      run: hexo generate
      
    - name: Deploy blog
      run: |
        git clone "https://${{ secrets.GH_REF }}" deploy_git
        mv ./deploy_git/.git ./public/
        cd ./public
        git config user.name "yichen"
        git config user.email "xxxxx@xx.com"
        git add .
        git commit -m "GitHub Actions Auto Builder at $(date +'%Y-%m-%d %H:%M:%S')"
        git push --force --quiet "https://${{ secrets.GH_TOKEN }}@${{ secrets.GH_REF }}" master:master

下面那个 user.name 和 user.email 根据自己的情况改一下,注意对齐

弄完之后每当 push 或 repository_dispatch 的时候都会自动的进行更新


配置serverless云函数


来这里 https://console.cloud.tencent.com/scf/ 注册个账号

新建一个函数服务


image.png


image.png


内容写

# -*- coding: utf8 -*-
import requests

def main_handler(event, context):
    r = requests.post("https://api.github.com/repos/yichen115/blog/dispatches",
    json = {"event_type": "run-it"},
    headers = {"User-Agent":'curl/7.52.1',
              'Content-Type': 'application/json',
              'Accept': 'application/vnd.github.everest-preview+json',
              'Authorization': 'token 你的GH_TOKEN'})
    if r.status_code == 204:
        return "This's OK!" 
    else:
        return r.status_code

post 请求里只需要改用户名和仓库名(yichen115/blog)后面是固定的

那个 token 是带着的,完整的就是 'Authorization': 'token xxxxxxxxxxxxxx'


点下面那个测试,返回 This's OK!


image.png


同时 github actions 也会收到指令,去执行之前在 main.yml 设定好的


image.png


过一阵就成下面那个绿色的对号了,然后去访问一下博客,看看是否正常。可以的话就证明云函数可以了


创建一个触发器


image.png


image.png


他会给你一个访问路径,记下来


image.png


配置语雀webhook


在知识库中选择设置


image.png


触发规则自己定就好啦


image.png


挖华为终端产品漏洞赢巨额奖金! 注明看雪会员还有额外奖励!!

最后于 2020-7-23 21:03 被yichen115编辑 ,原因: 图片凉了
收藏
点赞1
打赏
分享
最新回复 (9)
雪    币: 18866
活跃值: 活跃值 (1266)
能力值: (RANK:382 )
在线值:
发帖
回帖
粉丝
顾何 活跃值 7 2020-7-23 22:01
2
0
支持~    "语雀的文档编辑器是我目前用过最舒服的" +1   我现在也是给朋友强烈安利语雀 哈哈
雪    币: 963
活跃值: 活跃值 (2870)
能力值: (RANK:260 )
在线值:
发帖
回帖
粉丝
0x2l 活跃值 3 2020-7-23 22:10
3
0
可以,比typora好用多了
雪    币: 5534
活跃值: 活跃值 (3873)
能力值: ( LV12,RANK:410 )
在线值:
发帖
回帖
粉丝
yichen115 活跃值 5 2020-7-23 22:21
4
0
顾何 支持~ "语雀的文档编辑器是我目前用过最舒服的" +1 我现在也是给朋友强烈安利语雀 哈哈
哈哈哈
雪    币: 5534
活跃值: 活跃值 (3873)
能力值: ( LV12,RANK:410 )
在线值:
发帖
回帖
粉丝
yichen115 活跃值 5 2020-7-23 22:33
5
0
0x2l 可以,比typora好用多了
用惯了语雀,typora只用来打开本地md文档了
雪    币: 963
活跃值: 活跃值 (2870)
能力值: (RANK:260 )
在线值:
发帖
回帖
粉丝
0x2l 活跃值 3 2020-7-23 22:34
6
0
typora好看是好看,传一下太麻烦了,我每次传看雪那图片都是一张一张上传的
雪    币: 725
活跃值: 活跃值 (496)
能力值: ( LV3,RANK:20 )
在线值:
发帖
回帖
粉丝
红金龙e晓楼 活跃值 2020-7-24 09:59
7
0
顾何 支持~    "语雀的文档编辑器是我目前用过最舒服的" +1   我现在也是给朋友强烈安利语雀 哈哈

语雀用了两三年了, 就是新改版的流量有点贵啊, 

不是说应该免费, 毕竟都不是永爱发电的, 只是开会员也才给没多少流量

最后于 2020-7-24 10:00 被红金龙e晓楼编辑 ,原因:
雪    币:
能力值: ( LV1,RANK:0 )
在线值:
发帖
回帖
粉丝
wx_么么哒 活跃值 2020-8-6 13:51
8
0
关于同步过去以后图片显示大小有点问题,看着不怎么协调,有办法解决吗
雪    币: 5534
活跃值: 活跃值 (3873)
能力值: ( LV12,RANK:410 )
在线值:
发帖
回帖
粉丝
yichen115 活跃值 5 2020-8-6 16:46
9
0
wx_么么哒 关于同步过去以后图片显示大小有点问题,看着不怎么协调,有办法解决吗
我对前端不了解,应该跟选用的主题有关
雪    币: 125
能力值: ( LV1,RANK:0 )
在线值:
发帖
回帖
粉丝
舒默哦 活跃值 2020-10-9 11:25
10
0
干货,谢谢
游客
登录 | 注册 方可回帖
返回