使用GitHub-Vercel-Enveloppe部署hexo博客

背景

我习惯将文章存放在 Obsidian 的知识库中。原来部署博客时，需要先在本地通过 hexo new “my_page” 创建文章，再手动将 Obsidian 中的文章和附件复制到 Hexo 的对应目录，最后使用 hexo d -g 部署到 GitHub Pages。这种流程不仅操作繁琐，部署速度较慢，而且 GitHub 上的仓库默认是公开的。

为了优化发布流程，我尝试了 GitHub + Vercel + Enveloppe 插件的组合方案。通过 Vercel 授权 GitHub，仅需在 Obsidian 中借助 Enveloppe 插件一键推送文章到 GitHub 仓库，Vercel 即会自动克隆仓库并完成部署，大幅提升了发布效率。

博客发布流程

原先流程

在 Obsidian 中撰写文章 my_page。
在 Hexo 博客仓库中使用 hexo new “my_page” 创建新文章。
手动将 Obsidian 中的文章复制到博客仓库的 source/_posts/my_page.md 文件，并将附件复制到 source/img 文件夹，同时更新 my_page.md 中的图片链接为 ![](/img/{{name}}.png)。
使用 hexo d -g 命令部署并推送博客，整个过程非常耗时。

优化后流程

在 Obsidian 中撰写文章 my_page。
使用 Enveloppe 插件一键推送至 GitHub 仓库。

准备工作

在开始部署之前，需要先安装 Node.js、Git、hexo， Github 账户。

安装hexo，参考：免费构建个人博客：Hexo + GitHub + Cloudflare

初始化 Hexo 项目

新建一个文件夹，用于存放你 Hexo 博客的所有内容。

使用hexo init 初始化博客仓库

可修改主题，安装插件，配置好后使用hexo s查看效果

本篇的重点不在搭建 Hexo 博客上，故不进行设置。

创建 Github 仓库

新建一个 Github 仓库，用于存放博客源码，这个仓库可以是私有（Private）的，也可以是公开（public）的。

使用图中命令将本地博客 push 到你刚刚新建的 Github 仓库中，注意修改第365条命令。

将源码部署至 Vercel

点击New Project 新建一个 Vercel 项目

链接Github，导入刚在Github创建的仓库

Vercel 自动识别了这个仓库是一个 Hexo 项目，直接点击 Deploy 按钮部署。

成功部署后的页面如下，点击 Go to Dashboard，即可前往该项目的控制面板。

Domains下的链接即为博客的访问链接，左边为该网站的预览图片

解析域名至 Vercel

点击 Vercel 项目中的 Settings -> Domains -> Add，将你的域名解析至 Vercel 部署的网页上。

输入你的域名（可以是二级域名）后点击Add 按钮，即可绑定域名至该项目.

点击Configure Automatically自动配置DNS

访问自定义的域名后，可成功访问，证明部署成功了。

配置Enveloppe插件

在Obsidian中安装Enveloppe插件

接下来进行插件参数配置，配置解释请参考以下两篇文章，建议先大致了解配置选项后再进行配置

Enveloppe 插件适配 Hugo 的配置-PrintLove

Quartz与Enveloppe插件结合助力Obsidian搭建数字花园 | Enveloppe配置

GitHub Config

File Paths

Content

匹配内容：/!\[[^\]]*\]\(([^/)]+?)\.(png|jpg|jpeg|webp|gif)/
替换：![](/img/$1.$2

匹配内容：/\!\[\[([^/\]]+?)\.(png|jpg|jpeg|webp|gif)\|(\d+)(x(\d+))?\]\]/
替换：{{< figure src="/img/$1.$2"  width="$3" height="$5">}}

匹配内容：/\!\[\[([^/\]]+?)\.(png|jpg|jpeg|webp|gif)\|([^\|]*?)(\|(\d+)(x(\d+))?)?\]\]/
替换：{{< figure src="/img/$1.$2" caption="$3" width="$5" height="$7">}}