闲着没事想着优化一下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切换
nrm是npm的源管理器,可以在不同的源中切换
如果没有什么特殊上网方式访问原本的源的话还是建议先手动切换源
(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.yml是Anatolo的配置文件
这里还需要多做一步,这一步在原本的安装文件中没有说
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中编辑时,引用图片的格式应是
最好把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