我喜欢写东西，我也喜欢捣鼓程序和代码，但我不喜欢在编程环境下写东西，也不喜欢在非编程环境下操作代码。

但是搭建博客本身就需要使用nodejs，避不开的就是“编程环境”。花了两天时间捣鼓后，我琢磨出来能将一个终端环境与写作环境彻底分离的博客搭建方案，能给 “强迫症站长” 提供一种几乎零干扰的博客写作体验——一键生成，将注意力只专注于写作上。

具体来说，本实践实现了三大核心目标：

  1. 在Obsidian中完成写作-配置-发布全流程，不需要额外呼出终端

  2. 自动化处理 元数据生成/图床上传/部署发布

  3. 在满足前两点的基础上，保持Hexo原生功能完整性

参考指南：
如何让图片安详地躺在床上 - Hexo
Hexo + Obsidian + Git 完美的博客部署与编辑方案 - 个人文章 - SegmentFault 思否
使用Hexo+Github+Obsidian搭建博客并实现多端同步 - Shiki

Hexo 部署

需要预先准备好Node js 和 Git

对于这两个东西的安装，可以参考Hexo官网的步骤：

Git的安装
Node.js的安装

安装 Hexo 并本地启动测试

导航至准备部署博客的文件夹内，打开Powershell或其他命令行终端，输入：

1
2
3
npm install -g hexo-cli # 全局安装  
  
hexo -v # 查看hexo版本

开始创建一个项目

1
2
3
4
5
hexo init blog # init后面的内容就是博客文件夹的名字，我这里以“blog”为例 
  
cd blog
  
npm install

生成网页文件后本地启动

1
2
3
hexo g # generate 生成界面  

hexo s # server 本地启动网站

浏览器访问命令行中提示的网站http://localhost:4000/可以看到在本机的4000端口Hexo已经生成了一个示例网站了。

测试完毕后记得在命令行 Ctrl + C 关闭本地启动

配置Github一键部署

目前，Hexo已有 hexo-deployer-git 这个现成轮子供我们一键部署。先在Blog文件夹内执行以下代码安装好它：

1
npm install hexo-deployer-git --save

hexo-deployer-git能够执行三个步骤：

  1. 生成静态文件：自动执行 hexo generate 命令，将你的Markdown文章转换为静态HTML文件

  2. 部署到远程：将生成的静态文件推送到你配置的Git远程仓库

  3. 初始化Github Actions：生成静态文件同时生成Github Actions脚本，实现此后哦每次推送自动构建和部署。

配置部署信息

安装完成后，还需要在博客根目录的 _config.yml 文件中添加部署配置，才能开始享受一键部署：

1
2
3
4
5
deploy:
  type: git
  repo: <你的仓库地址>  # 例如 [email protected]:username/username.github.io.git
  branch: main  # 或 master，取决于你的仓库默认分支
  message: "Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}"  # 可选的提交信息

完成配置后，可使用以下命令进行部署：

1
hexo clean && hexo deploy

或者简写为：

1
hexo d -g

Obsidian配置

插件安装

需要安装Image auto upload Plugin Linter Shell commands三个插件，如果不希望在Obsidian当中看到任何与写作无关的文件夹（node_modules public等），再安装一个Hide Folders

Shell commands

用于在Obsidian环境中一键执行hexo部署指令
只需在Shell Commands的设置里添加hexo clean && hexo deploy即可：
image.png
需要使用时，可以直接在Obsidian用Ctrl + P呼出快捷键执行该指令
image.png

Linter

最重要的一个插件，用于新建md文件时一键生成可以被Hexo解析的YAML头
Hexo博客的md文件都有YAML文件头以方便解析，在Obsidian当中以笔记属性显示
image.png
通常，在文件夹当中启动终端，然后输入hexo new post "此处输入博客主题"，生成的md文件就会附带对应的YAML头，这一步操作需要呼出后台。明显不符合本文的目标。如果每一次都手动输入的话未免显得麻烦。
此外，不同的Hexo主题可能YAML头不同，new post命令创建的文件一般只有date tag title三个属性，而butterfly主题可选的属性多达20左右。
因此，有必要准备此插件以加速博客源页面的创建流程。
首先，打开保存时格式化文件选项
image.png
这里以默认的Hexo主题为例，默认Hexo主题有三个属性内容：date title tags，其中date遵循 YYYY-MM-DD hh:mm:ss的格式

打开Linter的设置，找到插入YAML属性，打开指定 YAML 键插入到 YAML Front-matter 中，并在要插入的键中输入

1
2
3
date:
title:
tags:

tags只能自行手动输入，不过date和title的内容可以自动生成
date的生成，如图设置即可
image.png
title的自动输入可以通过启用YAML标题来实现：
image.png
这样一来，只需Ctrl + S，插件便会自动生成三个信息，免去手动输入的麻烦。

Hide Folders

这个插件主要用于在Obsidian当中隐藏某些无用文件夹，满足强迫症的需要

设置很简单，不想要哪个直接输入名字即可，另外支持模糊查找
image.png
整理一下，我就可以在Obsidian当中继续用PARA 方法来组织草稿了
注意：source不要隐藏，所有需要发布的博客，源文件都得拖到这里来

Image auto upload Plugin

这个插件和图床设置有关，放到下一章一起讲

配置一键图床上传+黏贴链接

我使用的是 PicList + 腾讯云COS对象存储 + ObsidianImage Auto Upload Plugin插件，其中PicList + COS用于将文件快速上传至图床，Image Auto Upload Plugin则负责将“上传图片——返回超链——黏贴至md”这个流程化简为Ctrl + V一键完成。

图床方面腾讯云阿里云都行，建议购买大厂的并且顺带买一个CDN，或者使用cloudflare的服务也行，如果你有境外信用卡的话。

PicList + 腾讯云COS对象存储的部署请参考PicList的官方文档。

腾讯云COS存储
PicList官网

image.png

如何在Obsidian中使用

在社区插件中搜索安装 Image auto upload，然后进入插件设置页面，修改默认上传器为 PicGo(app)，设置 PicGo server为 http://127.0.0.1:36677/upload即可，如下图所示, 此外该插件还额外支持通过PicList进行云端删除，请在删除接口内填入 http://127.0.0.1:36677/delete：

之后就可以开始享受一键CV贴图的快感了。

安全

域名与CDN加速

这方面已经有博客写的很完善了，使用国内的CDN加速需要实名备案，我先用的Cloudflare，目前还在琢磨图床的CDN当中。
使用cloudflare免费加速github page | MonkeyWie’s Blog

防图床盗刷

对象存储 防盗刷指引_腾讯云

移动端同步

因为我自己一直在用坚果云，于是就选择了Remotely Save插件，参考这篇文章进行配置
Obsidian通过Remotely save插件实现坚果云webdav同步 - 经验分享 - Obsidian 中文论坛
同样推荐使用这个方案来配置多端同步，方便随时记录想法，再转化为实际产出。

常见问题

hexo deploy操作后自定义域名失效

解决 Hexo 部署到 GitHub Pages 自定义域名失效 | Lucky
在source文件夹内添加CNAME，导向自己的域名，然后在 Shell command 当中将 hexo clean && hexo deploy 修改为 hexo clean && hexo generate && hexo deploy
如果你使用hexo-generator-cname，切记要在_comfig.yml当中设置自定义域名，否则每次都只会生成example.com

一键插入代码块、标注\取消代码

这个 Obsidian 有原生快捷键支持，只需要在写作时养成习惯即可，Ctrl + P搜索 “代码” 就可以找到，按照自己的需求设置快捷键即可，另外，其实框选后按下`键，就可以直接将框选的文字变成代码了

1
我选择了 Ctrl + R 和 Ctrl + Shift + R