渊澄

川流不息,渊澄取映

picgo有用于vscode的扩展插件,配置方法类似于桌面版,把Github的开发token信息及仓库源信息填上就可以开始使用了。
20220423143041

部分快捷键

1
2
3
4
5
Ctrl + Alt + u  ##从剪贴板上传图像

Ctrl + Alt + e ##从资源管理器上传图像

Ctrl + Alt + o ##从输入框上传图像

经过上一篇的步骤之后,我们已经可以将我们的HEXO站点发布到GitHub上了,并且可以正常访问。但是我们每次更新文章以及站点配置的时候必须先在本地进行编译、然后再部署到GitHub上,也就是每进行一次修改,必须执行以下命令

1
2
3
hexo g
hexo clean
hexo d

那有没有一种方法就是,系统检测到我们发布了新文章,然后自动进行程序的编译和发布呢?
今天部署的这个GitHub Action服务就是解决这个问题的。在上一篇文章中我们在 GitHub上还新建了一个私人仓库,我们今天用这个私人仓库来进行操作。

阅读全文 »

HEXO默认是不带评论系统的,但后台支持调用许多第三方的评论系统,我们这里以Valine为例来给HEXO站点配置第三方评论系统

1.注册LeanCloud账户并创建应用

进入LeanCloud网站注册账户,进行实名认证,然后创建一个应用,命名为hexo。

2.获取应用的APP KEY

进入创建好的应用,点击"设置",然后"应用凭证",获取APPID和APPKEY。

3.编辑主题配置文件

编辑主题的_config.yml配置文件

1
2
3
4
5
6
7
8
9
10
comments:
use: Valine
valine:
appId:
appKey:
avatar: monsterid # gravatar style https://valine.js.org/#/avatar
serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
bg: # valine background
visitor: false
option:

use字段填入"Valine"
appid和appkey字段填入获取到的信息,然后保存文件。

3.添加安全域名

进入应用"设置"-“安全中心”,填入你的HEXO站点地址,然后保存。

4.编译站点并发布

经过上面步骤之后对站点进行重新编译和发布,就可以在文章结尾看到评论窗口了。


经过三天的不断网上趴文和自我修炼,参考了众多网上大神的教程和文章,自己又填了无数个坑之后,终于成功在GitHub上部署了HEXO系统发布文章,使用GitHub Action功能自动编译HEXO程序并发布静态页面。我将用两个篇幅来记录部署过程。
第一部分介绍如何在本地部署HEXO程序,安装主题,本地预览,然后发布到Github Page。
第二部分介绍如何使用GitHub Action功能实现HEXO程序的自动编译和发布。

1.GitHub上新建仓库

登录你的Github,新建两个仓库:
一个仓库用于发布我们的HEXO站点,为了便于区分,我们在这里叫它公开仓库,新建的时候选在类型为Public,网址那里填入***.github.io,确保你可以使用域名https://***.github.com 访问到你的页面,这篇文章我们主要在这个仓库中进行操作;
另一个站点用于存放我们的HEXO程序源文件,用于和主仓库实现自动化编译和发布的联动,我们叫它私人仓库,类型选择Pravite,名称随便起,我们这里叫做hexo-action。

阅读全文 »

每次写hexo文章的时候都需要手动敲入文章头部的front-matter字段,而且有时候可能会敲错,导致发布失败,那有没有一种简单的方法,输入某个字符就能带出这些内容呢?
你别说还真有,在vscode中有一个snippets的功能就可以实现上面的需求,下面跟我来操作吧。

编辑markdown.json文件

ctrl+shift+P打开配置搜索框搜索snippets。
20220525134538
然后搜索markdown编辑markdown.json文件
20220525134725
在文件中插入以下字段并保存。
这里prefix后面的title可以随意替换,之后输入这个词就会带出相应的内容。body里面的字段也可以随意增减。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
"Generate Hexo blog header": {
"prefix": "title",
"body": [
"---",
"title: ",
"date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
"categories: ",
"tags:",
"cover: ",
"sticky: ",
"---",
],
"description": "hexo header"
}

20220525134901

编辑settings.json文件

在vscode中搜索settings.json文件进行编辑。
20220525135009
插入下面的字段并报错。

1
2
3
4
"[markdown]": {
"editor.wordWrap": "on",
"editor.quickSuggestions": true
},

大功告成

完成上面设置步骤之后在markdown文件中输入title就可以带出hexo所需的头部matter字段了。
20220525135235