我的hexo配合obsidian的配置

闲着没事想着优化一下hexo的博客配置 我原来一直都是用vscode写markdown的,至于体验嘛,能写但不是很舒适 所以我就尝试换成了现在在用的obsidian,体验就好多了

然后就按网上的教程,尝试配置更加优雅的流程 然后发现原来用的hexo框架有点老了,就干脆重装了 没想到啊,重装个hexo又出了很多问题 所以这篇博客就从hexo的安装开始讲吧

<0x00> hexo的安装

(一般情况下跟着hexo官方教程没啥问题) 首先是要有Node.js环境,这个随意,最好是最新的版本 还要安装git,这个直接网上找安装包安装就好了

npm换源

npm原本的国内连接不畅,所以要换源 一般是换成国内的淘宝源

一般敲命令方法

npm config set registry https://registry.npm.taobao.org

通过nrm切换

nrmnpm的源管理器,可以在不同的源中切换 如果没有什么特殊上网方式访问原本的源的话还是建议先手动切换源 (nrm也是靠npm下载的)

# -g参数表示全局安装,这样的话可以在任何目录中使用nrm
npm install -g nrm
nrm use taobao
# 查看其它可以用的源
nrm ls
# 测试源
nrm test

安装hexo

首先是安装hexo环境

npm install -g hexo-cli

然后挑一个空的文件夹,初始化 (这里取名叫HexoBlog了)

hexo init ./HexoBlog

然后原本空的文件夹里面会生成一些文件 安装hexo依赖

cd ./HexoBlog
npm install

这样之后,hexo就搭建好了 但貌似hexo的依赖文件写的版本可能比较老了,最好还是更新一下

npm update

<0x01> 安装Anatolo主题

别的主题就看具体的安装说明了,我这里还是用Anatolo

首先是在HexoBlog文件夹

git clone https://gitee.com/Lhcfl/hexo-theme-anatolo.git themes/Anatolo
npm install hexo-renderer-pug --save
npm install hexo-renderer-stylus --save

然后进入HexoBlog/themes/Anatolo中,复制_config.example.yml_config.yml 这个_config.ymlAnatolo的配置文件 这里还需要多做一步,这一步在原本的安装文件中没有说

npm install

需要在Anatolo中再安装一次依赖,如果没有这一步的话运行时会报错找不到模块 我的猜想是我们在安装hexo依赖时没有全局安装,所以要在这里再安装一次 (或者所有的npm-g全局安装也行,但这样对C盘不友好,尤其是像我并不是专门做Nodejs开发的人)

然后回到HexoBlog,修改_config.yml中的theme: Anatolo 这样主题也安装好了

<0x02> 优化Hexo配置

部署到Github Page上

这个网上的教程足够多了,这边不细讲 就是记得安装hexo-deployer-git插件就好 在HexoBlog

npm install hexo-deployer-git --save

更方便的分文件管理

hexo的默认所有的博客文章都存放在HexoBlog/source/_posts下面 虽然可以在里面用文件夹归类不同的文章,但需要给这些博客手动写上categories属性 这就很麻烦了,手写麻烦还容易出错

可以安装一个插件,hexo-auto-category 它可以在hexo生成网页时自动给每个博客打上对应的categories属性

HexoBlog

npm install hexo-auto-category --save

修改_config.yml,添加下面的语句

auto_category:
 enable: true
 depth:

这样就安装好并启用了

<0x03> 使用obsidian作为编辑器

obsidian确实香,比起原本的vscode好多了,毕竟是专门的markdown编辑器 但要在hexo中使用obsidian作为编辑器,还需要做一些小优化

仓库的话,用obsidian打开HexoBlog/source/_posts就可以了

图片问题

hexo在生成时,图片需要在HexoBlog/source下面 但由于obsidian打开的目录在HexoBlog/source/_posts,所以会检索不到图片

我的解决方案是在HexoBlog/source下面新建picture文件夹来专门存图片 然后在HexoBlog/source/_posts下面添加picture软连接,让obsidian可以检索到

添加软连接的命令在powershell下和cmd下面有所不同,但都需要管理员权限

# powershell
New-Item -ItemType SymbolicLink -Path $放的地方 -Name $名字 -Target $连接的目标
# cmd
mklink /d $软连接存放路径 $连接的目标

然后就是在obsidian中编辑时,引用图片的格式应是![](/picture/...) 最好把obsidian文件与链接> > 自动添加wiki引用关了,[[]]格式的连接hexo本身解析不了 (貌似有插件在解决这个问题,但我没试成功过)

<0x04> 使用脚本做自动化

hexo的生成和部署都还是靠cli命令的 所以可以写一些脚本来做一些自动化 这里的脚本都是powershell脚本

新建博客文章并编辑

# (@24-03-07) 优化脚本,增加去除URL特殊字符
param(
    [string]
    [ValidateNotNullOrEmpty()]
    $Name
)

function ValidatedName {
    param (
        [string]
        [ValidateNotNullOrEmpty()]
        $Name
    )
    $SpecialCharacters = [char[]]@(
        "` "
        "`!"
        "`""
        "`#"
        "`$"
        "`%"
        "`&"
        "`'"
        "("
        ")"
        "*"
        "+"
        ","
        "-"
        "."
        "/"
        ":"
        ";"
        "<"
        "="
        "> "
        "?"
        "@"
        "["
        "\"
        "]"
        "^"
        "_"
        "``"
        "{"
        "|"
        "}"
        "~"
    )
    # 先每个替换成-
    foreach ($Character in $SpecialCharacters) {
        $Name = $Name.Replace($Character, "-")
    }
    # 返回时使用正则表达式匹配连续的-,并替换为单个-
    return $Name -Replace '([-])+', '-'
}

# 指定Obsidian目录
$ObsidianPath = "C:\Users\cookie\scoop\apps\obsidian\current\Obsidian.exe"

# 新建hexo博客
hexo new $Name

# 去除URL特殊字符
$Name=ValidatedName -Name $Name

# 创建图片文件夹
mkdir ./source/picture/$Name

# 启动Obsidian
Start-Process $ObsidianPath -ArgumentList ./source/_posts

# cls
Clear-Host

本地化部署测试

param(
    [Int16]
    $Port
)
# 清理hexo缓存
hexo clean
# hexo生成
hexo g
# 启动本地hexo服务器
if ($Port -eq $null) {
    hexo server
}
else{
    hexo server -p $Port
}

<0x05> 安装过程中可能的问题

hexo的有些依赖可能已经已放弃维护了 比如说hexo-renderer-sass,这个非常容易报错 (貌似删了不影响整体运行) 可以替换成hexo-renderer-sass-next,这个稳定很多

<0x06> 这套方案的问题

不支持Obsidian的wiki链接解析 也没用上Obsidian自带的模板功能 文章之间相互引用也很麻烦,要知道文章的具体URL

Licensed under CC BY-NC-SA 4.0