语雀自动同步到hexo博客
hexo+github pages+yuque-hexo插件+github actions+serverless云函数+语雀 实现语雀写完文章能够自动同步到 hexo 博客
本文针对已经搭建好 hexo 博客的,如果没有搭好正常的 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 是如下图这样对应的,个人界面和团队界面都可以
token 是在右上角头像 -> 账户设置 -> Token 添加的,权限的话只给读取就可以
ps.公开的知识库也要设置 Token
在 "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" />
github actions自动更新
在 github 上创建一个私有仓库(因为会涉及到一些 token 啥的)仓库名字无所谓
注意:在仓库里面再放一个仓库是没法把里面那个仓库 push 到 github 的,只会传一个空文件夹,导致后期博客成了空白页面,最简单粗暴的办法就是把你 git clone 的 hexo 主题里的 .git
文件夹给删掉
然后在 hexo 的目录下运行如下命令,把 hexo 的源码传到 github 远程仓库中
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
只勾上这一个即可
生成了 token 之后一定要记下来,再回来就没法看了
然后来到刚才创建的私有仓库的 settings
添加两个 secret
GH_REF 是你博客的仓库地址 github.com/yichen115/yichen115.github.io
注意去掉前面 https://
GE_TOKEN 是刚才生成的 token
然后来到 actions,点击 set up a workflow yourself
编辑内容如下:
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 "1097179511@qq.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/
新建一个函数服务
内容写
# -*- 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!
同时 github actions 也会收到指令,去执行之前在 main.yml 设定好的
过一阵就成下面那个绿色的对号了,然后去访问一下博客,看看是否正常。可以的话就证明云函数可以了
创建一个触发器
他会给你一个访问路径,记下来
配置语雀webhook
在知识库中选择设置
触发规则自己定就好啦
这篇文章更新的时候发现有失败的可能
我的博客地址:
https://yichen115.github.io
- 【Java学习笔记之二十九】Java中的"equals"和"=="的用法及区别
- NET跨平台:在Ubuntu下搭建ASP.NET 5开发环境
- 【Code】关关的刷题日记22——Leetcode 53. Maximum Subarray
- 【Java学习笔记之三十四】超详解Java多线程基础
- Codeforces 842B Gleb And Pizza【几何,水】
- Python3希尔排序
- Codeforces 842A Kirill And The Game【暴力,水】
- Wannafly模拟赛 A.矩阵(二分答案+hash)
- 【Java数据结构学习笔记之一】线性表的存储结构及其代码实现
- Comparison of Apache Stream Processing Frameworks: Part 1
- 【LeetCode】关关的刷题日记23——Leetcode 66. Plus One
- Codeforces Round #434 (Div. 2, based on Technocup 2018 Elimination Round 1)&&Codeforces 861A k-roun
- 【Java数据结构学习笔记之二】Java数据结构与算法之栈(Stack)实现
- 【Java数据结构学习笔记之三】Java数据结构与算法之队列(Queue)实现
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JavaWeb——web概念概述(静态资源与动态资源)、HTML概念概述
- Java——内部类使用总结(基本概念、定义内部类、static定义内部类、方法中定义内部类)
- Java——泛型基本总结(通配符、泛型接口、泛型方法)
- Java——类图、时序图、用例图
- Java——四种访问控制权限及Java命名规范
- Java——static关键字总结(含义、定义属性或方法、使用时机)
- Java——try catch finally异常的捕获及处理逻辑实例详解大全
- Java——String类使用详解(实例化、字符串比较、匿名对象、两种实例化方法的区别)
- Java——数组的定义与使用(基本概念、引用分析、初始化方式、二维数组、对象数组)
- Java——单例设计模式
- Java——包的定义及使用
- Java——Object类(基本概念、toString()方法、equals()方法、可以接收所有引用类型)
- JavaWeb——MyBatis框架之对数据库的增删改查操作CRUD实践及MyBatis参数的深入详解
- JavaWeb——MyBatis框架之入门总结及案例实战,常见坑处理:Failed to execute goal org.codehaus.mojo:exec-maven-plugin:3.0.0
- JavaWeb——MyBatis框架之执行过程原理与解析(通过自定义MyBatis查询所有操作的实现来观察整个过程)