使用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 即会自动克隆仓库并完成部署,大幅提升了发布效率。

博客发布流程

原先流程

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

优化后流程

  1. 在 Obsidian 中撰写文章 my_page
  2. 使用 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

登录 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

1
2
3
4
5
6
7
8
匹配内容:/!\[[^\]]*\]\(([^/)]+?)\.(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">}}

Attachment Embeds

发布文章

1、在Obsidian中编写文章内容

2、 添加hexo属性

在文章最前面敲三次-,然后添加基本属性titledatetitle属性用于识别文章标题,若无该属性,使用Enveloppe插件默认配置的话发布的文章无标题;date属性用于显示发布的时间。其他属性请参考Front-matter | Hexo

3、添加Enveloppe插件的share: true属性

在文章最前面敲三次-,然后添加share属性,并将share属性标记为true。若不添加该属性,Enveloppe插件无法识别文章。

4、随后按Ctrl +P,搜索Enveloppe 命令即可发布或更新所有share标签为true的文章,命令详情请查看Commands

也可启用Enveloppe插件的菜单选项进行发布

进阶可配合Templates模板、Linter插件和ExMemo Assistant插件自动识别并设置文章属性,自动排版,无需手动添加属性。

5、删除文章

取消勾选share属性后使用Purge depublished and deleted files命令。

注意:有的时候可能删不了,需要手动去Github仓库中删除。

优化

关闭自动部署预览分支

使用Enveloppe发布文章时,上传的每一个笔记文件和附件都会产生一个Preview分支,并且Vercel会自动部署这些Preview分支,会很快达到免费的构建上限,关闭Preview分支自动构建行为,节省资源。

在Vercel中进行如下配置:

踩坑

  1. 用Vercel部署,可能是因为插件配置问题,文章名和附件名中不能有+号或空格,否则文章或图片可能会无法正常显示。

参考

使用 Vercel + github 部署 hexo 博客 | Hello! I’m 0o酱

【教程】netlify 或 vercel 完全自动部署 hexo | 慕雪的寒舍

Enveloppe 插件适配 Hugo 的配置 | PrintLove

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


使用GitHub-Vercel-Enveloppe部署hexo博客
https://blog.966677.xyz/2025/03/08/使用GitHub-Vercel-Enveloppe部署hexo博客/
作者
Zhou1317fe5
发布于
2025年3月8日
许可协议