问题

目前部分博客页面所引用的图片存储在图床，存在以下几个问题:

  • 每个图片需要单独上传，流程复杂，并且本地和图床的图片需要单独管理
  • 当使用github作为图床时，存在隐私问题，如不小心上传敏感图片时，需要通过push --force等方式覆盖所有提交
  • 当使用阿里云等对象存储需要付费

想要实现的目标

  • 将图片，如png等和html发布为网站内静态资源，从而摆脱图床的限制
  • 与typora编辑器无缝配合
  • 将hexo仓库放在github private项目管理，将编译后的结果放在github.io进行展示

步骤(2027-08-09)

今天发现不需要设置typora-root-url,有一个插件可以解决这个问题
https://github.com/cocowool/hexo-image-link

步骤

开启hexo自带的文章资源文件夹功能

https://hexo.io/zh-cn/docs/asset-folders.html#%E6%96%87%E7%AB%A0%E8%B5%84%E6%BA%90%E6%96%87%E4%BB%B6%E5%A4%B9

当开启这个功能之后，使用 hexo new命令创建新的文章时，_post目录下会生成一个文章的md以及与文章同名的文件夹

1
2
# _config.yml
post_asset_folder: true

使用 Markdown 嵌入图片

https://hexo.io/zh-cn/docs/asset-folders.html#%E4%BD%BF%E7%94%A8-Markdown-%E5%B5%8C%E5%85%A5%E5%9B%BE%E7%89%87

1
2
3
4
5
# _config.yml
post_asset_folder: true # 此处前一步已经添加了
marked:
  prependRoot: true
  postAsset: true

设置typora中插入图片的复制行为

将插入图片的复制行为改为将图片复制到./${filename}下，并设置图片语法偏好

设置当前文章中，typora图片的根目录

方式一
方式2

直接在meta data中添加typora-root-url标签

最终效果

可以直接摆脱图床，赞！