使用语雀编辑器写静态博客

本来以为已经是最后一次折腾了,但是总是生活不停,折腾不止,觉得本地文件管起来还是有点麻烦,看到语雀 markdown 又做的这么好,前几天还准备拿它当云笔记用,但是据说底层存的都是 md 格式,有的时候又还是不太方便,不过做编辑器来说确实很爽了,自带图床,还有 github 上开源的一个接口。

准备工作

更新 node.js 和 npm

刚刚来就是坑,不过还是准备从正常的步骤开始说吧,就是博客基于的是 nodejs,很多包的安装都是采用 npm 统一管理的,因为有些插件需要使用新的版本,所以需要先更新一下,这里只说一下 windows 下面的操作。

更新 node.js

window 下并没有网上说的乱七八糟的命令行更新方式,直接在官网下载最新的安装包就可以。然后安装在之前的位置进行覆盖就可以更新了。更新之后通过命令:

$node -v
v10.13.0

更新 npm

通过命令:

$npm install -g npm

#更新后的版本可以看到
$npm -v
6.4.1

更新包

可以使用命令查看可以更新的包:

$npm outdated         #查看需要更新的包:
Package                 Current  Wanted  Latest  Location
hexo-helper-live2d      MISSING   3.1.0   3.1.0  hexo-site
hexo                      3.3.9   3.8.0   3.8.0  hexo-site
hexo-douban              0.2.14  0.2.16   1.0.6  hexo-site
hexo-generator-archive    0.1.4   0.1.5   0.1.5  hexo-site
hexo-generator-search     2.2.5   2.3.0   2.3.0  hexo-site
hexo-renderer-ejs         0.2.0   0.2.0   0.3.1  hexo-site
hexo-renderer-marked     0.2.11  0.2.11   0.3.2  hexo-site
hexo-server               0.2.2   0.2.2   0.3.3  hexo-site
$npm install --save  #

之后修改package.json文件,修改到对应的版本。然后执行命令,进行更新:

$npm install --save

安装语雀文章下载插件

首先这里鸣谢开源的插件:[yuque-hexo](https://github.com/x-cold/yuque-hexo),通过工具可以将语雀知识库中的文件同步到本地,大部分功能和步骤在仓库中都有些,但是自己做的时候还是踩了坑,这里就还是写一下吧。

1.创建语雀知识库

打开语雀 创建自己的博客知识库,并且要设置成公开的。可以在设置中看到链接如下: https://cdn.nlark.com/yuque/0/2018/png/187932/1542204775155-271c9311-4643-4ccd-8692-24ab7351e0cb.png#width=375 同时打开blog 知识库:https://www.yuque.com/mianhk/gaqqwc可以打开知识库。

2.在本地安装 yuque-hexo

npm i -g yuque-hexo

3.配置 package.json

  "scripts": {
    "clean": "npm run clean:yuque && hexo clean",
    "clean:yuque": "DEBUG=yuque-hexo.* yuque-hexo clean",
    "deploy": "hexo deploy",
    "publish": "npm run clean && npm run deploy",
    "dev": "hexo s",
    "sync": "DEBUG=yuque-hexo.* yuque-hexo sync",
    "reset": "npm run clean:yuque && npm run sync"
  }, 
  "yuqueConfig": {
    "baseUrl": "https://www.yuque.com/api/v2",    #这是语雀的永久链接,直接复制就可以
    "login": "mianhk",                      #用户名,上个链接的第一个下划线
    "repo": "gaqqwc",                      #知识库链接,第二个下划线
    "mdNameFormat": "slug",               #导出本地的文件名为随机的数字,比直接的中文title要好看,
                                                可以直接用了
    "postPath": "source/_posts/yuque"     #存在本地文件夹的位置
  }

4.删除和同步文章

#删除文章
$yuque-clean
[INFO] yuque-hexo clean start.
[INFO] remove yuque posts: F:\blog\mianhk.github.io\source\_posts\yuque\
[INFO] remove yuque local file: F:\blog\mianhk.github.io\yuque.json
[INFO] yuque-hexo clean finished.

#同步文章
$yuque-hexo sync
[INFO] yuque-hexo sync start.
[INFO] remove yuque posts: F:\blog\mianhk.github.io\source\_posts\yuque\
[INFO] loading config: F:\blog\mianhk.github.io\package.json
[INFO] downloading articles: {"baseUrl":"https://www.yuque.com/api/v2","login":"mianhk","repo":"gaqqwc","mdNameFormat":"slug","postPath":"source/_posts/yuque"}
[INFO] reading from local file: F:\blog\mianhk.github.io\yuque.json
[INFO] download article body: 11月生活小结
[INFO] download articls done!
[INFO] writing to local file: F:\blog\mianhk.github.io\yuque.json
[INFO] create posts director (if it not exists): F:\blog\mianhk.github.io\source\_posts\yuque
[INFO] generate post file: F:\blog\mianhk.github.io\source\_posts\yuque\xzxhcv.md
[INFO] yuque-hexo sync finished.

5.修改文章的 title 和 tag 等

还是跟之前的格式直接写即可。

title:
date:
update:
categories:
tags: []

6.部署博客

记录一些坑

  • 知识库一定要是公开的

  • windows 下更新 nodejs 不能用 n,即使强制使用了也还是无法更新

  • 新版本的 npm。如果改了 package.json,且 package.json 和 lock 文件不同,那么执行npm i时 npm 会根据 package 中的版本号以及语义含义去下载最新的包,并更新至 lock。

Reference:

https://segmentfault.com/a/1190000017797561 https://lkc.im/archives/1d99.html https://x-d.xyz/2019/04/02/yuque/Hexo%E5%8D%9A%E5%AE%A2%E4%BA%91%E7%AB%AF%E5%86%99%E4%BD%9C%EF%BC%8C%E4%B8%80%E9%94%AE%E9%83%A8%E7%BD%B2/